Screenshot of Making Waves Labs using Safari 4

This blog is not just a place for new content. It is also our test bench for presentation. CSS3 is currently a buzz word around front-end developers, and it provides new possibilities to make the path from design to website much more straight-forward and joyful. Even if it’s still in its early stages, all web browser makers (all except Microsoft) have teamed up to make this a future standard. Opera, Firefox, Safari and Chrome already support a great number of the properties/selectors, and because not everybody will see all features today, CSS3 will degrade gracefully for users with less-than-optimal software.

We have started off here on Making Waves Labs taking advantage of some of CSS3′s visual modules; borders, backgrounds, text effects and font-face. Since most of the CSS3 properties are standards in development, the browser makers support them with browser-specific prefixes. Safari and Chrome use -webkit-, Firefox is using -moz-, while Opera has -o-. I am using -webkit- in my examples below.

Borders

Making rounded corners and/or drop shadows is a tedious job. It is increasing the desirability of your website significantly, but it’s time-consuming to make graphics and onion-nested html markup to make it possible. With CSS3 it’s just a couple of lines of text in the CSS:

-webkit-border-radius: 10px;
-webkit-box-shadow: 0 5px 10px #ccc;

Drop-shadows have no alpha property in CSS3, so if you want to make natural looking shadows, you will have to bring the shadow color closer to your background color.

Read on about border-radius and box-shadow.

Backgrounds

Gradient backgrounds are also time-consuming, and sometimes even impossible using previous technology. With CSS3, you can add linear or radial gradients like this:

Gradient backgrounds are currently only supported by Safari 4 and Chrome, but you can add an additional fall-back color for other browsers:

background: #01a6de; /* fallback */
background: -webkit-gradient(linear, left top, left bottom,
            from(#01a6de), to(#1d7fb0));

Read on about CSS gradients.

Text effects

You can also add drop-shadows to text. By using a color lighter than your background without blur, you can even emboss your text in the page:

text-shadow: 0 1px 0 #fff;

Read on about text-shadow.

Font-face

The @font-face selector makes the browser render custom fonts natively, regardless if the user has them installed to their OS or not. Be careful though. The font files are located on your server as they are, and not all fonts are licensed for this kind of use. Good sources for free fonts for web are webfonts.info and Font Squirrel.

@font-face is currently what I find hardest to use, and for two main reasons. Firstly the number of glyphs in the open available fonts can be very limited, and often you don’t know which letters are included without having to test them yourself. The English alphabet is always there, but if you want to use local letters, you may struggle to find a font that both fits your design and writes well. The second reason is that most of these fonts aren’t optimized for screen presentation and different browsers render the fonts differently. Even if your OS render text with anti-aliasing, custom fonts may come out blocky and ugly.

Read on about @font-face.

This is just scraping the surface of what CSS3 is, and can be. We will continue testing it out and hopefully present the results here. For more updates and information on CSS3, css3.info is a great source.

UPDATE  Oct 22, 2009

Deep Blue Sky has compiled a summary of CSS3/HTML5 support in the current browser market.