En este capítulo aprenderás cómo reflejar una imagen.
Reflejos de imagen CSS
La propiedad box-reflect se utiliza para crear un reflejo de imagen.
El valor de la propiedad box-reflect puede ser: debajo, arriba, izquierda o derecha.
Compatibilidad con el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Propiedad | Chrome | Edge | Mozilla | Safari | Opera |
box-reflect | 4.0 -webkit- | 79.0 -webkit- | No soportado | 4.0 -webkit- | 15.0 -webkit- |
Ejemplos
Ejemplo:
Aquí queremos el reflejo debajo de la imagen:
img {
-webkit-box-reflect: below;
}
Ejemplo:
Aquí queremos el reflejo a la derecha de la imagen:
img {
-webkit-box-reflect: right;
}
Reflection Offset CSS
Para especificar el espacio entre la imagen y el reflejo, agregue el tamaño del espacio a la propiedad box-reflect.
Ejemplo:
Aquí queremos el reflejo debajo de la imagen, con un desplazamiento de 20px:
img {
-webkit-box-reflect: below 20px;
}
Reflection con degradado
También podemos crear un efecto de desvanecimiento en el reflejo.
Ejemplo:
Crea un efecto de desvanecimiento en el reflejo:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
Traducido con 💚 desde W3Schools.com