Opacidade CSS
Neste artigo vamos entrar em detalhes sobre a opacidade em CSS. Veremos como alterar a transparência dos elementos da página através de atributos CSS.
Embora pareça uma contradição, a opacidade serve para definir a transparência dos elementos da página. Isto é porque todos os elementos de uma página são 100% opacos por padrão. Ou seja, não se pode ver através deles e portanto ao se sobrepor tapam totalmente o que tiver debaixo. Sendo assim, através da opacidade poderemos especificar quanto de opaco será um elemento, ou o que é o mesmo o quão transparente for.
A opacidade se trabalha de duas maneiras distintas nos navegadores mais comuns. Por um lado temos Internet Explorer, e por outro lado temos todos os demais navegadores, ou seja, Firefox, Opera ou Chrome. Por isso, para especificar a opacidade ou transparência teremos que fazê-lo com dois atributos distintos. Em CriarWeb.com já havíamos tratado este tema anteriormente, porém agora vamos oferecer explicações mais completas.
Opacidade em Internet Explorer
Em Explorer temos que indicar o grau de opacidade como um filtro de CSS. Tais filtros podem ser aplicados com o atributo filter de folhas de estilos. Existem vários filtros disponíveis para fazer distintos efeitos sobre elementos da página, concretamente o filtro opacity é o que nos interessa para definir transparências. Especifica-se da seguinte maneira:
.classeopacidade{
filter:alpha(opacity=25);
}
Com esta declaração de estilos conseguiríamos que os elementos da classe classeopacidade tivessem um 25% de opacidade, ou o que é o mesmo, um 75% de transparência.
Pois bem, em Explorer não sei o porquê, podemos encontrar um problema ao utilizar o filtro opacity. Simplesmente em alguns casos não funcionará e não veremos a transparência que tivermos declarado. Isto se soluciona aplicando algum estilo adicional, à parte do próprio filtro CSS. Por exemplo, colocar uma largura à camada bastaria, ou também colocar um float:letf. É importante saber isto, visto que é o típico bug que se você não souber pode acabar com uma dor de cabeça.
Ficaria, por exemplo, assim:
.classeopacidade {
filter:alpha(opacity=25);
width: 120px;
}
Opacidade em Firefox, Opera, Chrome…
Nestes navegadores se define a transparência de uma maneira mais simples. Faremos através do atributo opacity, desta maneira:
. classeopacidade {opacity: .5}
Com isto conseguiremos que a classe seja 50% transparente, ou 50% opaca, como prefiramos dizer.
-moz-opacity: .25
Com isto indicamos uma transparência de 75%. Este atributo hoje não faz falta utilizá-lo, porém, se o colocamos não é má idéia para aumentar a compatibilidade da página com versões anteriores do navegador.
Transparência para todos os navegadores
Finalizamos este artículo de criar web .com, colocando todos os conhecimentos adquiridos de uma só vez. Para declarar um estilo de transparência que sirva para todos os navegadores simplesmente temos que colocar as distintas declarações de estilos todas juntas. Cada browser interpretará a que conhece.
.transparencia {
opacity: .25;
-moz-opacity: .25;
filter:alpha(opacity=25);
float: left;
}