CSS3D

This CSS3D demo adds 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 surprised that it actually works.

See the Pen CSS3D by simurai (@simurai) on CodePen.

Basically you just need one line of CSS. A text-shadow with a red and cyan offset. The trick is to use ems 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;

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

Update: Wow! I submitted this to Smashing Magazine’s CSS3 Design Contest and it got the 3rd place. Thanks!