Web Designer Wall
Design Trends

CSS3 Examples and Best Practices

By Aigars Silkalns 2 min read

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.

Keep reading

Design Trends

38 Mobile (iPhone) Sites

As you may probably know mobile design is getting more and more popular, particularly the iPhone design. Almost every popular website or…

1 min read

109 comments from the archive

  1. 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. :(

  2. 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)

  3. 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.

  4. 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!

  5. 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 :)

  6. 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?

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

    thanks for sharing it !!!

  8. 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.

  9. 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.

  12. 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

  13. 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…)

  14. 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 :(

  15. 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

  16. 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.

  20. 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.

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

  23. 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.

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

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

  26. 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.

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

  28. 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.

  29. 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.

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

  33. 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

  34. 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.

  37. 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

  39. 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

  40. Thanks for the nice practical notes to share with me. I love that all. That will increase my Web Designing, Site Design techniques.

  41. 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!

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

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

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

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

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

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

  53. 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!

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

  57. 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?

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

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

    Thanks a lot!!!

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

  71. 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

  72. 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.

  74. 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.

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

  76. 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.

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

  88. 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.

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

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

  91. 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.

  93. 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.

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

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

  102. 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.

  103. hello dear this stuff is very usefull for me
    Thanks

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

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

Comments are closed on this article.