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.

110 Comments

Leon
Feb 10, 2010 at 8:11 am

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
Feb 10, 2010 at 8:15 am

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
Feb 10, 2010 at 8:16 am

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)
Feb 10, 2010 at 8:17 am

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
Feb 10, 2010 at 8:19 am

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
Feb 10, 2010 at 8:31 am

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
Feb 10, 2010 at 8:40 am

nice examples NICK….
Keep it up !!!
from now onward I also want to work on CSS3.

thanks for sharing it !!!

Greg
Feb 10, 2010 at 8:40 am

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
Feb 10, 2010 at 8:46 am

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
Feb 10, 2010 at 8:47 am

Great Tips…. Its gonna be the future design trend.

Pablo Echeverri - Graphic Design
Feb 10, 2010 at 8:51 am

Great post, thanks!

Shiva
Feb 10, 2010 at 9:04 am

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
Feb 10, 2010 at 9:11 am

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
Feb 10, 2010 at 9:13 am

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
Feb 10, 2010 at 9:21 am

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
Feb 10, 2010 at 9:21 am

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
Feb 10, 2010 at 9:24 am

@Dylan Parry – Thanks for pointing it out. I’ve fixed all links.

vinay
Feb 10, 2010 at 9:26 am

nice amazing… article about css3 usage.. thanks

Scarfoo
Feb 10, 2010 at 10:21 am

Thanks, an inspiring article!

kgordon
Feb 10, 2010 at 11:13 am

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
Feb 10, 2010 at 11:20 am

Nice examples. Thanks for the article. I like it. The use of CSS3 carefully :).

Calvin Tennant
Feb 10, 2010 at 11:37 am

Very nice. I haven’t bothered with a lot of what CSS3 has to offer.

RavenMatt
Feb 10, 2010 at 12:07 pm

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
Feb 10, 2010 at 2:00 pm

I love playing with CSS3 myself, both for Gecko and Webkit. Nice collection you’re showcasing here.

Codesquid
Feb 10, 2010 at 2:24 pm

When using CSS3, progressive enhancement and graceful degradation should be the order of the day.

Niels Matthijs
Feb 10, 2010 at 2:48 pm

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
Feb 10, 2010 at 2:55 pm

Very cool. I can’t wait to slip some of these subtleties in the projects I work on.

Kenn Boostrom
Feb 10, 2010 at 3:07 pm

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
Feb 10, 2010 at 4:36 pm

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
Feb 10, 2010 at 6:04 pm

I can’t really see when a rounded border can be essential. I only use border-radius for rounded borders nowadays… xD

John Sullivan
Feb 10, 2010 at 8:05 pm

Great examples! Love the rounded corners.

Indialike
Feb 11, 2010 at 12:18 am

Very nice and useful tutorials for web designers,
Thanks for posting.

Baggio
Feb 11, 2010 at 12:58 am

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
Feb 11, 2010 at 1:56 am

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
Feb 11, 2010 at 8:48 am

amazing .. ready to start using CSS3 :) thx.

Jordan Walker
Feb 11, 2010 at 10:29 am

So looking forward to reading more about css3 and html5.

Octo Fraguto
Feb 11, 2010 at 12:08 pm

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
Feb 12, 2010 at 5:33 am

Examples are very good!

gruvy
Feb 12, 2010 at 4:03 pm

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
Feb 15, 2010 at 2:00 am

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
Feb 15, 2010 at 4:25 am

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
Feb 17, 2010 at 12:20 am

Nice post. Nice and simple. Going into my css3 bookmarks along with some of your other posts

Jonathan Butterworth
Feb 18, 2010 at 1:09 pm

I am really liking CSS3. Adding this to my bookmarks. I really like the site examples you used as well.

vibhor chandel
Feb 19, 2010 at 2:10 pm

CSS3 is our future !

Ale
Feb 21, 2010 at 9:17 am

Thank you for sharing this collection with us ^_^

capsiplex
Feb 23, 2010 at 5:29 pm

The effects that can be achieved are huge.

Smart Web Design
Mar 4, 2010 at 4:25 am

CSS3 looks wicked need to start looking into it more! Great post :)

web design
Mar 5, 2010 at 10:27 am

Nice post, Just love it.

Thanks !

Link9401
Mar 13, 2010 at 9:23 pm

All the brilliant fortresses at ROBLOX are amusing in the amazing world ROBLOX

krike
Mar 19, 2010 at 3:31 am

Thank you for those awesome tips. will keep these in mind when I develop my websites.

Ravi Panchumarthy
Mar 26, 2010 at 2:39 pm

‘Rotating One Large Image’ Tip..the style of displaying 404 error is simply awesome !

Sealth
Apr 7, 2010 at 9:52 am

Great tips. Very inspiring. Thanks.

chicago web design
Apr 15, 2010 at 10:19 am

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
Apr 28, 2010 at 9:31 pm

great post …thnak you

Website Design
May 6, 2010 at 7:25 am

Really like the example of Rolling DVDs… lots of ideas coming out of that one to use on my curren project.

Pori
May 18, 2010 at 12:17 pm

I’ve to thank you for all your shared ideas, just great!

Nox
Jun 10, 2010 at 10:42 am

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
Jun 10, 2010 at 9:36 pm

Those are cool effect! especially the DVD rolling effect! Can U write a tutorial teach us how to make it?

chai
Jun 15, 2010 at 4:04 am

in what firefox version the css3 support?

Dinesh
Jun 17, 2010 at 11:06 pm

Cool stuff… only hope CSS3 becomes universally supported across browsers…

Thanks a lot!!!

Suede
Jul 4, 2010 at 3:47 am

About the 3rd sample, is -webkit-transform considered as a CSS3 selector? I don’t think it is, is it?

kai
Jul 19, 2010 at 8:29 pm

great post … thanks…

Web Dizajn Sarajevo
Jul 21, 2010 at 8:11 pm

Thank you from Sarajevo!

Neil Murphy
Jul 22, 2010 at 4:54 am

Really excellent post, very interesting.

Linkmesh
Aug 9, 2010 at 3:51 pm

This is great!

Hali Yikama
Aug 21, 2010 at 7:09 am

Share admin thanks a lot for sharing a very successful and wonderful.

silence
Aug 31, 2010 at 4:14 am

great article. thanks for sharing.

Paulo
Sep 6, 2010 at 4:51 am

Very interesting!

Web tasarım izmir
Sep 7, 2010 at 3:57 am

fantastic examples thanks for sharing

Dimat66
Sep 29, 2010 at 12:43 am

Realy cool Stuff.
Thanks for it.

Melvins
Oct 2, 2010 at 1:46 am

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
Nov 1, 2010 at 10:29 am

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
Nov 3, 2010 at 3:40 am

Great!
Thanks for sharing with us.

Cheyenne Cancel
Dec 22, 2010 at 12:50 pm

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
Dec 23, 2010 at 10:06 pm

The christmas time is comeing, white iphone 4 conversion kit will be the best present for yourself and family.

lucy
Dec 24, 2010 at 3:02 am

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
Dec 24, 2010 at 7:05 am

The Power of Information Review launches excellent topic!!
Interesting blog but I want to read more about it.

Henry Peise
Dec 24, 2010 at 9:43 pm

Come and make a change for your lovely iphone 4 white!

Ben
Jan 12, 2011 at 2:48 am

I was reading something else about this on another blog. Interesting.

Doctor rating
Jan 17, 2011 at 7:23 am

i THINK THE STUFF IS REALLY GOOD .

altın çilek
Feb 2, 2011 at 5:59 am

I always follow your site thank you

hcg damla
Feb 2, 2011 at 1:31 pm

Great!
Thanks for sharing with us.

TicoStyle
Feb 11, 2011 at 8:10 pm

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
Feb 17, 2011 at 11:56 am

Visit us: http://www.ticostyle.com
Web Design & Hosting in Costa Rica

websuitor technology
Feb 23, 2011 at 4:06 am

very useful thanks for sharing

cindy
Mar 4, 2011 at 9:28 pm

can you please teach how to organize my background wall design..?

Bryan
Mar 8, 2011 at 4:10 pm

It’s amazing to see what everyone is doing, I love sites like this!

web designing site
Mar 13, 2011 at 3:22 pm

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
Mar 17, 2011 at 2:22 am

Splendid work. Thank you so much for this post. Interesting content.

Office in Singapore
Mar 17, 2011 at 2:22 am

This is not a nice article. It’s a great article!!! This will really be highly beneficial . Thank you for creating this!

Mark Hamilton
Mar 21, 2011 at 6:23 am

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
Apr 14, 2011 at 5:39 pm

WOw so this means its the best one?

dexx
Apr 17, 2011 at 1:39 pm

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
May 17, 2011 at 6:40 am

za

martin
Jun 10, 2011 at 2:22 am

[…] CSS3 Examples and Best Practices […]

girl a micromedia
Aug 22, 2011 at 3:54 pm

These example sites give me a serious inferiority complex.

complex41
Aug 23, 2011 at 11:10 am

And then he handed you the thirty-five 45

Anirudh
Sep 16, 2011 at 11:49 am

helpful examples…inspired me a lot

Moliva
Dec 9, 2011 at 8:17 am

These example sites give me a serious inferiority complex.

immobilier
Dec 20, 2011 at 5:27 pm

Hello tout le monde quel est votre point de vue de mon nouveau blog sur l’immobilier?

ilustratrice
Jan 22, 2012 at 6:18 pm

Good lessons you provide. The best is still to mark every browsers: webkit, moz etc

carlo c
Jan 31, 2012 at 10:01 pm

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
Feb 5, 2012 at 6:47 am

hello dear this stuff is very usefull for me
Thanks

smgf45
Jul 4, 2012 at 7:07 am

tj

u

dfssd

web technologies
Jul 31, 2012 at 5:43 am

Good post !! Very useful to my projects … Thanks

Sage
Aug 4, 2012 at 7:11 pm

Great tip about rotating the images in PS first. Looking forward to the day when CSS3 will be common standard =P

Ali
Sep 5, 2012 at 6:09 pm

Very nice samples. Thanks for samples

μαθηματα joomla
Sep 8, 2012 at 10:48 am

Very nice! thanks for sharing!

DymoLabels
Jun 1, 2013 at 3:58 am

hi sir
i really like your blog
this stuff is very usefull for me
keep it up
thanks for sharing

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.