Video: Efeitos fantasticos com CSS - 2015

CSS3 permite-lhe aplicar alguns efeitos especiais interessantes para suas páginas em HTML5. Estes efeitos podem ser aplicados a qualquer elemento, mas eles geralmente são aplicados a imagens e manchetes. Note-se que estes ainda são considerados experimentais, de modo que as implementações do navegador variam.

Transparência

CSS3 tem um suporte completo para opacidade ajustável. Isso se reflete em um par de formas. Primeiro, qualquer elemento tem um atributo que pode ser ajustado de 0 (Totalmente transparente) a1 (Totalmente opaco).

Video: Curso de HTML5 - 14 - Efeitos visuais em CSS3 - by Gustavo Guanabara

Aqui está um div com transparência parcial sobreposta sobre uma imagem.

O código completo para esta página é fácil de seguir:

opacidade Demonstração

Todo o código é HTML comum e coisas CSS2, exceto o último atributo. o opacidade atributo recebe um único valor de ponto flutuante entre 0 e 1. zero (0) É completamente transparente e um (1) É completamente opaca.

Note-se que o exemplo usa a outra forma principal de transparência apoiado por CSS - o título usa o modelo RGBA para adicionar transparência alfa para uma cor. Em geral, use alfa quando você deseja adicionar transparência parcial para uma cor individual. Opacidade pode ser usado para um elemento inteiro, até mesmo algo complexo como uma imagem ou um vídeo.

Todas as versões mais recentes do navegador apoiar opacidade sem a necessidade de prefixos específicos do fornecedor. navegadores mais antigos simplesmente exibir o elemento como totalmente opaco, então qualquer coisa sob um elemento parcialmente transparente pode ser invisível para navegadores mais antigos.

reflexões

A reflexão é mais um daqueles elementos visuais que acrescenta um pouco para uma página quando bem feito. Embora não seja uma parte formal da especificação CSS3, é uma tecnologia promissora. Atualmente, apenas os navegadores baseados no WebKit (isto é, Safari, iPhone / iPad, e Chrome) apoiar esta capacidade. No entanto, ele mostra como promessa de que alguma forma de esta capacidade é provável que aparecem nos outros navegadores em algum ponto.

Aplicar o seguinte CSS para fazer qualquer elemento com o refletir classe têm um reflexo de boa aparência nos navegadores suportados:

-webkit-box-refletir: abaixo 2px;

reflexões básicas são bastante simples:

1. Aplique o -webkit-box-reflexão atributo.

   Infelizmente, não existe uma versão genérica, nem tem o atributo sido repetido por outros navegadores.

2. Especifique onde o reflexo é para ser colocado.

   Normalmente, a reflexão vai abaixo do elemento primário, mas também pode ser acima, esquerda, ou certo.

3. 
   
   
   

   Indicam uma largura da abertura.

   A reflexão pode ser colocado ao lado do elemento original, mas muitas vezes parece melhor com uma pequena diferença. A diferença é normalmente medida em pixels.

Isto produzirá uma muito agradável reflexão.

No entanto, as reflexões não são geralmente duplicações de pixel-perfect. Eles tendem a desaparecer com a distância. WebKit permite que você adicione um gradiente a uma reflexão. Neste caso, o gradiente vai desde completamente opaco (branco) para completamente transparente (transparente).

.refletir {
 -webkit-box-refletir: abaixo 2px
 --webkit-linear de gradiente (inferior, branco, transparente 40%, transparente) -}

A parte padrão da reflexão é como o exemplo anterior, mas inclui um gradiente que se desvanece a reflexão com a transparência.

1. Construir um gradiente linear.

   O gradiente para uma reflexão é quase linear. Note-se que o gradiente não é uma nova regra CSS, mas simplesmente um parâmetro na regra de reflexão existente.

2. Faça o movimento gradiente de baixo para cima.

   Use para indicar o gradiente começa no topo, e para indicar o gradiente começa na parte inferior. Estes valores representam a parte superior e inferior da original imagem, não a reflexão (que, é claro, ser revertida). Normalmente, o gradiente inicia na parte inferior da imagem original (que está na parte superior da imagem reflectida).

3. Comece com opacidade total.

   A parte inferior da imagem original é a parte superior da imagem reflectida, e a parte superior da imagem reflectida deve ser completamente opaco. Este gradiente não é realmente sobre a cor, mas sobre quais partes do reflexo são visíveis. Definir a cor inicial para o branco faz com que o topo da reflexão completamente opaco.

4. Termine a opacidade total.

   A parte superior da imagem original (parte inferior da reflexão) deve ser completamente transparente, para acabar com o gradiente com a palavra-chave cor especial transparente (O que é equivalente a rgba 255, 255, 255, 0).

5. Adicionar uma cor-stop para ajustar o fade.

   Adicionar uma paragem de cor para indicar onde na reflexão deseja que a imagem para começar a desvanecer-se.

Note-se que a imagem refletida não é calculado como um elemento separado para fins de layout de página, para que o texto e outros conteúdos vai fluir bem em cima de sua reflexão.

Reflexões são comumente aplicado às imagens, mas elas podem ser aplicadas a qualquer elemento, mesmo vídeo!

É possível obter um efeito de reflexão em outros navegadores com uso inteligente dos atributos de transformação e de gradiente. Por enquanto, porém, é provavelmente mais seguro para reservar este efeito para situações em que você sabe o usuário estará usando um navegador compatível ou quando o efeito reflecte-se não é absolutamente necessário.