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. tswamyee reblogged this from simurai
  2. kidapu reblogged this from simurai
  3. jeen-hao reblogged this from free-rider
  4. idmserial reblogged this from free-rider
  5. free-rider reblogged this from simurai and added:
    Crack Data Enter
  6. cheap-papers reblogged this from viiv
  7. cheap-papers reblogged this from simurai
  8. kirin91 reblogged this from classics2
  9. classics2 reblogged this from superamit
  10. changniel reblogged this from simurai
  11. 14lovergreen reblogged this from vampwulfjt
  12. vampwulfjt reblogged this from ixora
  13. coca-moon reblogged this from simurai
  14. shuupershine reblogged this from simurai
  15. aestheticzombie reblogged this from simurai
  16. livores reblogged this from simurai
  17. musharna reblogged this from ixora and added:
    Awesome CSS code.
  18. 3dboyfriend reblogged this from simurai
  19. mylittlehockeypuck reblogged this from ixora
  20. potatoreactor reblogged this from ixora