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.
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.
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.
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.
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).
Users with a
border-radius supported browser will see rounded corners on the Future of Web Design site.
SquareSpace enhances their blog title by appling a light shadow which you can barely notice.
Be careful if you are applying border on rotated images. The border may cause jittering result.
To avoid the jittering effect, use Photoshop to rotate the image first and then apply the CSS transformation as seen on the Chirp site.
The rotating earth image is a very nice touch on the 404 page of FOWD (see it with a webkit browser).
However, don’t go crazy with rotating multiple large images because it might look choppy.
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.
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.
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)
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!
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?
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.
Pablo Echeverri - Graphic Design
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 :(
– 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.
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.
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.
Thanks for the nice practical notes to share with me. I love that all. That will increase my Web Designing, Site Design techniques.
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!
Nice post. Nice and simple. Going into my css3 bookmarks along with some of your other posts
I am really liking CSS3. Adding this to my bookmarks. I really like the site examples you used as well.
CSS3 is our future !
Thank you for sharing this collection with us ^_^
The effects that can be achieved are huge.
Smart Web Design
CSS3 looks wicked need to start looking into it more! Great post :)
Nice post, Just love it.
All the brilliant fortresses at ROBLOX are amusing in the amazing world ROBLOX
Thank you for those awesome tips. will keep these in mind when I develop my websites.
‘Rotating One Large Image’ Tip..the style of displaying 404 error is simply awesome !
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!
great post …thnak you
Really like the example of Rolling DVDs… lots of ideas coming out of that one to use on my curren project.
I’ve to thank you for all your shared ideas, just great!
“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?
Those are cool effect! especially the DVD rolling effect! Can U write a tutorial teach us how to make it?
in what firefox version the css3 support?
Cool stuff… only hope CSS3 becomes universally supported across browsers…
Thanks a lot!!!
About the 3rd sample, is -webkit-transform considered as a CSS3 selector? I don’t think it is, is it?
great post … thanks…
Web Dizajn Sarajevo
Thank you from Sarajevo!
Really excellent post, very interesting.
This is great!
Share admin thanks a lot for sharing a very successful and wonderful.
great article. thanks for sharing.
Web tasarım izmir
fantastic examples thanks for sharing
Realy cool Stuff.
Thanks for it.
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
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.
Thanks for sharing with us.
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.
The christmas time is comeing, white iphone 4 conversion kit will be the best present for yourself and family.
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.
Come and make a change for your lovely iphone 4 white!
I was reading something else about this on another blog. Interesting.
i THINK THE STUFF IS REALLY GOOD .
I always follow your site thank you
Thanks for sharing with us.
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
Visit us: http://www.ticostyle.com
Web Design & Hosting in Costa Rica
very useful thanks for sharing
can you please teach how to organize my background wall design..?
It’s amazing to see what everyone is doing, I love sites like this!
web designing site
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!
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?
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.
[…] CSS3 Examples and Best Practices […]
girl a micromedia
These example sites give me a serious inferiority complex.
And then he handed you the thirty-five 45
helpful examples…inspired me a lot
These example sites give me a serious inferiority complex.
Hello tout le monde quel est votre point de vue de mon nouveau blog sur l’immobilier?
Good lessons you provide. The best is still to mark every browsers: webkit, moz etc
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
Good post !! Very useful to my projects … Thanks
Great tip about rotating the images in PS first. Looking forward to the day when CSS3 will be common standard =P
Very nice samples. Thanks for samples
Very nice! thanks for sharing!
i really like your blog
this stuff is very usefull for me
keep it up
thanks for sharing