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
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.
Subtle Rounded Corners and Shadow
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.
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.
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).
Users with a
border-radius supported browser will see rounded corners on the Future of Web Design site.
Subtle Text Shadow
SquareSpace enhances their blog title by appling a light shadow which you can barely notice.
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.
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.
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).
No: Rotating Multiple Large Images
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.
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.
- 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.