Os web designers há muito esperavam mais controle sobre as páginas que eles criavam quando o CSS3 entrava em cena. Os novos estilos apresentados no CSS3 deram aos profissionais da Web a capacidade de adicionar efeitos semelhantes ao Photoshop em suas páginas. Isso incluiu propriedades como sombras e brilhos, cantos arredondados e muito mais. O CSS3 também introduziu efeitos semelhantes a animações que podem ser usados para criar interatividade agradável em sites.
Um efeito visual muito agradável que você pode adicionar aos elementos em seu site usando o CSS3 é fazer com que eles fiquem inativos e apagados usando uma combinação das propriedades de opacidade e transição. Essa é uma maneira fácil e bem suportada de tornar suas páginas mais interativas, criando áreas desbotadas que entram em foco quando um visitante do site faz algo, como passar o mouse sobre esse elemento.
Vamos dar uma olhada em como é fácil adicionar esse efeito visual interativo a vários elementos em suas páginas da web.
Alterar a opacidade do hover
Começaremos analisando como alterar a opacidade de uma imagem quando um cliente estiver passando por cima desse elemento. Para este exemplo (o HTML é mostrado abaixo), estamos usando uma imagem com o atributo class de
greydout.
Para torná-lo esmaecido, adicionamos as seguintes regras de estilo à nossa folha de estilo CSS: .greydout {-webkit-opacidade: 0,25;-mozopacidade: 0,25;opacidade: 0,25;}
Essas configurações de opacidade são convertidas em 25%. Isto significa que a imagem será mostrada como 1/4 da sua transparência normal. Totalmente opaco sem transparência seria de 100%, enquanto 0% seria totalmente transparente. Em seguida, para tornar a imagem clara (ou, mais precisamente, tornar-se totalmente opaca) quando o mouse passar sobre ela, adicione o :flutuarpseudo-classe: .greydout: hover {-webkit-opacidade: 1;-moz-opacidade: 1;opacidade: 1;}
Você perceberá que, para esses exemplos, estamos usando as versões prefixadas do fornecedor da regra para garantir a compatibilidade retroativa para versões mais antigas desses navegadores. Embora essa seja uma boa prática, a realidade é que agora a regra de opacidade é bem suportada pelos navegadores e é bastante seguro descartar essas linhas pré-fixadas do fornecedor. Ainda assim, também não há motivos para não incluir esses prefixos se você quiser garantir suporte a versões mais antigas de navegadores. Apenas certifique-se de seguir a melhor prática aceita de terminar a declaração com a versão normal e não prefixada do estilo. Se você implantasse isso em um site, veria que esse ajuste de opacidade é uma mudança muito abrupta. Primeiro, é cinza e não é, sem estados intermediários entre os dois. É como um interruptor de luz - ligado ou desligado. Isso pode ser o que você quer, mas você também pode querer experimentar uma mudança que seja mais gradual. Para adicionar um efeito muito legal e tornar esse fade gradual, você deseja adicionar transição
propriedade para o .greydoutclasse: .greydout {-webkit-opacidade: 0,25;-mozopacidade: 0,25;opacidade: 0,25;-webkit-transition: todos os 3s fáceis;-moz-transition: all 3s ease;-ms-transition: todos os 3s facilitam;-o-transição: toda facilidade de 3s;transição: todos os 3s facilidade;}
