> Dynamic pure CSS 3D Text
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!