CSS 3 – Making our life easier, one line of code at a time…

There are plenty of articles out there written by great CSS masters that will tell you about what’s, why’s and who’s of CSS. So if you want an in-depth analysis of CSS you’d better off reading an article by Eric Meyer or by some of the other CSS greats out there.

This article is about bringing you up to speed with CSS 3 and how it makes the life of an average graphic designer who has to deal with css on a daily basis, easier.

In truth, I’m no CSS wizard. My CSS programming skills are just a little better than average, at best. I have no problems with converting a design into basic html and CSS and can even hack it for IE6, but that’s about it.

However, CSS 3 has made life a lot easier for most of us designers. And hopefully with the introduction of IE 8, IE 6 will gracefully go to its resting place and the internet will become a better place.

Here are some of the features of CSS 3, for more information you can always check out w3schools or css3.info.

• You can now have rounded corners without having to use images. This is by far the most exciting feature of css 3, for me. You now don’t have to worry about creating images for all the rounded corners in your design. You can just program it in.
• You can now have multiple background images for a single element. You no longer require multiple divs just for your backgrounds; you can have different images separated just by commas.
• You can now have an image as a border. That’s right; you can now use an image as a border style. This should definitely make for some interesting designs.
• You can now adjust the transparency of your images or elements using CSS. You no longer have to create transparent gifs or pngs to place in your design. Not to mention, soon enough you won’t have to write a separate style sheet for IE6 to fix your transparent pngs.
• You can now use a drop shadow effect using CSS. This has to be one of the coolest features of CSS 3. Being able to use a drop shadow effect just using a couple of extra lines of code is so much easier than rendering your images, slicing them up and then worrying about how your pngs will display in different browsers.

And finally,

• You can use custom fonts in your design and have css call the font in from an online font directory using @Font-Face. This will make for some new an interesting designs and sites. You’re no longer restricted to that handful of fonts that are used all over the internet.

Some downsides: Not to spoil everyone’s fun, but as things stand right now, not all of the new CSS 3 features are supported by all the browsers. For the IE users, most of these features will work only with IE 8. Even for the others, there’s still a short wait until all browsers are CSS 3 compliant.

Not to mention, with all these new features there’s a chance that people will overuse the preset effects.

To quote Chris Spooner from the popular BlogSpoonGraphics,

Just as is done with traditional Photoshop filters, the use of these new styling features could result in some eye-wrenching designs. Drop shadows in particular ring warning bells for us; we’re not looking forward to seeing the Marketing Department’s choices with that one!