O novos estilos introduzidos em CSS3 deu aos profissionais da web a capacidade de adicionar efeitos semelhantes ao Photoshop em suas páginas. Um efeito visual que você pode adicionar usando CSS3 é tornar as páginas da web interativas criando áreas desbotadas que entram em foco quando um visitante do site faz algo, como passar o mouse sobre esse elemento. Este efeito usa uma combinação de opacidade e transição.
Alterar opacidade ao passar o mouse
Um elemento interativo é alterar a opacidade de uma imagem quando um cliente passa o mouse sobre esse elemento. Para este exemplo (o HTML é mostrado abaixo), usamos uma imagem com o atributo class de cinza.
Para torná-lo esmaecido, adicione as seguintes regras de estilo à sua folha de estilo CSS:
.greydout {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
opacidade: 0,25;
}
Essas configurações de opacidade são convertidas em 25 por cento. Isso significa que a imagem será exibida com 1/4 de sua transparência normal. Totalmente opaco sem transparência seria 100 por cento, enquanto 0 por cento seria completamente transparente.
Em seguida, para tornar a imagem clara (ou, mais precisamente, para se tornar totalmente opaca) quando o mouse passar sobre ela, você adicionaria o seguinte:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacidade: 1;
}
Mais ajustes de opacidade
Você notará que, para esses exemplos, usamos as versões prefixadas do fornecedor da regra para garantir a compatibilidade com versões anteriores para versões mais antigas desses navegadores. Embora seja uma boa prática, a regra de opacidade é bem suportada por navegadores, e é seguro descartar essas linhas com prefixo do fornecedor.
Ainda assim, não há razão para não incluir esses prefixos se você quiser garantir o suporte para versões mais antigas do navegador. Apenas certifique-se de seguir a melhor prática aceita de terminar a declaração com a versão normal e sem prefixo do estilo.
Quando implantado em um site, esse ajuste de opacidade é uma mudança abrupta. Primeiro, é cinza e depois não é, sem estados intermediários entre os dois. É como um interruptor de luz - liga ou desliga. Isso pode ser o que você deseja, mas também pode experimentar uma mudança mais gradual.
Para adicionar um efeito legal e fazer esse esmaecimento gradual, adicione o transição propriedade:
.greydout
classe: .greydout {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
opacidade: 0,25;
-webkit-transição: todos os 3s facilidade;
-moz-transição: todos os 3s são fáceis;
-ms-transição: todos os 3s são fáceis;
-o-transição: todos os 3s são fáceis;
transição: facilidade de todos os 3s;
}