Reflexão de imagem CSS

Índice

Neste capítulo você aprenderá como refletir uma imagem.

Reflexões de imagem CSS

A propriedade box-reflect é usada para criar um reflexo de imagem.

O valor da propriedade box-reflect pode ser:

below
above
left
right

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.

Números seguidos de -webkit- especificam a primeira versão que funcionou com um prefixo.

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

Exemplos

Exemplo

Aqui queremos o reflexo abaixo da imagem:

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

Experimente você mesmo →

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

Exemplo

Aqui queremos o reflexo à direita da imagem:

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

Experimente você mesmo →

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

Deslocamento de reflexão CSS

Para especificar o intervalo entre a imagem e o reflexo, adicione o tamanho do gap para a propriedade box-reflect.

Exemplo

Aqui queremos o reflexo abaixo da imagem, com deslocamento de 20px:

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

Experimente você mesmo →

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

Reflexão CSS com gradiente

Também podemos criar um efeito de fade-out no reflexo.

Exemplo

Crie um efeito de fade-out no reflexo:

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

Experimente você mesmo →

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