tag:blogger.com,1999:blog-10330583301151677932024-03-13T03:47:14.452+02:00Web Design Tutorials & TipsArticles, tips and tutorials about web design, CSS, usability and other web design-related topics.Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.comBlogger19125tag:blogger.com,1999:blog-1033058330115167793.post-16931142043203710732012-07-11T16:07:00.004+02:002013-05-31T13:00:33.905+02:00<span style="font-size: large;">We've launched a new site</span><br />
<b>visit, like, enjoy</b><br />
<a href="http://yourbubble.co.za/">http://yourbubble.co.za</a><br />
<br />Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-15888224727537662232012-07-02T09:46:00.002+02:002012-07-02T09:49:54.671+02:00Javascript Keypressed Function<br />
<span style="font-family: 'Trebuchet MS', sans-serif;">This little JavaScript is very handy for key pressed functions using Javascript and jQuery.</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;"><br /></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">Learn these basics and start to implement them on anything from as simple as showing and hiding content, to developing a little game that requires interactivity with the keyboard.</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;"><br /></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">Javascript is fun and jQuery makes the experience better!</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;"><br /></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">Lets get to the basics.</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;"><br /></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">1) Write your html mark-up as you would normally do, html tags, head tags, body tags etc..</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;">2) Implement the following in order and enjoy the experience.</span><br />
<span style="font-family: 'Trebuchet MS', sans-serif;"><br /></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b>Adding the Javascript</b></span><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcEqBsuPHTb30uzB2peATCb-E9FRUT5J6A7XZ38vyzcQlLV7QDqIJES8AimZJlhyl3qOoFk4dPOqTGPvg9udk_cH6kxEm3Hw3QDhDYlPOewhxTKq8cyaf-LyXrMXl8vvX-DX8gInmgmTQ/s1600/jquery.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcEqBsuPHTb30uzB2peATCb-E9FRUT5J6A7XZ38vyzcQlLV7QDqIJES8AimZJlhyl3qOoFk4dPOqTGPvg9udk_cH6kxEm3Hw3QDhDYlPOewhxTKq8cyaf-LyXrMXl8vvX-DX8gInmgmTQ/s1600/jquery.jpg" /></a>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9vaON4bQWc8FuTZiGdRSlvFQAHr8IlY1nuGGiS8w-Df4JtN-evB3j-dv742e0zwSLLJa-ZvmJU_GDMbDfAPNaXMNEKx1cb7MjrfUtUs0Uyj62XikrT7u_8f-Pow6gbvaQdQcUHBfTGU/s1600/javascript.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9vaON4bQWc8FuTZiGdRSlvFQAHr8IlY1nuGGiS8w-Df4JtN-evB3j-dv742e0zwSLLJa-ZvmJU_GDMbDfAPNaXMNEKx1cb7MjrfUtUs0Uyj62XikrT7u_8f-Pow6gbvaQdQcUHBfTGU/s1600/javascript.jpg" /></a></div>
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcEqBsuPHTb30uzB2peATCb-E9FRUT5J6A7XZ38vyzcQlLV7QDqIJES8AimZJlhyl3qOoFk4dPOqTGPvg9udk_cH6kxEm3Hw3QDhDYlPOewhxTKq8cyaf-LyXrMXl8vvX-DX8gInmgmTQ/s1600/jquery.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a><span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<b style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: x-large; text-align: left;"><br /></b><br />
<b style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: x-large; text-align: left;"><br /></b><br />
<b style="background-color: white; font-family: 'Trebuchet MS', sans-serif; font-size: x-large; text-align: left;">Adding the styling</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOYhdTIEJ3foVqOxSgDlJMQMAbwRR8BTuJSITh-fbKYUDJJgIjeUakYAZV3HUrMCtqJtXK9dDIiGeInWmZeUOS7i6PhYTbeejWirpNJc0lgZYa7qvl1XFTTmWGE8NbKDVQFI3Rg2IfhPE/s1600/style.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOYhdTIEJ3foVqOxSgDlJMQMAbwRR8BTuJSITh-fbKYUDJJgIjeUakYAZV3HUrMCtqJtXK9dDIiGeInWmZeUOS7i6PhYTbeejWirpNJc0lgZYa7qvl1XFTTmWGE8NbKDVQFI3Rg2IfhPE/s1600/style.jpg" /></a></div>
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b>Now for the HTML</b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiviqqOvHHBkPhiXJ9I0En2XlhYI8gD2AkI8d5Zp_GXlFGRjxE2ZnVOSWd_4RE8euh5YW4x-Y0UAI84uFCIaJAf60YDSVBr7AdrskREBFwSA-q9tGz6K7VIIAIbBZMsvDktXfyuFENuA6M/s1600/html.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiviqqOvHHBkPhiXJ9I0En2XlhYI8gD2AkI8d5Zp_GXlFGRjxE2ZnVOSWd_4RE8euh5YW4x-Y0UAI84uFCIaJAf60YDSVBr7AdrskREBFwSA-q9tGz6K7VIIAIbBZMsvDktXfyuFENuA6M/s1600/html.jpg" /></a></div>
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br /></b></span><br />
<span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b>View the <a href="http://www.devsign.co.za/tutorials/keys.html" target="_blank">demo</a></b></span>Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-71847756595515919952011-10-07T13:01:00.000+02:002011-10-13T13:49:20.687+02:006 Habits For Writing Better CSS - Part 2<span class="Apple-style-span" style="font-size: 19px;"><b></b></span><br />
<b>Coming soon...</b>Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-52668108710940803742011-10-07T12:55:00.003+02:002011-10-07T16:47:17.292+02:006 Habits For Writing Better CSS - Part 1<style type="text/css">
h3.post-title.entry-title {font-size: 25px;}
.widget.PopularPosts, .widget.Poll { display: none;}
</style>
<span class="Apple-style-span" style="font-size: 19px;"><b>1. Get into the habit of using a CSS Reset</b></span><br />
How many times over and over have you coded your css and testing the code on Firefox and Chrome it looks fantastic and to your surprise IE looks like crap. Something that definitely comes in handy is the CSS Reset.<br />
It just resets all margins, paddings, sizes etc. and it simplifies knowing that you are working from a clean slate.<br />
You never edit the Reset.css because it must always be the same.<br />
<br />
<b>Some important factors when including the Reset css to your html.</b><br />
<br />
-Always load the reset css before your original site css.<br />
-Never edit the reset css, if you edit it, then it has no use of being a reset css.<br />
<ol>
</ol>
<div>
<div class="code">
<link rel="stylesheet" href="reset.css" /><br />
<link rel="stylesheet" href="site.css" /> </div>
<br />
<span class="Apple-style-span" style="font-size: 19px; font-weight: bold;"><br /></span><br />
<span class="Apple-style-span" style="font-size: 19px; font-weight: bold;">2. Adding comments to your code is very helpful</span><br />
Have you ever come across a piece of code and had absolutely no idea what it does or for what it is.<br />
Well if the coder didn't add comments then that's just unlucky.<br />
<br />
When coding, make it a habit to add comments, so when you are someone else works on the code, they'll have a fair idea of what the code is for.<br />
<br />
<div class="code">
/* This is a comment for this code section */<br />
.box {<br />
background: #000;<br />
color: #999;<br />
}</div>
<br />
<br />
<br />
<span class="Apple-style-span" style="font-size: 19px; font-weight: bold;">3. Keeping your code clean</span><br />
Having clean code is not only a art, but it also makes your code look good.<br />
<br />
When you have a class that only requires property, then keep everything on one line.<br />
If you have a class that contains more than one property, split it up onto multiple lines.<br />
<br />
It'll look cleaner and faster to read.<br />
<br />
<div class="code">
.class { text-align: left; }<br />
<br />
.class2 {<br />
background: #000;<br />
color: #999;<br />
width: 600px;<br />
}<br />
<br /></div>
<a href="http://christopherdesigner.blogspot.com/2011/10/6-habbits-for-writing-better-css-part-2.html"><span class="Apple-style-span" style="font-size: large;"><b>Go To Part 2</b></span></a></div>
Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-27905235744406401002011-10-06T09:18:00.001+02:002011-10-06T09:19:08.398+02:00Steve Jobs The Apple Genius Is Resting In Peace<div class="separator" style="clear: both; text-align: center;">
<a href="http://rt.com/files/usa/news/steve-jobs-apple-dead-iphone-179/steve-jobs-774.n.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="149" src="http://rt.com/files/usa/news/steve-jobs-apple-dead-iphone-179/steve-jobs-774.n.jpg" width="200" /></a></div>
What a shock to me coming to find that Steve Jobs the Apple Genius is dead.<br />
<br />
<a href="http://gizmodo.com/5838847/steve-jobs-is-dead"><b>Read the full article here</b></a>Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-17288931512558184872011-10-04T07:57:00.001+02:002011-10-04T07:58:09.839+02:00Web Designers Vs Web Developers<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF-6K17KFNiIWdqNBxU4pVB3cOtJyb6faAfgC0pEShjfLViI_5xprSTPhZiwWPTaOeW-EaADfyA5OWb1YhzKoBTk2ZoNcuY7bKd5K4YZratM9kwo79WHnDa0gBpEghDNGgROYUIva4PoY/s1600/webdesignersvsdevelopers.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF-6K17KFNiIWdqNBxU4pVB3cOtJyb6faAfgC0pEShjfLViI_5xprSTPhZiwWPTaOeW-EaADfyA5OWb1YhzKoBTk2ZoNcuY7bKd5K4YZratM9kwo79WHnDa0gBpEghDNGgROYUIva4PoY/s320/webdesignersvsdevelopers.png" width="205" /></a></div>
My favourite comparison chart between Web Designers & Web Developers.<br />
<br />
I like to think that I am a good combination of the two.Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-57353253962171603222011-09-27T16:29:00.000+02:002011-09-27T16:29:04.447+02:00Google Gravity!Have you checked out Google Gravity yet?<br />
<br />
<a href="http://mrdoob.com/92/Google_Gravity">http://mrdoob.com/92/Google_Gravity</a><br />
<br />
This guy is a very talented front end developer!
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogiseverything.com/images/google_gravity.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="241" src="http://www.blogiseverything.com/images/google_gravity.jpg" width="320" /></a></div>
Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-25862707923807765242011-09-14T11:24:00.002+02:002011-09-19T15:20:32.407+02:00Windows 8’s Start Menu
<span class="Apple-style-span" style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', Garuda, sans-serif;"><span class="Apple-style-span" style="font-size: 14px; line-height: 21px;">It's not the most detailed look, but Tom's Hardware noticed a cameo of the newest StartMenu in a Windows 8 video demo. It looks... pretty bare. Stark white-on-black text, very few buttons, and, importantly, where are the programs?</span></span><br />
<span class="Apple-style-span" style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', Garuda, sans-serif;"><span class="Apple-style-span" style="font-size: 14px; line-height: 21px;"><br /></span></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://c3.yousaytoo.com/rss_temp_image/pics/47/22/92/6102947/remote_image20110913-29205-1aonf2q-0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://c3.yousaytoo.com/rss_temp_image/pics/47/22/92/6102947/remote_image20110913-29205-1aonf2q-0.png" /></a></div>
<span class="Apple-style-span" style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', Garuda, sans-serif;"><span class="Apple-style-span" style="font-size: 14px; line-height: 21px;"><br /></span></span><br />
<span class="Apple-style-span" style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', Garuda, sans-serif;">Whereas Windows 7's Start Menu offers a multitude of ways to get at your software—favorites, search, a giant list of applications—this Windows Phone 7-inspired Start Menu has none of that. Just a search box. Unless we're missing something from this screenshot, which is entirely possible, this looks like a pickle. Are we meant to search for whatever we want to use, as we might via OS X's Spotlight? Are there context-specific buttons that spring up? With Microsoft revealing more and more about their next titanic OS, we'llprobably find out soon.</span>Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com1tag:blogger.com,1999:blog-1033058330115167793.post-15363777806685598722011-09-14T08:30:00.003+02:002011-09-19T15:05:05.938+02:00Google Provides Backlink Tool For Site Owners<style type="text/css">
h3.post-title.entry-title {font-size: 25px;}
.widget.PopularPosts, .widget.Poll { display: none;}
</style>
<br />
One of the common requests I hear from webmasters is “Why doesn’t
Google show me most or all of my backlinks?” Well, as of today, <a href="http://www.google.com/webmasters/sitemaps/">Google’s webmaster console</a> will now let you <a href="http://googlewebmastercentral.blogspot.com/2007/02/discover-your-links.html">see your site’s backlinks</a>.<br />
Major props to the webmaster console team for this new feature. A few things to know:<br />
<br />
-
The backlink tool doesn’t show 100% of the backlinks from Google yet,
but I expect the number of links that are available to grow.<br />
<br /> - In
particular, for my site I was easily able to see more than 10x more
links in this new tool than the link: command gave me. The link: command
has always returned a small fraction of the backlinks that Google knows
about, mainly for historical reasons (e.g. limited disk space on the
machines that served up “link:” data).<br /><br />
- You can download the
backlinks in a really nice CSV format, suitable for slicing and dicing
and other analysis. I believe you can export up to a million backlinks
if your site has that many backlinks. <img alt=":)" class="wp-smiley" src="http://www.mattcutts.com/blog/wp-includes/images/smilies/icon_smile.gif" /><br /><br />
- Do not assume just because you see a backlink that it’s carrying weight. I’m going to say that again: <strong>Do not assume just because you see a backlink that it’s carrying weight</strong>.
Sometime in the next year, someone will say “But I saw an
insert-link-fad-here backlink show up in Google’s backlink tool, so it
must count. Right?” And then I’ll point them back here, where I say <strong>do not assume just because you see a backlink that it’s carrying weight</strong>. <img alt=":)" class="wp-smiley" src="http://www.mattcutts.com/blog/wp-includes/images/smilies/icon_smile.gif" /><br />
<br />
I’m
sure that there was more that I wanted to say, but why don’t people
start playing with it and give feedback or post backlink tool-related
questions? I know that the webmaster team reads to get feedback over
here too; congrats again to that entire team for providing this. If you
want to start browsing your site’s backlinks, sign up for <a href="http://www.google.com/webmasters/sitemaps/">Google’s webmaster console</a> now.<br />
<br />
------------------------------------------------------------------------<br />
<br />
Thanks to <a href="http://www.mattcutts.com/blog">Matt Cutts</a> for this Article.<br />
Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-52707593929213645532011-09-12T08:57:00.000+02:002011-09-19T15:06:55.979+02:00How To Center a Div With CSS The Easy Way<style type="text/css">
h3.post-title.entry-title {font-size: 25px;}
.widget.PopularPosts, .widget.Poll { display: none;}
</style>
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Hst3JlJSc3rxDsxGieAXCGA9tZ_lAANtOq8CVEXpVGrKx9r6hxG16WVupEVxsBvjc1QHdKm4X2DePebZ6ahS9roCP3FjuzzAe3ogwIGFkH1CS72vhgJDewyfnea0HIRxWTe4IFi7LoY/s1600/center-div.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Hst3JlJSc3rxDsxGieAXCGA9tZ_lAANtOq8CVEXpVGrKx9r6hxG16WVupEVxsBvjc1QHdKm4X2DePebZ6ahS9roCP3FjuzzAe3ogwIGFkH1CS72vhgJDewyfnea0HIRxWTe4IFi7LoY/s200/center-div.png" width="200" /></a>When you look at any commonly found site on the net, you'll notice that most sites have some things in common. The content of the page is perfectly in the center of your browser window.<br />
<br />
<b>How is this possible, how can this be done?</b><br />
<br />
There are a few steps that can be taken into consideration to achieve this basic, yet very helpful technique.<br />
<br />
For starters.<br />
<br />
<b>1.</b> Create the class that will be used to center divs. This is done in your CSS.<br />
<br />
<div class="code">
.div-center {<br />
width: 1000px;<br />
margin: 0 auto;<br />
background: #ccc;<br />
}</div>
<br />
<b>2.</b> The class <b>MUST</b> always have a width in order for the CSS to know how to Center the object. If a width is not given, the CSS has no idea how wide the div is in order to center it.<br />
<br />
<b>3.</b> You can however, have a class that does not have a fixed width, but still center itself in your browser window, by using, min-width and max-width. These two will play a huge role when someone is using a 10" monitor or a 32" monitor.<br />
<br />
<b>4.</b> Now that you've created the CSS for your centered div, you must now create the div in your html.<br />
<br />
<div class="code">
<div class="div-center"><br />
<br />
Content that needs centering goes in here, div, spans, a whole site!<br />
<br />
</div>
</div>
<br />
I hope you've enjoyed this short introduction to centering divs in a browser window.
Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-9220380062088839482011-09-09T08:40:00.001+02:002011-09-19T15:07:07.549+02:00How To Get CSS3 To Work On IE6, IE7 and IE8<style type="text/css">
h3.post-title.entry-title {font-size: 25px;}
.widget.PopularPosts, .widget.Poll { display: none;}
</style>
If only border-radius and box-shadow could work on IE6 to IE 8....<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRVPHScbwyTNLvF6RDzt0TCkOijhbboov37aQUeauVOC8tsfQtdd_WVct855s50IQ_o2cpp6KhlhKB9mNtmPoG0l8CfnvsMl2T0f6y3hHwF6xiZPR_Jpsk19CjWodo_euwycVmS5X2MOY/s1600/css-ie.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRVPHScbwyTNLvF6RDzt0TCkOijhbboov37aQUeauVOC8tsfQtdd_WVct855s50IQ_o2cpp6KhlhKB9mNtmPoG0l8CfnvsMl2T0f6y3hHwF6xiZPR_Jpsk19CjWodo_euwycVmS5X2MOY/s1600/css-ie.png" /></a>Well now it can be done! It's just a simple script you add to your code and bing bala boom, your IE6 browser now has the capabilities to use styling like border-radius and box-shadow and much more!<br />
<br />
Here's what you need to do!<br />
<br />
<br />
<ol>
<li><a href="http://css3pie.com/download-latest">Download this package</a> and copy it to your sites directory. For example js, images or css.</li>
<li>Add this line to all classes or ids that will be using CSS3.</li>
<li>behavior: url(path/to/PIE.htc); This activates the magic.</li>
</ol>
Here's a example.
<br />
<div class="code">
.box {<br />
border-radius: 10px;<br />
box-shadow: 0 0 10px #000;<br />
behavior: url(path/to/PIE.htc);<br />
}</div>
<div>
It's that simple, expect a more revised version of this blog post.</div>
<br />
<br />Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-7649848142414811572011-09-06T13:35:00.001+02:002011-09-19T15:07:19.340+02:00Importance Of W3 Standards<style type="text/css">
h3.post-title.entry-title {font-size: 25px;}
.widget.PopularPosts, .widget.Poll { display: none;}
</style>
<a href="http://beginnerwebs.com/wp2/wp-content/uploads/2010/12/html-script.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="146" src="http://beginnerwebs.com/wp2/wp-content/uploads/2010/12/html-script.png" width="200" /></a>With the burgeoning popularity of the internet, new developmental tools
are created daily. With these tools come new challenges, marketing,
design, cross-browser transitions, etc. All of these can be a daunting
task for those web gurus who aren't well-versed in the W3 Standards. W3
(w3schools.com) is a resource for webmasters and programmers who want
the most for their viewing public.<br />
<br />
There are numerous technologies used
by programmers (ASP, PHP, and <span class="IL_AD" id="IL_AD9">Javascript</span>
to name a few), but this article will focus solely on XHTML and CSS. W3
has a set of standards for both of these technologies, and <span class="IL_AD" id="IL_AD5">making a website</span>
W3-compliant ensures that most all viewers will see the site exactly
the same way (no matter what browser they're using). Validation also
helps with <span class="IL_AD" id="IL_AD1">Search Engine Optimization</span>
(SEO) because clean code means easier search-engine spidering.
Cascading Style Sheets, or CSS, is a technology often used in sites with
many pages to make aesthetic changes easier. The style sheet is an
exterior file that runs interdependently with the HTML (or outputted
HTML) of a site.<br />
<br />
The style sheet serves as a template for the entire
site's color and font schemes, while also controlling borders, sizes,
and more. Being able to edit a single file, instead of 100s of changes
in many files saves time and precious <span class="IL_AD" id="IL_AD4">web design</span>
dollars. Validation is imperative to get the most out of a website.
That is, a user can upload or copy-and-paste their CSS file to the W3
site, and they'll be given a list of any errors it contains.Another of
the technologies becoming more popular is Extensible Hypertext Markup
Language, or XHTML.<br />
<br />
XHTML is an <span class="IL_AD" id="IL_AD6">extension</span>
of HTML 4.0, and, while in its infancy, has become quite prevalent.
XHTML conforms to standards moreso than HTML. As such, it is more
search-engine and user-friendly:XHTML documents conform to XML. XML
Tools can double as XHTML tools.XHTML is an extension of HTML 4.0. It is
more user-friendly and streamlined than HTML.XHTML is a combination of
HTML and XML in that it can run scripts and applets that use both the
HTML and XML DOM (Document Object Model)<br />
As XHTML grows, XHTML 1.0 documents will be able to interoperate among
other XHTML documents making it a more browser transitional language.<br />
<br />
To
conclude, using the standards of web <span class="IL_AD" id="IL_AD11">development</span>
lined out by the W3 is imperative for users to get the most out of a
site. Often, making a webpage W3-compliant is the first step of SEO, a <span class="IL_AD" id="IL_AD8">marketing tool</span>
to get the most out of your advertising dollar. Validation is easy, and
can be completed if a user has a basic knowledge of HTML-editing and
FTP (<span class="IL_AD" id="IL_AD7">File Transfer</span> Protocol). Using these tools, coupled with the set of W3 standards can <span class="IL_AD" id="IL_AD2">save a lot of money</span> and help the site's overall functionality.Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com1tag:blogger.com,1999:blog-1033058330115167793.post-22410982385252808892011-09-06T13:29:00.000+02:002011-09-19T15:07:29.938+02:00What is XHTML?<style type="text/css">
h3.post-title.entry-title {font-size: 25px;}
.widget.PopularPosts, .widget.Poll { display: none;}
</style>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqwDMJRmowUXvugDdrxQ1i84qQ2mQxuiW_Vpp5h8sC1WwWKWg0_6efgUhNZGdRUOpG6TEsJCYO-WMpbWWwBz6krInSYr1Jj4HqMo1Ul1v798T01oodCzCG8eMLta6qqkUKk4mQj2Bi72B0/s1600/XHTML+Logo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqwDMJRmowUXvugDdrxQ1i84qQ2mQxuiW_Vpp5h8sC1WwWKWg0_6efgUhNZGdRUOpG6TEsJCYO-WMpbWWwBz6krInSYr1Jj4HqMo1Ul1v798T01oodCzCG8eMLta6qqkUKk4mQj2Bi72B0/s200/XHTML+Logo.png" width="200" /></a>We have all heard of HTML. HTML stands for Hypertext Markup Language.
What is a hypertext markup language, you ask? It is a language for
specifying how certain text should appear. When you <span class="IL_AD" id="IL_AD1">design a web page</span>, you want certain content or <span class="IL_AD" id="IL_AD3">text to</span> be displayed in a specific way. You may want some text to appear in bold or italics, while other text you may want to display larger or in color.<br />
<br />
HTML is not the only type of markup language. There are markup
languages that apply to other types of applications, such as word
processing or other <span class="IL_AD" id="IL_AD6">software applications</span>.
However, HTML was by far the most important markup language ever
created, as it became the standard for displaying information on what is
now known as the <span class="IL_AD" id="IL_AD2">world wide web</span>, or internet.<br />
<br />
However, HTML is not the only markup language being used on the internet
today. Another, better version of HTML evolved as programmers began to
realize that HTML was innately flawed in a variety of ways.<br />
<br />
By 1999, a new specification was written in a language called XML, which forms the basis for XHTML. The World Wide Web Consortium says the following about XHTML:<br />
<br />
- The Extensible HyperText Markup Language (XHTML) is a family of
current and future document types and modules that reproduce, subset,
and extend HTML, reformulated in XML. XHTML family document types are
all XML-based, and ultimately are designed to work in conjunction with
XML-based user agents. XHTML is the successor of HTML, and a series of
specifications has been developed for XHTML -<br />
<br />
XHTML is what is known as a meta-language, which is a language for
defining a markup language. To put it simply, SGML (Standard
Generalized Markup Language) is the basis for HTML. XML is a more
refined subset of SGML, and forms the basis for XHTML. On the whole,
XHTML allows for more flexibility than HTML.<br />
<br />
XHTML was developed for two reasons: (1) to try to create a language
that could more effectively convey the meaning of a particular webpage
to a <span class="IL_AD" id="IL_AD10">computer</span>, and (2) to create a layout for webpages that would be universally understood by <span class="IL_AD" id="IL_AD9">browsers</span>
running on different platforms or on different types of screens,
whether it be a PC platform with a standard 800 X 600 monitor, a laptop,
<span class="IL_AD" id="IL_AD4">a cell phone</span>, or any other device.<br />
<br />
So, to all you web designers out there, it is <span class="IL_AD" id="IL_AD8">probably</span> time to start <span class="IL_AD" id="IL_AD11">designing</span> your most important web pages in XHTML. As almost every electronic device on the market is now equipped with <span class="IL_AD" id="IL_AD5">internet access</span>,
it is important to use a versatile programming language like XHTML so
that your web pages can be viewed and properly formatted across a wide
variety of platforms.Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-19959795873465455892011-09-02T12:44:00.003+02:002011-09-27T16:54:21.804+02:00What is CSS<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<style type="text/css">
h3.post-title.entry-title {font-size: 25px;}
.widget.PopularPosts, .widget.Poll { display: none;}
</style>
CSS is short for Cascading Style Sheet, it is the back bone language of web designing.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwBO1DbQCjLcQ6pzmj6Cnq7-sZ-xfM0G2Rbdr0hIvRpr7U-dfrm-UZ4oR7N21WIJfBJ7JlABd2dq9kjYqo-KYnFS5-P1Nq3IbhBSWNszdtbh0_KF22wrh-PYwQsBLWcP7OzgS4YKFJXl4/s1600/css.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwBO1DbQCjLcQ6pzmj6Cnq7-sZ-xfM0G2Rbdr0hIvRpr7U-dfrm-UZ4oR7N21WIJfBJ7JlABd2dq9kjYqo-KYnFS5-P1Nq3IbhBSWNszdtbh0_KF22wrh-PYwQsBLWcP7OzgS4YKFJXl4/s1600/css.png" /></a>Normally when someone wants to develop a web site, they must know how to use CSS to it's fullest potential, since CSS is what makes your site look great.<br />
<br />
CSS is mostly a set of commands, moulding your site into the design you want. CSS was introduces to make web styling a lot easier, and that's exactly what it is good at.<br />
<br />
Here's a example:<br />
<br />
<code lang="css">
</code><br />
<div class="code">
<code lang="css">div#main {</code><br />
<code lang="css"> background: #fff;</code><br />
<code lang="css"> width: 500px;</code><br />
<code lang="css"> height: 500px;</code><br />
<code lang="css">}</code></div>
<code lang="css">
</code>
<br />
I just basically designed a block to have the name 'main' and have a white background with the size of 500 pixels by 500 pixels.<br />
<br />
CSS can be added into a html file quite easily, from attaching a seperate CSS file normally called, style.css, you can also do the CSS styling within a html document like this.<br />
<br />
<code lang="html">
</code><br />
<div class="code">
<code lang="html"><html></code><br />
<code lang="html"><head></code><br />
<code lang="html"> <style type="text/css"></code><br />
<code lang="html"><br /></code><br />
<code lang="html"> div#main {</code><br />
<code lang="html"> background: #fff;</code><br />
<code lang="html"> width: 500px;</code><br />
<code lang="html"> height: 500px;</code><br />
<code lang="html"> }</code><br />
<code lang="html"><br /></code><br />
<code lang="html"> </style></code><br />
<code lang="html"></head></code><br />
<code lang="html"><br /></code><br />
<code lang="html"><body></code><br />
<code lang="html"><br /></code><br />
<code lang="html"><div class="main"></code><br />
<code lang="html"><h1>Heading 1</h1></code><br />
<code lang="html"></div></code><br />
<code lang="html"><br /></code><br />
<code lang="html"></body></code><br />
<code lang="html"></html></code></div>
<code lang="html">
</code>
<br />
Learning and using CSS is fun and each day is different, you learn something new everyday since it's a technology that keeps on growing.<br />
<br />
<a href="http://christopherdesigner.blogspot.com/2011/08/power-of-css-shorthand.html"><span class="Apple-style-span" style="font-size: large;">Have a look at this article about how to write better CSS</span></a>Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-71136987093508301822011-08-26T14:00:00.006+02:002011-09-19T15:07:51.020+02:00Web Design Software, Opensource and Licensed<style type="text/css">
h3.post-title.entry-title {font-size: 25px;}
.widget.PopularPosts, .widget.Poll { display: none;}
</style>
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b>Web Design Software, Opensource and Licensed are your two options.</b></span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b><br />
</b></span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">We live in a world filled with options and almost every need can be met, in Web Designing your two main needs would be a Text Editor and a Digital Image Editor. If you go search the web for something in these two categories, you'll definitely find a heck of a lot of options, let me tell you which apps are worth your time and which software can be called web design software.</span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b>Text Editor</b></span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">You get so many Text Editors, each one finding favour in someone's opinion, here is a list of my top 3 that I prefer to use.</span><br />
<ol>
<li><span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><a href="http://www.netbeans.org/">Netbeans </a>(free)</span></li>
<li><span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><a href="http://www.geany.org/">Geany </a>(free)</span></li>
<li><span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><a href="http://www.activestate.com/komodo-edit">Komodo Edit</a> (free)</span></li>
</ol>
<div>
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">You do get other Text Editors, but these are free and handle any project like a Licensed Text Editor. Netbeans is definitely the best, but it can soak up all your pc resources since it's Java driven. Geany is my favourite, it's lite weight and hardly uses any pc resources. Komodo edit is a blend of Geany and Netbeans, can get a little tricky to use. All three these Text Editors code perfectly well in most Languages, Python, HTML, CSS, Java, PHP and much more!</span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><br />
</span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b>Digital Image Editors</b></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">The most favourite to use as some of you may know is, Adobe software, with their awesome range of software like Photoshop and Fireworks you just cant go wrong, but the downside of this is that you must pay for a license and it is EXPENSIVE. If you are not the one to hand out cash, then you must definitely go opensource, you'll find a few good opensource web design software, but to save you the trouble I'll just give you three names of good free and licensed software.</span></div>
<div>
<ol>
<li><span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><a href="http://www.adobe.com/Photoshop">Adobe Photoshop</a> (not free)</span></li>
<li><span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><a href="http://www.adobe.com/products/fireworks.html">Adobe Fireworks</a> (not free)</span></li>
<li><span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><a href="http://www.gimp.org/">Gimp </a>(free)</span></li>
</ol>
</div>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiADL5tBixiEwi3h_r26rarRmttHukXsphA1fcVVIGdOuMpehZScW7pHbKRuqpGQOvEt1BmxDQot4aIr7aAJwp3dssby21VzXCwzJRjAVCH6gNm5k1gAFAgO2KDhQfcyMaWTJKQ2m5576o/s1600/gimp.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiADL5tBixiEwi3h_r26rarRmttHukXsphA1fcVVIGdOuMpehZScW7pHbKRuqpGQOvEt1BmxDQot4aIr7aAJwp3dssby21VzXCwzJRjAVCH6gNm5k1gAFAgO2KDhQfcyMaWTJKQ2m5576o/s200/gimp.jpg" width="150" /></a><span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="font-size: large;"><b>GIMP</b></span> </span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">The main runner in Opensource Image Editors, this app is really powerful, it has the capabilities of opening and editing almost all known file formats that Adobe have, from PSD to PDF, it's really powerful and specially that it runs very well on Linux and Windows.</span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTghP6XpSMsDPvMBv8IWnbklzP6pSzrQ1ZumfXd66_ePbZmSELN5TpQ-HFra0NLgm9yAirmBVsNR-6plXcl4DHZ7NiLNCl7wwtYB-xZqn3VKcExvFOBmRgpGrhidcKQI0Xf4S3RyMhT8/s1600/fw.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTghP6XpSMsDPvMBv8IWnbklzP6pSzrQ1ZumfXd66_ePbZmSELN5TpQ-HFra0NLgm9yAirmBVsNR-6plXcl4DHZ7NiLNCl7wwtYB-xZqn3VKcExvFOBmRgpGrhidcKQI0Xf4S3RyMhT8/s200/fw.jpg" width="150" /></a></div>
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="font-size: large;"><b>Fireworks</b></span></span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">Fireworks is definitely on my favourites list, because you can cut up designs very easily and it has the benefit of opening up PSD and layered PNG files. It has the same capabilities as Photoshop and most Designers prefer using Fireworks as their Web Design Software.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTAkCbyTouqGa1lg2tnU9EWEKeGIJs7UDoMIzyS7m-LN6IycRNZQnJSmL2__-yFi-2-SodiJREwks1te4cO0XE0X1eQu_Gc78fgQOG8EUyZG9FSFgOmXk0L0NJPNKk_wu9MGXZK9ScY4Y/s1600/ps.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTAkCbyTouqGa1lg2tnU9EWEKeGIJs7UDoMIzyS7m-LN6IycRNZQnJSmL2__-yFi-2-SodiJREwks1te4cO0XE0X1eQu_Gc78fgQOG8EUyZG9FSFgOmXk0L0NJPNKk_wu9MGXZK9ScY4Y/s200/ps.jpg" width="150" /></a></div>
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="font-size: large;"><b>Photoshop</b></span></span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">Photoshop is the favourite of them all, to be honest, I use Photoshop more for Photo Editing than Web Designing, but I guess everyone has their own liking. Out of all three of the software I mentioned, Photoshop is definitely the most powerful and if you are considering on doing Web Designing as a career, Photoshop should be in your tool bag.</span></div>
Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com1tag:blogger.com,1999:blog-1033058330115167793.post-19748678810223667582011-08-25T09:53:00.009+02:002011-09-19T15:07:59.782+02:00HTML 5 Validation Messages<style type="text/css">
h3.post-title.entry-title {font-size: 25px;}
.widget.PopularPosts, .widget.Poll { display: none;}
</style>
<b><span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif; font-size: large;">HTML 5 Validation Messages Styling</span></b><br />
<b><span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><br />
</span></b><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">So many Web Designers using Html 5 absolutely love every second of it, but it does have it's negatives, like older browsers do not support any Html 5 lingo...</span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">One useful thing that I've been using is the HTML 5 Validation Messages, they improve the speed of development and no need for jQuery, whoo hoo! Okay wait, I cant style these awesome Validation Messages, oh but wait, YOU CAN! only in Chrome though, yes Firefox will soon catch on, and 5 years from now IE will hopefully actually realise what Html 5 is :)</span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><b>The styling.</b></span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">Suppose that you want to modify colors of the validation messages bubble. Add the following CSS declarations...</span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"></span><br />
<pre class="wiki"><div class="code">
::-webkit-validation-bubble-message {
color: #eee;
background: #000;
border-color: #444;
-webkit-box-shadow: 0 0 5px #444;</div>
<div class="code">
}<span class="Apple-style-span" style="font-family: inherit;">
</span><span class="Apple-style-span" style="font-family: inherit;">::-webkit-validation-bubble-arrow {
background: #000;
border-color: #444;
-webkit-box-shadow: 0 0 5px </span>#444;</div>
<div class="code">
<span class="Apple-style-span" style="font-family: inherit;">}</span></div>
</pre>
<pre class="wiki"><span class="Apple-style-span" style="color: #eeeeee; font-family: 'Trebuchet MS', sans-serif;">
</span></pre>
<pre class="wiki"><span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="white-space: normal;">Some more styling...</span></span></pre>
<pre class="wiki"><span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="background-color: #cccccc; color: #eeeeee; white-space: normal;">
</span></span></pre>
<pre class="wiki"><pre class="wiki"><pre class="wiki" style="white-space: normal;"><pre class="wiki"><div class="code">
::-webkit-validation-bubble-message {
color: #eee;
background: #000;
border-color: #444;
-webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.5);
}
::-webkit-validation-bubble-message:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 4px;
background: urlimages.png)
}
::-webkit-validation-bubble-arrow {
background: #000;
border-color: #444;
<span class="Apple-style-span" style="font-family: inherit;">-webkit-box-shadow: 0 0 5px </span>#444;
}</div>
</pre>
</pre>
<pre class="wiki" style="font-family: 'Trebuchet MS', sans-serif; white-space: normal;"><span class="Apple-style-span" style="background-color: white;">
</span></pre>
<pre class="wiki" style="font-family: 'Trebuchet MS', sans-serif; white-space: normal;"><span class="Apple-style-span" style="background-color: white;">
</span></pre>
<div class="separator" style="clear: both; font-family: 'Trebuchet MS', sans-serif; text-align: left; white-space: normal;">
<span class="Apple-style-span" style="font-size: large;"><b>
</b></span></div>
<div class="separator" style="clear: both; font-family: 'Trebuchet MS', sans-serif; text-align: left; white-space: normal;">
</div>
<div class="separator" style="clear: both; font-family: 'Trebuchet MS', sans-serif; text-align: left; white-space: normal;">
<span class="Apple-style-span" style="font-size: large;"><b>PREVIEW</b></span></div>
<div class="separator" style="clear: both; font-family: 'Trebuchet MS', sans-serif; text-align: left; white-space: normal;">
<span class="Apple-style-span" style="font-size: large;"><b>
</b></span></div>
<div class="separator" style="clear: both; font-family: 'Trebuchet MS', sans-serif; text-align: center; white-space: normal;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3HDwKqJ4P_ypwMfMvHuYqKunYhgcvJyCoJDX-uAMjrSZfyaz7ZJn2j7ah_CIx4dLrdwz2kzhG9Qqwpu9Lbn8jDXU-WaxYrFRA9IM6yU_XA_vRz-L8ZQxKa6z45aFgGe_lUZK4gFxt784/s1600/validation-bubble-styled.png" imageanchor="1" style="background-color: white; clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3HDwKqJ4P_ypwMfMvHuYqKunYhgcvJyCoJDX-uAMjrSZfyaz7ZJn2j7ah_CIx4dLrdwz2kzhG9Qqwpu9Lbn8jDXU-WaxYrFRA9IM6yU_XA_vRz-L8ZQxKa6z45aFgGe_lUZK4gFxt784/s1600/validation-bubble-styled.png" /></a></div>
<div class="separator" style="clear: both; font-family: 'Trebuchet MS', sans-serif; text-align: left;">
<span class="Apple-style-span" style="white-space: normal;">So there you have it, easy, simple and now we must just wait for Firefox and IE and all the other browsers to </span>catch on<span class="Apple-style-span" style="white-space: normal;">! Whoo hoo, go Chrome!</span></div>
</pre>
</pre>
Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-9580372058605785812011-08-23T11:51:00.005+02:002011-09-19T15:08:09.313+02:00The World Wide Web Funnies<style type="text/css">
h3.post-title.entry-title {font-size: 25px;}
.widget.PopularPosts, .widget.Poll { display: none;}
</style>
<span class="Apple-style-span" style="color: #073763;">This is just a classic, Firefox and Chrome both showing that they dominate, but oh my goodness, the stupidity of IE is perfectly captured!</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhkI4jR76kd-C5C_xQK2x3D8pOZ17E8rpau7BVHZ6Jo4XsVDEH0ZLMq7BIFXyEhKhHwPJL5evvYcVAX30FF0cYqDBd7IrtnEhdq5rjkcEMLKFQfx3bHO6SSTQ8cXlDBMb2RFzV1zAfLA/s1600/ie.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhkI4jR76kd-C5C_xQK2x3D8pOZ17E8rpau7BVHZ6Jo4XsVDEH0ZLMq7BIFXyEhKhHwPJL5evvYcVAX30FF0cYqDBd7IrtnEhdq5rjkcEMLKFQfx3bHO6SSTQ8cXlDBMb2RFzV1zAfLA/s320/ie.jpg" width="320" /></a></div>
<br />Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0tag:blogger.com,1999:blog-1033058330115167793.post-5169978655001771782011-08-19T13:29:00.001+02:002011-09-19T15:08:18.036+02:00To in-line style or to not, that is the question.<style type="text/css">
h3.post-title.entry-title {font-size: 25px;}
.widget.PopularPosts, .widget.Poll { display: none;}
</style>
<b><span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;">In-line styling, some like it some don't. Some even say it's a lazy and sluggish way to apply styling.</span></b><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;">Well you see, the thing is, no one is right or wrong, everything has it's place in the world, whether it be in-line or not.</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<div id="p-glow" style="background: #ccc; padding: 5px;">
<b><span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;">Benefits of in-line styling.</span></b></div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;">Most developers will say, in-line styling is a thing from hell, but truth be told, in-line styling does have it's benefits.</span><br />
<ul>
<li><i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;">You can quickly patch something gone wrong.</span></i></li>
<li><i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;">You don't need to write a whole styling script for when you'll only be applying a style on one thing.</span></i></li>
</ul>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;">For example, if you apply the same style on many areas of your site, but you only need to change one thing on one div or whatever, instead of going to your css and doing what you do best, you just apply a in-line style.</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;">But of cause, like I said many developers prefer to do it the long way or the easy quick way.</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<div id="p-glow" style="background: #ccc; padding: 5px;">
<b><span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;">Disadvantages of in-line styling.</span></b></div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;">In-line styling can get messy, specially if you are working on a big project.</span><br />
<ul>
<li><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><i>Too much in-line styling used makes it difficult to make changes in later stages.</i></span></li>
<li><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><i>IT GETS MESSY, most newbies use in-line styling from start to finish, and for someone else to carry on working on the project will give him a tough time.</i></span></li>
</ul>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;">So like I said, it's best used for when using in-line styling on one area, but definitely a never do it, when you use in-line styling throughout the whole site!</span></div>
Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com1tag:blogger.com,1999:blog-1033058330115167793.post-8966902776432145472011-08-18T09:54:00.003+02:002013-05-31T13:48:42.250+02:00The Power of CSS Shorthand<style type="text/css">
h3.post-title.entry-title {font-size: 25px;}
.widget.PopularPosts, .widget.Poll { display: none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script><span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><span style="font-weight: bold;">So many web developers</span> </span><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;">specially those who are new to the whole HTML CSS thing, will normally write out every single line of code exactly as they were taught. </span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;">There is nothing wrong with this type of coding, the only problem is that it takes up a lot of extra time, and from my experience, clients are not interested in what will take the longest, clients want things to happen snappy. </span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;">If you've been in coding for quite some time or just starting out, these examples that I'll be giving you will definitely help to code faster and smarter. It can make such a big difference, for example, a css file that contains 1000 lines of code, can become a 500 line css file simply by using shorthand css procedures. </span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br /></span>
<br />
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br />
</span></div>
<div>
<div>
<div class="code" style="background: #ccc; padding: 5px;">
<span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><b>1. Background Attribute - CSS Tag</b></span></div>
</div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><i><b> <br />
</b></i></span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><i><b>Normal</b></i></span><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b> CSS</b></span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-image: url(images);</span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-position: 10px 50px;</span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-repeat: no-repeat;</span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #fff;</span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"> <br />
</span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b>Shorthand</b></span><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b> CSS</b></span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>background: #fff url(image) 10px 50px no-repeat;</span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"> <br />
</span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"></span><br />
<div>
<div class="code" style="background: #ccc; padding: 5px;">
<span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><b>2. Margin & Padding Attribute</b></span><span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><b> - CSS Tag</b></span></div>
</div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b><i> <br />
</i></b></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: x-small;"><b><i>Same applies to padding</i></b></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b><i><br /></i></b></span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b>Normal CSS</b></span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>margin-left: 10px;</span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>margin-right: 10px;</span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>margin-top: 10px;</span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>margin-bottom: 10px;</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br />
</span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b>Shorthand CSS</b></span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>margin: top right bottom left; "the structure"</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"> or</span><br />
<span class="Apple-tab-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; white-space: pre;"> margin: top/bottom left/right; "margin: 10px 5px;"</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br /></span>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br /></span>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div class="code" style="background-color: #cccccc; background-position: initial initial; background-repeat: initial initial; padding: 5px;">
<div style="margin: 0px;">
<span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><b>3. Border Attribute</b></span><span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><b> - CSS Tag</b></span></div>
</div>
</div>
<div>
<div style="color: black; font-family: 'Times New Roman';">
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b><i><br /></i></b></span></span></div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b>Normal CSS</b></span></div>
<div style="color: black; font-family: 'Times New Roman';">
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> border-width: 2px;</span></span></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> border-style: solid;</span></span></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> boder-color: #000;</span></span></span></div>
<div style="color: black; font-family: 'Times New Roman';">
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br /></span></span></div>
<div style="color: black; font-family: 'Times New Roman';">
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b>Shorthand CSS</b></span></span></div>
<div style="color: black; font-family: 'Times New Roman';">
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>border: solid 2px #000;</span></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br /></span></span>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br /></span></span>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div style="color: black; font-family: 'Times New Roman';">
</div>
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div class="code" style="background-color: #cccccc; padding: 5px;">
<div style="margin: 0px;">
<span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><b>4. Font Attribute</b></span><span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><b> - CSS Tag</b></span></div>
</div>
</div>
</div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b><i><br /></i></b></span>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b>Normal CSS</b></span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> font-family: Verdana, Arial;</span></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> font-size: 15px;</span></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> font-weight: bold;</span></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> font-style: italic;</span></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> line-height: 1.5px;</span></span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br /></span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b>Shorthand CSS</b></span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-style-span" style="white-space: pre;"> </span>font: italic bold 15px/1.5 Verdana, Arial;</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br /></span>
<br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br /></span>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div class="code" style="background-color: #cccccc; padding: 5px;">
<div style="margin: 0px;">
<span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><b>5. Color Attribute</b></span><span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><b> - CSS Tag</b></span></div>
</div>
</div>
</div>
<div>
<div style="color: black; font-family: 'Times New Roman';">
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b><i><br /></i></b></span></div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b> </b>Aqua: #00ffff to #0ff</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"> Black: #000000 to #000</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"> Blue: #0000ff to #00f</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"> Dark Grey: #666666 to #666</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"> Fuchsia:#ff00ff to #f0f</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"> Light Grey: #cccccc to #ccc</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"> Lime: #00ff00 to#0f0</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"> Orange: #ff6600 to #f60</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"> Red: #ff0000 to #f00</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"> White: #ffffff to #fff</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"> Yellow: #ffff00 to #ff0</span></div>
</div>
</div>
</div>
</div>
<div>
<span class="Apple-style-span" style="font-size: 14px;"> <br />
</span><br />
<span class="Apple-style-span" style="font-size: 14px;"><br /></span>
<span class="Apple-style-span" style="font-size: 14px;"><br /></span>
<br />
<div>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div class="code" style="background-color: #cccccc; padding: 5px;">
<div style="margin: 0px;">
<span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><b>6. Border-radius Attribute</b></span><span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><b> - CSS3 Tag</b></span></div>
</div>
</div>
</div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b><i><br /></i></b></span>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b><i>For Beautiful rounded corners on divs etc.. Only supported on modern browsers, otherwise use cssPie for older browser support.</i></b></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b><i><br /></i></b></span><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b>CSS3</b></span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> border-radius: topLeft topRight bottomRight bottomLeft;</span></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> border-radius: 10px 5px 10px 5px;</span></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"><br /></span></span>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"><br /></span></span>
<br />
<div>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div class="code" style="background-color: #cccccc; padding: 5px;">
<div style="margin: 0px;">
<span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><b>7. Opacity Attribute</b></span><span class="Apple-style-span" style="color: #444444; font-family: 'Trebuchet MS', sans-serif;"><b> - CSS Tag</b></span></div>
</div>
</div>
</div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b><i><br /></i></b></span>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b><i>For cross browser Opacity, use the following.</i></b></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b><i><br /></i></b></span><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b>CSS</b></span><br />
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><b><br /></b></span>
<span style="color: #666666; font-family: 'Trebuchet MS', sans-serif; white-space: pre;"> /* Modern Browsers */</span></div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span><span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><span style="white-space: pre;">opacity:0.5;</span></span><br />
<span style="color: #666666; font-family: Trebuchet MS, sans-serif;"><span style="white-space: pre;">
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;</span></span></div>
</div>
<div>
<span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif;"><br /></span></div>
</div>
Christopher Beckerhttp://www.blogger.com/profile/09679855976270423216noreply@blogger.com0