CSS3D creates a stereoscopic 3D effect with CSS3 only. First I just created this red and cyan effect because I thought it looks cool. But then I got some 3D glasses and was shocked that it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset. The trick is to use “em“s for the text-shadows. That way, if you change the font-size, the text-shadows change in the same proportion.

text-shadow: -0.06em 0 red, 0.06em 0 cyan;

See the Demo →

Note: Actually you are not limited to text only. You can use the same technique with box-shadows. It even works when you add some of webkit’s 3D transforms like rotateY.

Update: Wow! I submitted this to Smashing Magazine’s CSS3 Design Contest and it made it on 3rd place, which makes me incredible happy. Thanks!

For comments please use twitter.