Reflexión de imagen CSS

Tabla de contenido

En este capítulo aprenderá 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:

below
above
left
right

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que admite totalmente la propiedad.

Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.

Property
box-reflect	4.0 -webkit-	79.0 -webkit-	Not supported	4.0 -webkit-	15.0 -webkit-

Ejemplos

Ejemplo

Aquí queremos el reflejo debajo de la imagen:

  img {
  -webkit-box-reflect: below;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection below the image:</p>
<img src="img_tree.png">

</body>
</html>

Ejemplo

Aquí queremos el reflejo a la derecha de la imagen:

  img {
  -webkit-box-reflect: right;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: right;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection to the right of the image:</p>
<img src="img_tree.png">

</body>
</html>

Desplazamiento de reflexión CSS

Para especificar el espacio entre la imagen y el reflejo, agregue el tamaño del espacio con la propiedad box-reflect.

Ejemplo

Aquí queremos el reflejo debajo de la imagen, con un desplazamiento de 20 píxeles:

  img {
  -webkit-box-reflect: below 20px;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below 20px;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection below the image, with a 20 pixels offset:</p>
<img src="img_tree.png">

</body>
</html>

Reflexión CSS 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));
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection with gradient (to make a fade-out effect):</p>
<img src="img_tree.png">

</body>
</html>