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

Transparência

CSS3 tem 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).

Aqui está um div com transparência parcial sobreposta a 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 leva um único valor em ponto flutuante entre 0 e 1. Zero (0) É completamente transparente e um (1) É completamente opaco.

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ê quiser adicionar transparência parcial para uma cor individual. A opacidade pode ser usado para um elemento inteiro, mesmo algo complexo como uma imagem ou um vídeo.

Todas as versões 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. Actualmente, 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 browsers 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-reflectir atributo.

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

2. Especificar onde a reflexão está a ser colocado.

   Normalmente, a reflexão passa por baixo 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 à direita ao lado do elemento original, mas muitas vezes parece melhor com uma pequena diferença. A diferença é normalmente medido 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 de completamente opaco (branco) a completamente transparente (transparente).

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

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

1. Criar um gradiente linear.

   O gradiente de 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.

   Usado para indicar o gradiente começa na parte superior, e para indicar a inclinação começa na parte inferior. Estes valores representam a parte superior e inferior do original imagem, não a reflexão (que irá, é claro, ser invertidas). Normalmente, o gradiente começa 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 o topo da imagem reflectida deve ser completamente opaca. Este gradiente não é realmente sobre a cor, mas sobre a qual as partes do reflexo são visíveis. Definir a cor inicial para o branco faz com que a parte superior da reflexão completamente opaca.

4. Termine a opacidade total.

   A parte superior da imagem original (a parte inferior da reflexão) deve ser completamente transparente, de modo que o gradiente terminar com a palavra-chave de 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.

Os reflexos são habitualmente aplicados a imagens, mas podem ser aplicados a qualquer elemento, mesmo de vídeo!

É possível obter um efeito de reflexo em outros navegadores com uso inteligente dos atributos de transformação e de declive. 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 suportado ou quando o efeito reflecte-se não é absolutamente necessário.