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.
Awesome examples! This really makes me wanna start using CSS3.
Still… if the majority of your clients target group don’t use CSS3 compatible browsers, it’s lost effort. :(
Another great post Nick, I’ve also noticed the jittering caused by rotating elements with CSS3, but I kind of like playing with it hah!
I tried to use that principle to make a CSS3 version of one of those plastic birds that keeps bobbing its head to drink water, but the way it’s implemented in different browsers I couldn’t pull it off (I think it was Firefox that implemented something to counteract that glitch, which made it so the bird would stop bobbing unless you constantly move your mouse)
Great examples
I agree with Leon, CSS3 is too good to be true right now.
Specially when clients WILL want IE flawless support or when the target is IE browser users. Both cases happen very very often.
There are a lot of these sort of lists out there right now, but this one is clean cut, to the point, and has the perfect selection of tips. Thanks for this, my new go-to-guide for spicing up clients sites or my own!
G’day Nick, great post! I think the key here is definitely to use CSS3 and other new techniques when there’s a reliable backup that can still retain most of the design values you were hoping to achieve with the new technology. I think the use of shadows on text and other typefaces lately has given such a lift to how websites can look, I’m loving the user experience on some of those sites you’ve listed :)
very nice share,but honestly speaking we have still problems with old browsers,I would like develop css3 applicaitons and effects but I thing its early at that moment.what you suggest my friends?
nice examples NICK….
Keep it up !!!
from now onward I also want to work on CSS3.
thanks for sharing it !!!
even with low cross browser support or target audience = IE I still integrate CSS3.
For a feauture or standard to get adapted you have to use as much as possible. As “web people” we have the change (and duty) to implement it so the rest (IE, non CSS3 browsers) will follow.
I must say I love the new CSS3 options, have tried them & than bumped into an article from Microsoft. Unfortunately IE is not accepting the border radius & therefore we cannot use it for company projects. Most users still use IE so from a UI perspective I cannot defend why we do not have rounded shapes on the web site in the major browser. Hopefully Microsoft IE will give full support to CSS3 any time soon & free us from the ‘nightmare’ with the rounded shapes.
Great Tips…. Its gonna be the future design trend.
Great post, thanks!
The best thing about CSS3 and IE is that IE users will never even know you are using CSS3 in 90% of the cases. As was stated, never use CSS3 to change the primary design, only to enhance it. Excellent do’s and don’ts article
That 404 page from FOWD is the best thing that’s happened to me all day! (So either it’s a truly amazing 404 page or I have an exceptionally miserable life…)
A nice round-up of the techniques. One small criticism though: the links in the article (from the thumbnail images) don’t seem to be going to the correct locations. Most of them go to pages that are nothing like the thumbnail :(
Nice examples though I’m not sure i agree with your conclusions. I do think CSS3 has a big role to play in quickly iterating a design to launch. Almost everything is fixable for lesser browsers with javascript and browser specific stylesheets. To maintain a good mood you just need to outsource the fixing. My recipe for web designer happiness:
Dear client,
We design in the browser because that’s the fastest way to launch and truest way to get your feedback. For this to work you need to install a modern browser (firefox/safari/chrome). When you are happy with the design we will decide which design elements should be ported to which lesser browsers (using javascript and browser specific stylesheets).
- have your client install firefox/safari/chrome
- design in the browser
- decide with your client which of the design elements have to be fixed for the lesser browser
- outsource the fixing
Excellent post, this is a great round up of all the great new things people can use with CSS3.
I have been using alot of these already, as you say ‘to enhance’ a website.
But im really going to start looking into the animation on web-kit sites.
@Dylan Parry – Thanks for pointing it out. I’ve fixed all links.
nice amazing… article about css3 usage.. thanks
Thanks, an inspiring article!
The embossed looking text captured with a supported browser allows the design to look more clean and precise, while adding depth to the layout, as does the subtle round corners, fading transition, and subtle text shadows.
If and when Microsoft IE goes CSS3 compatible, this will be a brilliant move in the design enhancement world. I agree with the author about the fact that CSS3 should only be used as an enhancement, since it isn’t compatible with all browsers at the moment. The inconvenience with unsupported browsers is a nuisance, having to ensure your fonts are web-ready fonts viewable with all browsers.