Wednesday, 28 April 2010

CSS 3 Features

Although CSS3 isn't mainstream enough that we can adopt it wholly without regard, we can however start using it knowing that it will degrade gracefully enough with minimal impact on our designs.

Aside from beginning your familiarisation process with CSS3, another advantage is that as more browsers start to support it, users with supported browsers (Firefox and Webkit based browsers at time of this blog post) will start noticing the nicer ‘changes' you've made to your web site.

If you want to take advantage of some of the cool stuff made possible by CSS3, by all means start doing it now. Here's a few you can start using immediately.
Rounded corners

These look particularly nice on form fields, but of course you can also use them on other HTML elements. If the browser doesn't support CSS3 the user will simply see standard squared corners. The chances are you have been using square corners on your divs and form fields anyway so there's no love lost, but now they will look much nicer in supported browsers.

Multiple columns

Once the domain of printed media, multi column content areas can look right at home on a web page as well, and CS3 will let you do it without the need to place each column floating in a div. What happens in an unsupported browser? Thankfully nothing to drastic. The text will just appear as a standard paragraph. But you will just need to bear that in mind when you design the page. FYI, as far as I know this only works in Firefox.

Box shadows

Bye-bye transparent PNG's: It's been nice knowing you. Actually transparent PNG's will always have a use in modern web design, but the CSS3 Box shadow property means they won't be needed to create a drop shadow under a modal box. As with everything else mentioned in this article, graceful degradation occurs and in this case, and the user simply won't see the drop shadow.

Note that the box shadow requires at least 3 values to work but no more than 4.

Text shadow

Once the domain of Photoshop noobs during the last millennium, thanks to CSS3 drop shadows on text are back to haunt every self respecting designer. Seriously though, this one will get abused like you won't believe and once the Management sees it, they will want it on everything. Let's keep it our little secret.

Fonts

While it's still not a typographers dream, CSS3 does provide far greater control over type. The ability to use any font on your site will also open up a huge can of legal worms, so to avoid any legal hassles it might be best to only use fonts that are free. And with fonts you've purchased, you might want to check if the licence extends to you using it on the web in this manner.

Aurora Designs

No comments:

Post a Comment