Cascading Style Sheets (CSS) is a style sheet language used to describe the look and formatting of website. The earliest drafts for CSS3, the newest version of CSS, were published in June 1999 but even today most browsers only partially support CSS3. Because not all browsers support CSS3 yet, developers still have to do some work-arounds to make sites look the same in all browsers, but there are some pretty neat things in the newest implementation of CSS that will really give developers more artistic freedom, as well as increase load time and improve user experience. Here are just a few new style rules implemented in CSS3.

Multiple Background Images

Oh, how many times have I wished I could apply multiple backgrounds to one element, rather than putting a div inside another div just to layer backgrounds!  Multiple backgrounds can be created using the normal background-image style and comma-separating background images:

background-image: url(image1.jpg), url(image2.jpg);

Image1.jpg will be the top background image, image2.jpg will be the bottom background image. Those backgrounds can then be positioned using background-position and comma separating their positions:

background-position: left top, right bottom;

Rounded Corners

In the old days, any elements designed to have rounded corners had to have a background image with rounded corners to make it look right.  This was a real pain with tabbed navigation.  You’d have to put one background behind the anchor and one background behind the list item, or just make each tab its own image, which wasn’t a very dynamic option. In CSS3, there is a new style element called border-radius.  Just specify the radius of the 4 corners of your box and watch the magic happen:

border-radius: 10px 5px 8px 15px;

The numbers correspond to (in order) top-left, top-right, bottom-right, bottom-left.

Drop Shadows

A step in the right direction, but not completely where I’d like it to be, the new box-shadow style allows block-level elements to create a drop shadow. Where this falls short is if you have, say a PNG image and put a box-shadow style on it. Rather than putting a shadow of the image below the image, as a normal drop shadow does, it will put a drop shadow around the box the image is in. Hopefully, in the future this will be addressed.  To use box-shadow, specify the distance on the x-axis, then the y-axis, then the amount of blur, then the shadow color:

box-shadow: 10px 5px 8px #333;

Text Shadows

Self explanatory: generates a drop-shadow behind text.  Text shadows are created using the text-shadow style and specifying the distance on the x-axis, then the y-axis, then the amount of blur, then the shadow color:

text-shadow: 10px 5px 8px #333;

Opacity

This new style rule in CSS3 can make an element’s opacity anywhere from completely visible to completely invisible.  This can make for some interesting Web 2.0 looks. To use the opacity rule, simple define the percentage of visibility you want the item to have in a decimal point (i.e. .5 is 50%):

opacity:  .35;

What I would like to see now is a background-opacity rule rather than using RGBA values.

What About You?

These are only some of the new rules implemented in CSS3, there are plenty of other new style rules in the web developers toolbelt. Now, we just need the browsers to support all of the rules… Check out http://www.css3.info/ for more CSS3 news and info.

But what do you think about CSS3? Have you ever used it or thought about using the new style rules? Do you agree about these rules or think they should work differently? Are you curious to know more? Let us know in the comments!