CSS3 Poetry: Rain Ripples

published:
2011.06.28
topics:
css

Rain Ripples CSS Demo.

This CSS3 moving poem shows how you can use just a little CSS3 magic to create some refracting water ripples that run right through a page's HTML content. Raindrops and ripples are created with border-radius, box-shadow, and CSS3 scale transforms -- and they are animated with CSS3 animations! Firefox 5 lets us refract not just an image but actual page DOM content via smart use of -moz-element. This YouTube video explains it a bit more.

Please click the Like button on the Mozilla Demo Studio! Thanks!