Transparências utilizando apenas CSS

Por Bruno Carlos

Fevereiro 9, 2008

Dar transparência a uma imagem utilizando CSS não é algo complexo, para isso utiliza-se a propriedade opacity:x, no caso do Firefox, e filter:alpha(opacity=x) no caso do IE, vamos ainda utilizar -khtml-opacity:x, para determinadas versões do Safari/Konqueror e -moz-opacity, para versões do Mozilla/Firebird.
Apesar de não ser CSS standard, funciona em praticamente todos os browsers mais modernos, para além disso faz parte da sintaxe das CSS versão3 (opacity:x).

Exemplo 1 - Imagem com Transparência

Imagem sem transparência:

Imagem com Transparência
heroes 1

HTML

<img class="linkopacity" src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image1.jpg" alt="heroes 1" />

CSS

img.linkopacity {
	filter:alpha(opacity=50);-moz-opacity: 0.5;
	opacity: 0.5;
	-khtml-opacity: 0.5;
	width:120px;
	height:90px;
	border:1px solid black;
}

Utilizando as propriedades -moz-opacity, opacity e -khtml-opacity os valores podem variar entre 0.0 e 1.0. Quanto mais se aproxima do zero mais transparente fica o objecto.
Na propriedade filter:alpha(opacity:x) os valores variam entre 0 e 100. Quando mais se aproxima do zero mais transparente fica o objecto.

Exemplo 2 - Tranparência da Imagem com o Efeito Mouseover

Mova o cursor do rato sobre as 3 imagens apresentadas:

Transparência da imagem 1 Transparência da imagem 3

HTML

<a class="linkopacity" href="http://l.yimg.com/img.tv.yahoo.com/tv/us/img/site/22/73/0000042273_20070824163919.jpg">
	<img src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image1.jpg" title="Imagem 1."></a>
<a class="linkopacity" href="http://l.yimg.com/img.tv.yahoo.com/tv/us/img/site/22/78/0000042278_20070824163934.jpg">
	<img src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image2.jpg" title="Imagem 2."></a>
<a class="linkopacity"   href="http://www.guiadeseriados.com.br/wp-content/photos/ew_heroes4.jpg">
	<img src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image3.jpg" title="Imagem 3"></a>

CSS

a.linkopacity img,
img.linkopacity {

	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
	-khtml-opacity: 0.5;
	width:120px;
	height:90px;
	border:1px solid black;
}

a.linkopacity:hover img {
	filter:alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
	-khtml-opacity: 1.0;
}

Neste caso introduzimos apenas a propriedade onmouseover (:hover). Partimos de 3 imagens com transparência e quando passamos o rato por cima retiramos a transparência, ou seja colocamos os valores no máximo (1.0 e 100).

Exemplo 3 - Texto e Imagem de Fundo

Neste exemplo vamos juntar os exemplos anteriores e adicionar texto para obter algo um pouco mais composto.

Link para o Exemplo 3

HTML

<div id="group">
	<h1 id="textopacity">
		Heroes
	</h1>
	<div align="center">
		<a class="linkopacity" href="http://l.yimg.com/img.tv.yahoo.com/tv/us/img/site/22/73/0000042273_20070824163919.jpg"><img src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image1.jpg" title="Click to see easy opacity hover code."></a>

		<a class="linkopacity" href="http://l.yimg.com/img.tv.yahoo.com/tv/us/img/site/22/78/0000042278_20070824163934.jpg"><img src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image1.jpg" title="It's simple code. Click it."></a>

		<a class="linkopacity" href="http://www.guiadeseriados.com.br/wp-content/photos/ew_heroes4.jpg"><img src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image3.jpg" title="You know you want it. Click it."></a>
	</div>
</div>

CSS

a.linkopacity img,
img.linkopacity {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
	-khtml-opacity: 0.5;
	width:120;
	height:90;
	border:1px solid black;
}
a.linkopacity:hover img {
	filter:alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
	-khtml-opacity: 1.0;
}

div#group{
	width:400px;
	height:300px;
	background:url(http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/heroes.jpg) repeat;
}

h1#textopacity{
	color:white;
	width:100%;
	background:url(http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/heroes.jpg);
	filter:alpha(opacity=70);
	-moz-opacity:.70;
	opacity:.70;
	font-size:42px;
	line-height:2.5em;
	text-align:center;
}

Neste caso utilizamos uma imagem de fundo sem transparência, no entanto adicionamos texto com transparência adicionando as 3 imagens que apresentámos no exemplo 2. Dando um aspecto final bastante “cool”.

HTML com os diferentes exemplos apresentados.

Partilhar esta Entrada