> Dynamic pure CSS 3D Text

3dtext

Using text-shadow to obtain a pseudo 3D effect is a nice technique but the 3D effect is limited to just one direction. I was wondering if we could get a better effect by adding a pinch of CSS transforms.

The basic idea is pretty simple. You can get a nice 3D effect combining multiple levels of text-shadow. This is an example:

CSS 3D TEXT

The code required to get this result is something like:

text-shadow: rgb(187, 187, 187) 0px 1px 0px,
  rgb(181, 181, 181) 0px 2px 0px,
  rgb(172, 172, 172) 0px 3px 0px,
  rgb(160, 160, 160) 0px 4px 0px,
  rgb(145, 145, 145) 0px 5px 0px,
  rgb(127, 127, 127) 0px 6px 0px,
  rgba(0, 0, 0, 0.199219) 0px 7px 1px,
  rgba(0, 0, 0, 0.296875) 0px 8px 6px;

To make everything more dramatic we could add some CSS transforms, and dynamically rebuilding the text-shadow we get a nice mouse-following pure CSS canvas-free 3D text effect.

This is the actual demo (chrome+safari, nice degradation on Firefox), and here below the screencast (in case you are using the wrong browser).

The 10 lines of JS code required are inline and self explanatory. Have fun!

/Share the joy

/Reactions

    • Author: Danisoft
    • Posted on: 2011/08/24
    • At: 20:32

    Thanks for sharing.

    Reply
    • Author: Mark Boas
    • Posted on: 2011/08/25
    • At: 15:47

    Nice! I’m thinking of using this for a site and adding a fallback image for browsers that don’t support it.

    I’m thinking that a small Modernizr module could probably handle the test for support

    Reply
    • text-shadow is widely supported. For 3D transforms maybe you can just to assign a rotateZ and then check the getComputedStyle.

      Reply
    • Author: Jason
    • Posted on: 2011/08/26
    • At: 05:05

    This is great. Can you bind the CSS 3d transforms to iOS accelerometer instead of mouse movement?

    Reply
    • of course, why not!? Just hook to device motion event.

      Reply
    • Author: jonsthan
    • Posted on: 2011/09/28
    • At: 22:25

    i’m trying to make this effect with an HTML clock but i can get it to work!!!

    where can i get the right code “device motion event”

    it’s an iphone 4, and i would like this works with gyroscope!!!
    it’s an amazing effect for my lockscreen theme!!

    i found this but i couldn’t get it to work!!

    http://www.html5rocks.com/en/tutorials/device/orientation/

    Reply
    • Author: Francisco lopez lecube
    • Posted on: 2011/10/03
    • At: 01:42

    Could you create a 3d text button ? On click animate it to loose its shadow.

    Reply
    • Author: Sam Mah
    • Posted on: 2012/01/29
    • At: 03:50

    This is great. Thanks for sharing.

    Sam

    Reply
    • Author: Ijal Fauzi
    • Posted on: 2012/02/05
    • At: 04:18

    Great ! Thanks for sharing, sir.

    Reply
    • Author: Ahmet Sali
    • Posted on: 2012/03/18
    • At: 22:04

    This is fantastic!

    Reply
    • Author: kavya
    • Posted on: 2012/05/26
    • At: 18:28

    click me to see more css 3d effects

    Reply

/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>