CSS3 Depth of Field

CSS3 Depth of Field

Posted in: Design,Typography,Web

This is a post from our previous blog, which has moved. If you'd like to see more posts like this one, head over to our new blog at blog.sawyerhollenshead.com

Feb 10

View Demo

Was tinkering with an idea during the Duke vs UNC game last night and came up with this. The blurry text is accomplished using text-shadow, with the text color set to transparent. Right now this only works in Webkit browsers and Firefox 4.0 beta.

Discussion

  1. Eli White Feb 11, 2011 at 10:40 am #

    Actually it’s working just fine in Firefox 3.6 for me.

    • Sawyer Feb 11, 2011 at 10:58 am #

      Most of the features should would work in 3.6, except the smooth transitions.

  2. Abhimanyu Ghoshal Feb 13, 2011 at 12:54 pm #

    That’s killer! Nicely done! Would love to see this being used (tastefully) on the web.

  3. Zoltan Hawryluk Feb 17, 2011 at 10:36 am #

    Impressive! Thanks for posting this – gives me a lot to think about in terms of what can be done with CSS3 design … even without the transform-3d module.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>