Ultima revisión 16/10/2012

Reflexión o efectos espejo en CSS3

Antes de CSS3, cuando queríamos hacer un efecto espejo o un reflejo teníamos que usar jQuery. Eso estaba bien ya que a los usuarios de internet les encantan los efectos visuales y, por norma general, la vistosidad. Ahora con CSS3, hacer esto es muy sencillo.

Ejemplo

REFLEJOS REFLEJOS

El código que debajo os propongo está dentro de la normativa Cross Browsing, por lo que funciona en todos los navegadore. Hay que decir que en IE8 e inferiores el efecto no es maravilloso pero no queda mal del todo.

Utiliza hacks para filtrar por navegador, por lo que todavía es un poco lioso y sucio pero funciona.

Habrá que esperar a que se estandarice la nueva anotación de Firefox, Safary y Chrome que usan la propiedad -moz-box-reflect o -webkit-box-reflect que se pueden usar con parámetros como los siguientes;

-webkit-box-reflect: below 10px;
 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.40)));
-moz-box-reflect: below 10px;
 -moz-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.40)));

El código CSS3

#plane {
    padding-top: 5%;
    float:left !important; padding:0 10px 0 0; 
    bottom: 0;
    min-width: 360px;
    min-height: 180px;
    overflow: hidden;
    overflow-x: visible;
}
#etbr, #refl {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 50px;
    background-color: #283a64;
    font-weight: bold;
    padding: 30px;
    display: inline-block;
    
    box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(58,128,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;
    border-radius: 30px;
    
    position: relative;
}
#refl {
    position: absolute;
    
    top: 100%;
    left: 0;
    
    transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -khtml-transform: scaleY(-1);
    -xv-transform: scaleY(-1);
    
    filter: url(reflection.svg#blur); /* FF, Opera + IE10*/
    -webkit-filter: blur(2px); /* webkit */
    
    box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px;
}
.navegadores_actuales #refl {
    opacity: .25;
}
.ie9 #refl {
    margin-top: 20px;
    margin-left: -10px;
    
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
}
.navegadores_antiguos #refl {
    margin-top: -20px;
    margin-left: -7px;
    
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000)
    progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
    progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
    progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
    progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
}

El código HTML

<!--[if lt IE 9 ]> <body class="navegadores_antiguos"> <![endif]-->
<!--[if IE 9 ]> <div class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->     <div class="navegadores_actuales">     <!--<![endif]-->
    <div id="plane">
        <span id="etbr">REFLEJOS
            <span id="refl">REFLEJOS</span>
        </span>
    </div>
<div>

Reflexión o efectos espejo en CSS3

Ejemplo

El código CSS3

El código HTML

Consentimiento para cookies y datos