The CSS3 trend is getting more and more popular. In fact CSS3 new features open a lot of new possibilities. Check out my previous post on "CSS3 Animation Demos" to see the things that you can do with it. However, don't get too excited so soon because it is not fully supported by all browsers yet. But this doesn't mean you shouldn't use it at all. So, when should you use CSS3 new features? Well, continue on this post to see some excellent examples.

CSS3 As Enhancement

Emboss-Looking Text

Notice how Analog use a 1 pixel text shadow to make the text look embossed? The image in the green circle is captured with a text-shadow supported browser and the image in the red circle is captured with a unsupported browser.

screencap

Subtle Rounded Corners and Shadow

Colly uses border-radius and box-shadow to beautify the layout boxes with rounded corners and subtle shadow. If CSS3 is not supported, it will show rectangle boxes which you can barely notice the difference.

screencap

Rolling DVDs

This site uses the webkit-transform property to make the DVD roll out on mouseover. Users with a webkit browser such as Safari or Chrome will see the spinning animation. Users with Firefox will see the disc pop out. Users with browser that doesn't support this feature will see the static DVD image.

screencap

Fading Transition

To see this effect: scroll down until the top search bar overlap the content, hover over the top bar, and you will see the semi-transparent background slowly fade into opaque (see it with a webkit browser).

screencap

Rounded Corners

Users with a border-radius supported browser will see rounded corners on the Future of Web Design site.

screencap

Subtle Text Shadow

SquareSpace enhances their blog title by appling a light shadow which you can barely notice.

screencap

When Should You Use CSS3?

No: Rotating Images With CSS3

Be careful if you are applying border on rotated images. The border may cause jittering result.

screencap

Yes: Export Rotated Image Instead

To avoid the jittering effect, use Photoshop to rotate the image first and then apply the CSS transformation as seen on the Chirp site.

screencap

Yes: Rotating One Large Image

The rotating earth image is a very nice touch on the 404 page of FOWD (see it with a webkit browser).

screencap

No: Rotating Multiple Large Images

However, don't go crazy with rotating multiple large images because it might look choppy.

screencap

No: Relying on CSS3

Everything looks fine if you are viewing Ryan Merrill's site with a webkit browser. But check it again with a different browser such as Flock. Wow, what happened? Everything breaks down. The font is not displaying right and the call to action box disappeared. So, be very careful if you are relying on HTML5 and CSS3 to do your layout.

screencap

Yes: Find Fonts With Similar Width as Alternatives

If you are using custom fonts, don't forget to include web-safe fonts with similar width as alternatives. Bobulate is a good example. She uses Georgia as her alternative font which has similar width and x-height of the custom font Skolar.

screencap

Conclusion

  • Don't rely on CSS3 to do your layout. They should only be used as enhancement.
  • Ensure your layout doesn't look extremely different when CSS3 features are not supported.
  • When using @font-face feature, always include web-safe fonts with similar width, kerning, and x-height for backup.