Réflexion d'image CSS

Table des matières

Dans ce chapitre, vous apprendrez à refléter une image.

Réflexions d'images CSS

La propriété box-reflect est utilisée pour créer un reflet d'image.

La valeur de la propriété box-reflect peut être :

below
above
left
right

Prise en charge du navigateur

Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge la propriété.

Les nombres suivis de -webkit- spécifient la première version qui a fonctionné avec un préfixe.

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

Exemples

Exemple

Ici, nous voulons le reflet sous l'image :

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

Essayez-le vous-même →

<!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>

Exemple

Ici, nous voulons le reflet à droite de l'image :

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

Essayez-le vous-même →

<!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>

Décalage de réflexion CSS

Pour spécifier l'écart entre l'image et le reflet, ajoutez la taille du écart avec la propriété box-reflect.

Exemple

Ici, nous voulons le reflet sous l'image, avec un décalage de 20 px :

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

Essayez-le vous-même →

<!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>

Réflexion CSS avec dégradé

Nous pouvons également créer un effet de fondu sur le reflet.

Exemple

Créez un effet de fondu sur le reflet :

  img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), 
   rgba(0,0,0,0.4));
}

Essayez-le vous-même →

<!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>