Reflexión de imagen CSS3 [Consejos CSS3]
Hasta ahora, hemos discutido muchas propiedades nuevas en CSS3. Más allá de eso, en realidad hay algunas otras propiedades que actualmente no están incluidas en las especificaciones oficiales de CSS3 que vale la pena probar, una de las cuales es la cuadro-reflejo propiedad que es iniciada por Webkit. Esta propiedad puede reflejar en los objetos especificados..
Reflexión básica
La implementación básica es bastante intuitiva; Digamos, queremos el reflejo debajo del objeto real. Podemos escribir:
img -webkit-box-reflect: abajo;
Este ejemplo muestra cómo reflejamos una imagen. abajo (la posición) el objeto. Pero, en este caso, también podemos sostener la reflexión a la Correcto, izquierda, y encima.
Compensación de reflexión
Compensar se utiliza para definir la brecha entre la reflexión y el objeto real reflejado. Veamos el fragmento de código a continuación;
img -webkit-box-reflect: por debajo de 10px;
En el código anterior, separamos la reflexión del objeto real mediante 10px;
- Ver demostración
Enmascaramiento con gradientes
El efecto de reflexión que comúnmente vemos es el desvanecimiento en la parte inferior y muestra solo la mitad o menos del objeto real. Para replicar este tipo de efecto, podemos aplicar Gradientes CSS3 Enmascarar el objeto, como tal;
-webkit-box-reflect: debajo de 0px -webkit-gradient (lineal, izquierda superior, izquierda inferior, desde (transparente), hasta (rgba (250, 250, 250, 0.1)));
Este código dará lugar a la siguiente presentación;
También podemos usar parada de color para controlar las transiciones y hacer que la reflexión se vea mejor:
img -webkit-box-reflect: debajo de 0px -webkit-gradient (lineal, izquierda superior, izquierda inferior, desde (transparente), color-stop (70%, transparente), hasta (rgba (250, 250, 250, 0.1) )));
- Ver demostración
Alternativas para Firefox
Sin embargo, esta propiedad solo funciona en los navegadores Webkit (es decir, Safari y Chrome) en este momento. Para ofrecer el mismo efecto en Firefox, necesitas otra ruta: usar -elemento moz () función. Esta función esencialmente generará o replicará el contenido de elementos HTML específicos. Echemos un vistazo al siguiente ejemplo;
Tenemos una imagen envuelta en un Y, para sostener el reflejo, utilizaremos. los Desafortunadamente, todavía no hay una manera fácil de crear un agradable Efecto de reflexión en Firefox utilizando esta práctica. El código anterior simplemente creará la reflexión, sin el efecto de atenuación..reflejo de moz carné de identidad;
:después pseudo-elemento, como sigue; # moz-reflect: after content: ""; bloqueo de pantalla; fondo: -moz-element (# moz-reflect) no se repite; ancho: auto; altura: 375px; margen inferior: 100px; -moz-transform: scaleY (-1);
-transformada de moz con escala negativa se usa para voltear el objeto generado de arriba a abajo. Además, asegúrese de que el altura es lo suficientemente preciso para el objeto real altura Evitar líneas extras innecesarias para posicionar la reflexión..Referencias adicionales
