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

1 4 5 6
  1. immobilier
    Dec 20, 2011 @ 5:27 pm

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

    Reply

  2. ilustratrice
    Jan 22, 2012 @ 6:18 pm

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

    Reply

  3. carlo c
    Jan 31, 2012 @ 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.

    Reply

  4. website design in delhi ncr
    Feb 5, 2012 @ 6:47 am

    hello dear this stuff is very usefull for me
    Thanks

    Reply

  5. smgf45
    Jul 4, 2012 @ 7:07 am

    tj

    u

    dfssd

    Reply

  6. web technologies
    Jul 31, 2012 @ 5:43 am

    Good post !! Very useful to my projects … Thanks

    Reply

  7. Sage
    Aug 4, 2012 @ 7:11 pm

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

    Reply

  8. Ali
    Sep 5, 2012 @ 6:09 pm

    Very nice samples. Thanks for samples

    Reply

  9. μαθηματα joomla
    Sep 8, 2012 @ 10:48 am

    Very nice! thanks for sharing!

    Reply

  10. DymoLabels
    Jun 1, 2013 @ 3:58 am

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

    Reply

1 4 5 6

Leave a Reply