July 14

This is so cool in red/blue glasses! (works on Firefox) simurai: 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.

This is so cool in red/blue glasses! (works on Firefox)

simurai:

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.

  1. psychid reblogged this from athenability
  2. cakeisdead reblogged this from simurai
  3. semendeev reblogged this from simurai
  4. tswamyee reblogged this from simurai
  5. kidapu reblogged this from simurai
  6. jeen-hao reblogged this from free-rider
  7. idmserial reblogged this from free-rider
  8. free-rider reblogged this from simurai and added:
    Crack Data Enter
  9. kirin91 reblogged this from classics2
  10. classics2 reblogged this from superamit
  11. roropoly reblogged this from simurai
  12. 14lovergreen reblogged this from vampwulfjt
  13. vampwulfjt reblogged this from ixora
  14. paranunmure reblogged this from simurai
  15. shuupershine reblogged this from simurai
  16. aestheticzombie reblogged this from simurai
  17. livores reblogged this from simurai
  18. musharna reblogged this from ixora and added:
    Awesome CSS code.
  19. 3dboyfriend reblogged this from simurai
  20. mylittlehockeypuck reblogged this from ixora
  21. simurai posted this