Alongside HTML5 is the style genius which is CSS 3. CSS controls the style of our websites. Metaphorically speaking CSS is the clothes on your body. Well if CSS2 brought us a fairly rustic wardrobe of habit, slacks and sandals then CSS 3 is fresh off the catwalk sporting skinny jeans, cheque shirts and 3D glasses!

Here are a list of the most impressive features which will heavily influence our future web designs. Not many of the features are currently available on all browsers but over the next few years support for CSS 3 will be common place in all the major browsers and CSS 3 will be very much “mainstream”. So it important that we get familiar with the capabilities of CSS 3 now in order to gradually implement it into our web designs. As well as saving time these new features will also make our designs far more flexible and easier to change.

Borders

• Border Radius
  No more need to spend hours in photshop on rounded boxes. Border Radius applies rounded corners to elements, whereby you can specify the corner radius.
• Border image
  Another exciting new border feature of CSS 3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element.

Box Shadow
Another feature which will no doubt be badly used is the drop shadow. Drop shadows often work best when used subtly. Another example of how CSS3 is very much a design technology.

Backgrounds

• Multiple Backgrounds
  This feature will allow us to produce some really interesting layouts and also allow us to create layers from which we can edit a composition. Using transparent png’s I can already envisage creating some stunning backgrounds with this technique!

Colours

• HSL Colours
  Hue, Saturation and Lightness will allow us to have more control over our colour pallette and again take over from a job previously done in Photoshop.
• Opacity
  This will allow us to control the opacity of the actual colours. This has great potential for things like rollovers on navigation where previously we’d need to create two separate images. I predict this will be one of the most popular features of CSS3.

Text effects

• Word-wrap
  The word-wrap property was thought of by Microsoft and then put into CSS 3. It allows long words like email addresses to be broken and wrap onto the next line. It takes in two values; normal or break-word. This may seem like a small feature but will prove useful nonetheless.
• Web fonts with @font-face
  Having always been limited to the usual suspects of Arial, Georgia, Trebuchet, Verdana etc. we can finally choose whatever font face takes our fancy with the @font-face declaration. I still think we need to be careful with this technique though as many fonts weren’t designed specifically for the web so the jury is still out on this one.

To try this technique put the following code in your CSS:

@font-face {
font-family: Delicious;
src: url(‘Delicious-Roman.otf’);
}

@font-face {
font-family: Delicious;
font-weight: bold;
src: url(‘Delicious-Bold.otf’);
}
Then call it in using the font family:

h3 { font-family: Delicious, sans-serif; }

The Final Word
So CSS3 is here right now, don’t want for the future… it has already landed…

 |    |