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.
Leon
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. :(
Jon Raasch
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)
Marco Barbosa
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.
Doug Montgomery (Douglife)
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!
Tyce
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 :)
Sibersonik web tasarim
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?
nikhil
nice examples NICK….
Keep it up !!!
from now onward I also want to work on CSS3.
thanks for sharing it !!!
Greg
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.
MJ
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.
App Sheriff
Great Tips…. Its gonna be the future design trend.
Pablo Echeverri - Graphic Design
Great post, thanks!
Shiva
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
Kate Madigan
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…)
Dylan Parry
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 :(
Thomas Maas
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
Alan
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.
Nick La
@Dylan Parry – Thanks for pointing it out. I’ve fixed all links.
vinay
nice amazing… article about css3 usage.. thanks
Scarfoo
Thanks, an inspiring article!
kgordon
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.
Carl114
Nice examples. Thanks for the article. I like it. The use of CSS3 carefully :).
Calvin Tennant
Very nice. I haven’t bothered with a lot of what CSS3 has to offer.
RavenMatt
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.
Stijn
I love playing with CSS3 myself, both for Gecko and Webkit. Nice collection you’re showcasing here.
Codesquid
When using CSS3, progressive enhancement and graceful degradation should be the order of the day.
Niels Matthijs
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.
Paul
Very cool. I can’t wait to slip some of these subtleties in the projects I work on.
Kenn Boostrom
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.
Amber Weinberg
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.
Cristina Sturm
I can’t really see when a rounded border can be essential. I only use border-radius for rounded borders nowadays… xD
John Sullivan
Great examples! Love the rounded corners.
Indialike
Very nice and useful tutorials for web designers,
Thanks for posting.
Baggio
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
Simon Carr
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.
arithok
amazing .. ready to start using CSS3 :) thx.
Jordan Walker
So looking forward to reading more about css3 and html5.
Octo Fraguto
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
Bhausaheb Zaware
Examples are very good!
gruvy
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
website design
Thanks for the nice practical notes to share with me. I love that all. That will increase my Web Designing, Site Design techniques.
Daniel Long
I think that CSS3 is going to have a massive impact on web design. The effects that can be achieved are huge. I like the idea of creating drop shadows for text, along with rounded corners. The sooner it is supported by all browsers the better!
jamesb
Nice post. Nice and simple. Going into my css3 bookmarks along with some of your other posts
Jonathan Butterworth
I am really liking CSS3. Adding this to my bookmarks. I really like the site examples you used as well.
vibhor chandel
CSS3 is our future !
Ale
Thank you for sharing this collection with us ^_^
capsiplex
The effects that can be achieved are huge.
Smart Web Design
CSS3 looks wicked need to start looking into it more! Great post :)
web design
Nice post, Just love it.
Thanks !
Link9401
All the brilliant fortresses at ROBLOX are amusing in the amazing world ROBLOX
krike
Thank you for those awesome tips. will keep these in mind when I develop my websites.
Ravi Panchumarthy
‘Rotating One Large Image’ Tip..the style of displaying 404 error is simply awesome !
Sealth
Great tips. Very inspiring. Thanks.
chicago web design
Awesome post. With css3 being one of the biggest advances right now, we can benefit hugely from someone taking the time to explain it like you have done. Thanks a bunch!
Web Design
great post …thnak you
Website Design
Really like the example of Rolling DVDs… lots of ideas coming out of that one to use on my curren project.
Pori
I’ve to thank you for all your shared ideas, just great!
Nox
Nice article
“However, don’t go crazy with rotating multiple large images because it might look choppy.”
I hope browsers’ performance will get better because come on… rotating images (etc.) being a tricky thing?
wantfee
Those are cool effect! especially the DVD rolling effect! Can U write a tutorial teach us how to make it?
chai
in what firefox version the css3 support?
Dinesh
Cool stuff… only hope CSS3 becomes universally supported across browsers…
Thanks a lot!!!
Suede
About the 3rd sample, is -webkit-transform considered as a CSS3 selector? I don’t think it is, is it?
kai
great post … thanks…
Web Dizajn Sarajevo
Thank you from Sarajevo!
Neil Murphy
Really excellent post, very interesting.
Linkmesh
This is great!
Hali Yikama
Share admin thanks a lot for sharing a very successful and wonderful.
silence
great article. thanks for sharing.
Paulo
Very interesting!
Web tasarım izmir
fantastic examples thanks for sharing
Dimat66
Realy cool Stuff.
Thanks for it.
Melvins
CSS3 has changed the scenario of web designing. It helps to acieve multi column layout and multiple background images. The example shown here are really great.
Los Angeles Web Design
graham
It’s nice to see more subtle uses of CSS3 being added to projects – it doesn’t always have to be large scale effects or animations. A little box-shadow or a slight rounded corner does a lot more (without hindering users who can’t see it) than full blown transformations.
Premier pixels
Great!
Thanks for sharing with us.
Cheyenne Cancel
Ce qui sont votre des conditions pour se syndiquer votre entrées ? I serions très intéressé dedans traduction de uns de votre articles dans Finlandais pour notre emplacements abonnés, et voudrait savoir ce qui votre position sur ceci seraient. Nous naturellement soyez sûr de s’ajouter accréditation appropriée.
Juno Mindoes
The christmas time is comeing, white iphone 4 conversion kit will be the best present for yourself and family.
lucy
The Beats by Dr. Dre have a chunky, padded, shiny black headband that slopes down and expands almost seamlessly into circular earcup supports. The large, white iPhone 4 oblong earcups are extremely comfortable and can swivel gently, back and forth and from side to side. Thin accents of silver and red wrap round each earpiece?aa subtle, handsome touch.
Rolex Deep Sea
The Power of Information Review launches excellent topic!!
Interesting blog but I want to read more about it.
Henry Peise
Come and make a change for your lovely iphone 4 white!
Ben
I was reading something else about this on another blog. Interesting.
Doctor rating
i THINK THE STUFF IS REALLY GOOD .
altın çilek
I always follow your site thank you
hcg damla
Great!
Thanks for sharing with us.
TicoStyle
Excellente CSS Designs: visit http://www.TicoStyle.com we are a web design company locate in San Jose Costa Rica. We offer proffesional web design, web hosting services and more…
Web Design and Hosting in Costa Rica
http://www.TicoStyle.com
TicoStyle
Visit us: http://www.ticostyle.com
Web Design & Hosting in Costa Rica
websuitor technology
very useful thanks for sharing
cindy
can you please teach how to organize my background wall design..?
Bryan
It’s amazing to see what everyone is doing, I love sites like this!
web designing site
I think you CSS information should be posted on Scribd. Its very clean…On css3 is that you don’t need to import out include N javascript files on your work.
Singapore Office
Splendid work. Thank you so much for this post. Interesting content.
Office in Singapore
This is not a nice article. It’s a great article!!! This will really be highly beneficial . Thank you for creating this!
Mark Hamilton
Its good to see one more quality information shared on Web Designer Wall. I would share it with our team of Web Designer in London & yes nice compilation and thanks for that hard work.
Emr and Hipaa
WOw so this means its the best one?
dexx
Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.
za
za
martin
[…] CSS3 Examples and Best Practices […]
girl a micromedia
These example sites give me a serious inferiority complex.
complex41
And then he handed you the thirty-five 45
Anirudh
helpful examples…inspired me a lot
Moliva
These example sites give me a serious inferiority complex.
immobilier
Hello tout le monde quel est votre point de vue de mon nouveau blog sur l’immobilier?
ilustratrice
Good lessons you provide. The best is still to mark every browsers: webkit, moz etc
carlo c
Realizing the cross platform compatibility, web developer today still needs some images and flash or other web apps to do the job. HTML5 and CSS3 will only have FREEDOM if we sill dump old computers.
website design in delhi ncr
hello dear this stuff is very usefull for me
Thanks
smgf45
tj
u
dfssd
web technologies
Good post !! Very useful to my projects … Thanks
Sage
Great tip about rotating the images in PS first. Looking forward to the day when CSS3 will be common standard =P
Ali
Very nice samples. Thanks for samples
μαθηματα joomla
Very nice! thanks for sharing!
DymoLabels
hi sir
i really like your blog
this stuff is very usefull for me
keep it up
thanks for sharing