Home Tutoriais Desenvolvimento 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.

Nota:  É bom comentar que em versões antigas de Firefox, e produtos derivados de Mozilla, este atributo não funcionava. Há anos que já está integrado no navegador e funciona sem problemas, porém durante um tempo tínhamos que utilizar outro atributo próprio de Mozilla.

-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;
}

Fonte: http://www.criarweb.com/artigos/opacidade-css.html

   

Leave a Reply

This blog is kept spam free by WP-SpamFree.