ZEPPELIN is an experiment trying to create a glass text effect (refractive index) with CSS3. Yes, another useless CSS3 demo. But I always try to keep the markup as minimal as possible.. this time there is only one extra <p> tag needed. I tried to use the :after pseudo-element, but somehow the animation didn’t work.

The refractive index effect is achieved by using two background images on top of each other. The underlying one get’s scaled down a bit and the top one get’s cutout by the text using -webkit-background-clip: text. For the embossing effect a -webkit-text-stroke with a low opacity is used. Something to keep in mind, animating clippings, text-shadows, transparency can make your CPU spike, it’s not just Flash, CSS can be misused too. So make sure you don’t loop the animation forever.

This experiment is inspired by Trent Walton’s example.

See the live demo.

  1. jeen-hao reblogged this from free-rider
  2. idmserial reblogged this from free-rider
  3. free-rider reblogged this from simurai and added:
    Magic Shop Hentai Game
  4. cheap-papers reblogged this from simurai
  5. figuraduras reblogged this from simurai
  6. iamlhoyd reblogged this from simurai
  7. majho reblogged this from simurai
  8. kashdan reblogged this from webkitbits
  9. orangexception reblogged this from webkitbits
  10. webkitbits reblogged this from simurai
  11. fruor said: simurai.com/about
  12. strake reblogged this from simurai and added:
    little embarrassed...simurai until today. This guy (or girl?) is doing some amazing...
  13. benjamindauer reblogged this from simurai and added:
    Another incredible
  14. craziegracie8 reblogged this from simurai and added:
    CG8 presents: tumblr → simurai:
  15. s-h-a-d-o-w--k-i-s-s-e-d said: on rolling over nothing happens :(
  16. aeontriad reblogged this from simurai
  17. magicology reblogged this from simurai
Feed me