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.
–
From the NoD Sponsor:
Sessions Online Schools of Art and Design is an accredited online graphic and web design school offering:
- Web design classes and web design Certificate Programs taught by renowned design instructors.
Really looking forward to CSS3. Konqueror and Opera are the first browsers to pass the selector test according to css3.info. Konqueror on my Linux box did pass the tests but Opera on XP (says I have the latest version) failed on numerous tests as did Firefox.
I am sure these browser types will have no problem with compliance but wonder about IE.
We are also really looking forward to CSS3! IE is always a pain especially when we design for business clients.
CSS3 brings web development to a whole new level with opacity. The whole hassle of creating a image to be overlayed on another brings to mind the Photoshop school for the gifted.
I love the idea of layered backgrounds and the print like layout. Thank you for sharing what you learned at the conference. I was planning on learning programming with silverlight, but these ideas extend the web with CSS which is so much more simple.
Was there any videos from that conference? I would like to watch a little bit of that if there is.. I have been keeping an eye on CSS3 for a while, but I guess it’s about time I get a little more involved.
Thanks for sharing. Hopefully CSS3 will have better cross browser compatibility than CSS2.
This is really nice step for moving ahead with CSS3 which will definitely improve and remove cross platform hindrances. This will also improve the designing structures for sure.
Thanks for sharing the information.
Hi,
Excellent blog – I really appreciate your blog about CSS3: The Future of Web Design, Indeed, I have bookmarked it for later viewing and forwarded it on.
Cheers.
I have just started working with CSS3 and I have to say it is a big improvement on CSS2. It makes web design so much easier, especially with cross-browser compatabilities and opacity.
Thanks for sharing!
CSS3 and HTML5 are truly Flash and Silverlight killers.
Given that the technology is in its infancy, I give it two years before Flash is a thing of the past!
found this cool post that teaches you how to embed WOW head tool tip into your post. For example, if you hover your mouse over