CSS3: efecto reflejo

Un bonito efecto de CSS3 que nos ahorrará de utilizar photoshop para realizar un efecto reflejo de un div, texto, imágen…

Utilizamos la propiedad css3 box-reflect que se encarga de realizar este efecto por ahora solo válido en navegadores webkit.

Ejemplo de uso:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.efecto-espejo {
-webkit-box-reflect: below -25px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.5)));
}
.efecto-espejo { -webkit-box-reflect: below -25px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.5))); }
.efecto-espejo {
 -webkit-box-reflect: below -25px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.5)));
}

(*) No funciona en Firefox o IE

Este post ha sido archivado en CSS.

Agradezco tu comentario 🤘