In steps CSS3 …

The newest family member to the style sheet family is CSS3. With the possibility of new and exciting things when it comes to designing and how you design, things look hopeful on the horizon. Word on the street is that with CSS3, you can create more diverse styles sheets for large variety of occasions and much much more.  All of this information can be found at css3.info more in depth and detail.

If you don’t want to wade through all the details, here’s a summary for Web developers and Web users broken down into website parts:

Borders

• border-color: in Firefox there is now an option for a fading gray border, a very common effect that is now achieved in somewhat kludgy ways.
• border-image: this feature can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image.
• border-radius: a new feature in CSS3, which allows you to create round corners on box-items (very sexy stuff … if you’re using Firefox or Safari, check out how that works here, a page that helps you roll your own “themes” on the site of our favorite Javascript library, jQuery).
• box-shadow: another new feature in CSS3, gives you the option of setting up a shadow on a box-item and varying the options … once again, a very common activity that is currently done in unsettlingly dirty ways.

Backgrounds

• background-origin/background-clip: this property is going to be used to calculate background-position of a background in a certain box. A feature in this property is used to determine whether the backgrounds extends into the border or not.
• background-size: You can specify this size in pixels, width and height, or in percentages of a background.
• multiple backgrounds: this snazzy new feature allows the implementation of multiple backgrounds on one element.

Color

• HSL (Hue, Saturation, Lightness): using hexadecimal colors as well as HSL colors are going to be implemented in CSS3.
• HSLA (Hue, Saturation, Lightness, Alpha): similar to the HSL feature it allows a fourth value, which sets the Opacity (via the Alpha channel).
• Opacity: this feature can used by implementing HSLA & RGBA colors.
• RGBA: similar to the HSLA feature where there is now an alpha channel option to create opacity.

Text Elements

• text-shadow: eliminates the need for Photoshop when all you want to do is a simple shadow.
• text-overflow: for this particular feature sometimes when text will have to be clipped you can place a  “…”  to show there’s more text.
• word-wrap: this feature allows the extremely large words or sentences to wrap much cleaner and more efficiently than in previous versions.  For example if the text is in a box you can constrain it to said box.

User-interface

• box-sizing: you can force the browser to instead render the box with the specified width and height.
• re-size: yet another new feature of CSS3 that allows you to deem a box re sizable.
• outline-offset: this new element allows the offset to be rendered away from the edge of the specified element.

Selectors

• attribute selectors:[att^=val],[att$=val] and [att*=val] are the three new attribute options added to the mix in CSS3 to matching substrings in the value of an attribute.

Other Modules

• media queries: this new feature makes it possible to change style sheets based on for instance the width and height of the viewport (such as firefox, iphone, etc.).
• multi-column layout: this feature allows text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns.
• web-fonts: by using @font-face website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages.
• css speech: this feature is used for creating style in speech synthesis in aural user agents (e.g. screen readers). There were several additional properties added to this new media type.

In short, it looks as though there are a lot of exciting things on the horizon for Web designers and Web surfers alike.  However, you may not want to go right out and create your first rounded-corner, drop-shadow enabled Web page quite yet, as it’ll be a while before browser software writers agree on, let alone implement, these new ideas (here’s a slightly dated, but pretty darn good compatibility table, in case you’re interested in the details).

But, Rome wasn’t built in a day … and in fact CSS3 will take way less time to adopt than it took to build Rome, so keep your eyes peeled.