The Power of CSS3 | LearnKey Blog

I just stumbled across one of the coolest sites demonstrating of the power of CSS3 – css3please.com. For those of you who don’t know what CSS is, its simply the language web developers use to put style and color into an average web page. CSS3 has taken style to the next level by allowing designers and developers to not only be able to add a color to an object, but be able to have it display a gradient from any specific color to another. You can also add drop shadows, rounded corners, custom font faces, and even rotation to an object. These features take a lot of pain out of website development by making objects much easier to work with, and quicker to customize and create. Any good developer can tell you of the hassle of trying to make a box with rounded corners without CSS3 – having to first create the image in Photoshop, then cut the image into several smaller pieces, and then get them all to behave and fit tightly together to look like they never were cut up. That can take quite a bit of time. Compare all that with this CSS3 code:

.roundedBox {
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;

}

Without border-raidus

With border-raidus

If you don’t see a difference between these two boxes, you are using a browser that does not have CSS3 support, such as Internet Explorer 8 or earlier. Browsers with good CSS3 support are Firefox, Chrome, Safari, and to a lesser extent, Internet Explorer 9.

These simple yet awesome features make developing a much more pleasurable experience. Now these are just the basic advantages of CSS3 to the old CSS2. CSS3 please! also calls attention to another exciting item that I haven’t found a use for yet in my development but I’m totally stoked to use – adding style transitions to elements. This feature is only really available in newer browsers like FireFox 4, but it allows for animation when changing an objects style. Super cool right?

Now for web developers like me who try to make their websites compatible with older browsers like IE7 (because IE6 is being dropped on its face!), its frustrating because we can’t use a lot of these awesome features in our development. This is the best part of css3please.com, they go into detail about what features are available in which browsers and their versions. Not only that, but there are a bunch that are either compatible or have been made to be compatible with versions of IE6-9! So, if you’re a web developer, you should check them out and start utilizing the power of CSS3.