I recently attended the Future of Web Design conference in New York, which featured speakers from many disciplines within the web design field. The most futuristic seminar by far was Jina Bolton’s about CSS3.

CSS2 (or 2.1 to be exact) is the version of CSS supported by current browsers, and it’s used by most of today’s designers. Despite some browser inconsistencies with CSS2 rendering, today’s designers benefit from it’s rich positioning features, along with the many design and formatting properties which were introduced in CSS1.

According to Jina, CSS3 will go much further with positioning, letting web designers work in a more flexible, print-like design environment. CSS3 is still in the development phase, so you can’t start testing new features in your favorite browsers just yet. However, css3.info has excellent previews of the new features.

Opacity, like many other new CSS3 features give the designer tons more control. That increased power will have to be used wisely, for it could lead to chaos. Regardless, it’s what most designers have been clamoring for and should be a huge leap forward for web design overall.

css3.info has some of the best previews of CSS3 features and easy to use code samples.

Here are a few of my favorite features, which will be explored in depth in future posts:

1) Multi-column layout. When I said print-like, I meant it. CSS3 includes a special module that allows you to place content in columns, just like a magazine or newspaper. You define the properties of the columns, including the gaps, rules, and dividers.

This example from css3.info shows a three-column layout with thick gaps and a thin black rule.

Don’t like the number of columns or any other property? Change it and your content will be rearranged in accordance with your new settings.

2) Layered backgrounds. I was really impressed when Jina presented this new feature. With CSS3, you can apply multiple background images to any element, for example a whole page or a small content area. This can save you a ton of time when you’re making design changes, and it reduces load times, too.

This page could be hefty when designed the “old” way.]

Imagine the above is a real web page. The gradient, flower and leaf are all in the background. According to the rules of “old” (well, current) web design, you’d have to make this one huge image spanning your entire web page, or you’d have to use a handful of positioning features to make it work. In CSS3, each of these pieces can be treated as a separate image. All can placed in the background with different positioning and repeat settings using a simple piece of code. This feature also makes it easy to create round-cornered boxes.

3) Opacity. Opacity. Seriously. Right now, all of your page elements are completely opaque; they can not be made transparent, so you can’t ever see anything under them. However, in CSS3, you can reduce the opacity of your elements, offering tons of design possibilities.

If you’d like to learn more about CSS3’s features before they to “live,” check out css3.info and the good old W3. It’ll be some time before CSS3 is complete and all common browsers render it properly, but if you start learning the features and code now, you’ll be way ahead of the pack professionally.

This entry was posted on Tuesday, November 27th, 2007 at 3:06 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.