ZEPPELIN is an experiment trying to create a glass text effect (refractive index) with CSS3. 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 the animation is not looped, only on hover.

This experiment is inspired by Trent Walton’s example.

See the demo.

  1. jeen-hao reblogged this from free-rider and added:
    (via simurai)
  2. idmserial reblogged this from free-rider and added:
    (via simurai)
  3. free-rider reblogged this from simurai and added:
    Magic Shop Hentai Game
  4. figuraduras reblogged this from simurai
  5. iamlhoyd reblogged this from simurai
  6. majho reblogged this from simurai
  7. orangexception reblogged this from webkitbits
  8. webkitbits reblogged this from simurai
  9. fruor said: simurai.com/about
  10. strake reblogged this from simurai and added:
    little embarrassed to say that I had never heard of simurai until today. This guy (or girl?) is doing some amazing...
  11. benjamindauer reblogged this from simurai and added:
    Another incredible CSS3
  12. graciewieber reblogged this from simurai and added:
    CG8 presents: tumblr →
  13. rishtewaliaunty said: on rolling over nothing happens :(
  14. aeontriad reblogged this from simurai
  15. magicology reblogged this from simurai
  16. simurai posted this
simurai simurai

I’m a UIX Designer and like to experiment with CSS3. This site is my personal playground.

About
Contact