Launch CSS3 NOW!

Launch CSS3 NOW!

After so many years of fighting incompatible web coding standards, it's a relief to find a standard that doesn't break things in non-compliant browsers. With CSS, you can breath life into every button, take the stiffness out of graphics and even add animation--all without harming the look in older browsers, like Internet Explorer 8. 

Hover-Crafting

You move your mouse over a button, and it changes instantly. We've been seeing rollovers like this for over a decade. It was fun at first, but now it just bothers your eyes to see a row of these flashy, jerky things. You even look away.

But what if instead of changing like a flash, it faded smoothly in and out? What if it changed size or shape gently, quietly and ever so gracefully? With CSS3 you get the affordance of function without the herky-jerky movement of a rollover. 

And here's the great news: this kind of function doesn't require tricky coding, extensive JavaScript libraries or a whole new set of programming tools. You just enter a couple of lines of CSS3 code. 

What about Explorer 8 (and before)? IE just ignores it. The hover transition performs only a basic conventional change, so IE users never know the difference. 

Transforms

Say you move your mouse over a picture, and the picture lifts gently off the screen and rotates slighly. What used to take a JQuery expert to install and code now takes just a few simple lines of CSS3, and the computer executes it faster and easier. 

  1. One command to enlarge the photo. 
  2. One command to add a drop shadow. 
  3. One command to rotate the photo. 

Again, IE just ignores the extra function. The pictures look just as pedestrian as ever, and nothing breaks. 

Curves & Multiple Backgrounds

Did you know that move website designs are made out of dozens of graphics, called slices? They are pieces that have been cut out of one large picture and have to be laid out in precise order and position to make the design appear correctly on the page. The reason for this is that before CSS3 you couldn't get rounded corners, transparencies or other overlapping effects without literally 'hacking' apart your design and reassembling it in a complex coded layout.

Not uncommonly, your layout would break, and you could see a crack between slices or a sticking-out section graphic that you know doesn't below. It was like building a house of cards and learning not to breath too hard. 

But CSS3 allows you to round corners and make things transparent on the fly. It makes it so you can cut out some of the slices and focus on the design more. 

Animation

This is an area of CSS3 that is wide open for development, and I'm sure most of it's potential is locked solidly in the future. The CSS3 standard, while profoundly simple, allows for a huge amount of complexity to those who want to pioneer the area. While much of CSS 2 and 3 have replaced what we used to see in Flash animation, the CSS3 animation standard could take enough of the industry with it to render Flash rather obscure. 

What about IE Users? 

Don't worry. IE9 (Internet Explorer, version 9.0) is now available for free download at Microsoft. While it's still 2 years behind other browsers, like Safari, Chrome or FireFox, it does run most of the CSS3 functions we've talked about.