Reflexão de Imagem CSS3 [Dicas CSS3]

Até agora, discutimos muitas novas propriedades em CSS3. Além disso, existem algumas outras propriedades que atualmente não estão incluídas nas especificações oficiais do CSS3 que valem a pena experimentar, uma das quais é a caixa de refletir propriedade que é iniciada por Webkit. Esta propriedade pode refletir nos objetos especificados.

Reflexão Básica

A implementação básica é bastante intuitiva; digamos, queremos a reflexão abaixo do objeto real. Nós podemos escrever:

 img -webkit-box-reflect: abaixo;  

Este exemplo mostra como refletimos uma imagem abaixo (a posição) o objeto. Mas, neste caso, também podemos segurar a reflexão para o certo, esquerda, e acima.

Deslocamento de reflexão

Offset é usado para definir a lacuna entre a reflexão e o objeto real refletido. Vamos ver o trecho de código abaixo;

 img -webkit-box-reflect: abaixo de 10px;  

No código acima, separamos a reflexão do objeto real por 10px;

• Ver demonstração

Mascaramento com gradientes

O efeito de reflexão que comumente vemos é o fade-out na parte inferior e exibindo apenas metade ou menos do objeto real. Para replicar esse tipo de efeito, podemos aplicar Gradientes CSS3 para mascarar o objeto, assim;

 -webkit-box-reflect: abaixo 0px -webkit-gradient (linear, superior esquerdo, inferior esquerdo, de (transparente), para (rgba (250, 250, 250, 0.1))); 

Esse código resultará na apresentação a seguir;

Nós também podemos usar cor-stop para controlar as transições e tornar a reflexão mais agradável:

 img -webkit-box-reflect: abaixo 0px -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, de (transparente), cor-stop (70%, transparente), para (rgba (250, 250, 250, 0.1 )));  

• Ver demonstração

Alternativas para o Firefox

Esta propriedade, no entanto, está trabalhando apenas em navegadores Webkit (ou seja, Safari e Chrome) no momento. Para fornecer o mesmo efeito no Firefox, você precisa de outra rota: usando -moz-elemento () função. Essencialmente, esta função irá gerar ou replicar o conteúdo de elementos HTML específicos. Vamos dar uma olhada no seguinte exemplo;

Nós temos uma imagem embrulhada em um

com moz-reflect identidade;

E, para segurar a reflexão, vamos usar :depois de pseudo-elemento, do seguinte modo;

 # moz-reflect: após content: ""; display: bloco; plano de fundo: -moz-element (# moz-reflect) sem repetição; largura: auto; altura: 375px; margem inferior: 100 px; -moz-transform: scaleY (-1);  

o -moz-transform com escala negativa é usado para virar o objeto gerado de cabeça para baixo. Além disso, verifique se altura é preciso o suficiente para o objeto real altura evitar linhas extras desnecessárias para posicionar a reflexão.

Infelizmente, ainda não há uma maneira fácil de criar legal efeito de reflexão no Firefox usando esta prática. O código acima irá simplesmente criar a reflexão, sem o efeito de desvanecimento.

• Ver demonstração
• Fonte de download

Referências adicionais

• Guia de efeitos visuais do Safari CSS
• Elemento Mozilla () Documentação