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!