Bedrich Rios

If you are a web designer, you love CSS. And why shouldn’t you, it revolutionized the way web design was done. It made designers lives so much easier and it pave the way for absolutely stunning websites. Now, CSS3 attempts to bring the famous Cascading Style Sheets a step closer to perfection with some new “jaw-dropping” features. Let’s take a look at three of the features that will change the way you go about designing websites.

Web Fonts

Type can (rather, should) be the most important aspect of any web designers work. However, this is one of the aspects that a designer has the least control over, as of now. In fact, there are only a handful of font families available acrross Mac and Windows alike. Web Fonts hopes to give the designer a better control over their font selections and what the user can see. In other words, rather than defining font rules in the flowwing manner:

body
{
font-size: 1.2em;
font-family: “Lucida Grande”, Verdana, sans-serif;
}

CSS3 will allow web designer to specified almost any font family and it’s respective retrieval URL so that the user’s browser can access such address and display the page with the font family the designer intended her audience to see:

@font-face
{
font-family: “Olho de Boi”;
src: url(http://img.dafont.com/download/?file=olho_de_boi) format(”truetype”);
}

Columns

The addition of this feature may be a little less obvious than the previous one but a very powerful one nonetheless. Currently, there is no easy way to break an area of text into multiple sections. But, why would you want to do this? Simple, readability. That’s the reason why magazines, newspapers, and other print publications do it. With the addition of Columns in CSS3, breaking an area of text will be a walk in the park.For a more in-depth look at column, visit this page.

Opacity

Last but not least, opacity. This is a feature that many designer have been waiting for and will simply love. How many times have you faked a transparency with a jpg because IE6 cannot handle png properly? How would you like to add transparency to your design without having to open photoshop? Thanks to opacity, these and all other transparency effects will be a piece of cake.Here is a snippet of code, to show you what it will look like:

div#opacity_test
{
bacground-color: rgb(0, 0, 0);
opacity: .5; /* more or less equivalent to 50% transparency */
}

Closing Remarks

CSS3 will no doubt make designers’ lives much more easy when it come to the implementation of their designs. Nevertheless, with such a large array of features being added to this new release of the beloved CSS, designers must not stop pushing the limits of creativity. In fact, all these new features should encourage the creation of design concepts (websites), which no one has seeing yet.If you wish to learn more about CSS3, here are a few external links:

1. W3 Consortium
2. CSS3 Info

I posted this article on Friday, February 8th, 2008. Is filed under CSS, General News, Web Design. If you liked what you read, please digg it by using the button on the left. Also, you can subscribe to my RSS feed and read more articles like this one.