Reflexão de imagem CSS
Neste capítulo, você aprenderá a refletir uma imagem.
Reflexões de imagem CSS
A box-reflect
propriedade é usada para criar um reflexo de imagem.
O valor da box-reflect
propriedade pode ser: below
, above
,
left
ou right
.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Números seguidos por -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 a reflexão abaixo da imagem:
img {
-webkit-box-reflect: below;
}
Exemplo
Aqui queremos o reflexo à direita da imagem:
img {
-webkit-box-reflect: right;
}
Deslocamento de reflexão CSS
Para especificar a lacuna entre a imagem e o reflexo, adicione o tamanho da lacuna à box-reflect
propriedade.
Exemplo
Aqui queremos o reflexo abaixo da imagem, com um deslocamento de 20px:
img {
-webkit-box-reflect: below 20px;
}
Reflexão CSS com gradiente
Também podemos criar um efeito fade-out no reflexo.
Exemplo
Crie um efeito 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));
}