Feb 10
CSS3 Examples and Best Practices
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.
Free Vector Social Media Set New WordPress Theme: Notepad
Comments
There are 50 comments (+Add)
Loading ...
50 krike http://cmstutorials.org
March 19th, 2010 at 3:31 am
Thank you for those awesome tips. will keep these in mind when I develop my websites.
49 Link9401 http://www.roblox.com
March 13th, 2010 at 9:23 pm
All the brilliant fortresses at ROBLOX are amusing in the amazing world ROBLOX
48 web design http://webdesignate.com
March 5th, 2010 at 10:27 am
Nice post, Just love it.
Thanks !
47 Smart Web Design http://www.smart-web-design.co.uk
March 4th, 2010 at 4:25 am
CSS3 looks wicked need to start looking into it more! Great post
46 capsiplex http://www.capsiplexzayiflamahapi.net/
February 23rd, 2010 at 5:29 pm
The effects that can be achieved are huge.
45 Ale http://www.agintersys.com
February 21st, 2010 at 9:17 am
Thank you for sharing this collection with us ^_^
44 vibhor chandel http://creativetwigs.com
February 19th, 2010 at 2:10 pm
CSS3 is our future !
43 Jonathan Butterworth http://thedesignshaman.com
February 18th, 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.
42 jamesb http://www.salebuyu.com
February 17th, 2010 at 12:20 am
Nice post. Nice and simple. Going into my css3 bookmarks along with some of your other posts
41 Daniel Long http://www.crearedesign.co.uk
February 15th, 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!