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.
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.
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.
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).
Rounded Corners
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
However, don't go crazy with rotating multiple large images because it might look choppy.
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.
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.
Nice examples. Thanks for the article. I like it. The use of CSS3 carefully :).
Very nice. I haven’t bothered with a lot of what CSS3 has to offer.
I have started to incorporate subtle css3 goodies into my designs like text-shadow, box-shadow, and rounded corners.
Sometimes I feel that people with good browsers should be rewarded and those with crappy browsers ( you know which one ) should be punished by being served usable but bland designs.
I love playing with CSS3 myself, both for Gecko and Webkit. Nice collection you’re showcasing here.
When using CSS3, progressive enhancement and graceful degradation should be the order of the day.
If only we were talking real css3, not that vendor-specific crap that litters our css files. We can get the things done, but it would be nice if we’d consider at what price.
Very cool. I can’t wait to slip some of these subtleties in the projects I work on.
The addition of simple graphic features such as rounded corners, a shadow, rotation and other graphics tools is a nice leap forward. I feel we’re almost at the 1990 version of pagemaker for the web. Keep up the good work CSS guys. I’d like a good transparency filter when you’re ready.
I agree! I’m actually working on a client site now, where their target audience is Safari and Firefox users. I’m getting to use text-shadow and border-radius a lot, but even if you log on using IE, you’ll still see a great looking site. CSS3 has cut down on a lot of coding time for me, and makes the pages load a lot faster, since we don’t have to use images for everything.
I can’t really see when a rounded border can be essential. I only use border-radius for rounded borders nowadays… xD
Great examples! Love the rounded corners.
Very nice and useful tutorials for web designers,
Thanks for posting.
LOVE CSS 3!! The subtlety of the rounded corners, the sliding transitions without js, text shadows…can’t wait to start using it! Great examples as usual…thanks! :D
Very nice sites. It is good to see that more and more web designers are using CSS3. Many of the effects are very subtle, but when used effectively it can make a big difference in the look and feel of a website.
amazing .. ready to start using CSS3 :) thx.
So looking forward to reading more about css3 and html5.
Incredible, sweet and sublime.
The best thing on css3 is that you don’t need to import ou include N javascript files on your work, it’s very clean and fast, so, singular beautful
Examples are very good!
Website value calculator and web information
Get the complete website information on websiteoutlook.com including website worth,daily income,pr,backlink,traffic detail,directory listing.
http://www.websitereckon.com
Thanks
Thanks for the nice practical notes to share with me. I love that all. That will increase my Web Designing, Site Design techniques.