Outro recurso muito interessante que chegou “as mãos” dos desenvolvedores é a possibilidade de deixar um elemento com certa transparência para dar um “ar” de desenvolvimento moderno.
Lembrando que esse é um recurso do CSS3 que está em desenvolvimento e por isso alguns navegadores podem não funcionar corretamente.
IMPORTANTE: ao aplicar a transparência em um elemento, tudo o que estiver “dentro” desse elemento também será afetado pelo eleito.
Bom, vamos lá:
A sintaxe para opacidade é intuitiva, porém deve se observar um detalhe, acompanhe abaixo:
opacity: 0.5;
Onde 0.5 significam 50%, ou seja, os valores podem ser 0 (0%) até 1 (100%), simples, não? Mas (e quando tem um, prepare-se) alguns navegadores ainda não interpretam corretamente apenas essa propriedade, dessa forma é necessários utilizar alguns hacks para garantir que funciona em um numero maior de (versões de) navegadores.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Transparências</title>
</head>
<body>
<div id="transp">
</div><!-- #transp -->
</body>
</html>
CSS:
<style type="text/css">
#transp {
width: 350px;
height: 100px;
display: block;
background-color: #000;
/* PARA FUNCIONAR EM INTERNET EXPLORER 8 E 9 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* CERTIFICAR QUE FUNCIONE EM OUTRAS VERSÕES DO INTERNET EXPLORER */
filter: alpha(opacity=50);
/* VERSÕES ANTIGA DO MOZILLA FIREFOX */
-moz-opacity:0.5;
/* SAFARI/OPERA */
-khtml-opacity: 0.5;
opacity: 0.5;
}
</style>
Resultado:
Como é possível observar no resultado, a cor de fundo preta ficou com uma transparência de 50%.
Também funciona em imagens, acompanhe o exemplo abaixo:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Transparências</title>
</head>
<body>
<img src="lighthouse.jpg" title="exemplo sem transparência" alt="exemplo sem transparência" />
<img id="transp" src="lighthouse.jpg" title="exemplo com transparência" alt="exemplo com transparência" />
</body>
</html>
CSS:
<style type="text/css">
img {
float: left;
display: block;
margin-right: 10px;
}
#transp {
/* PARA FUNCIONAR EM INTERNET EXPLORER 8 E 9 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* CERTIFICAR QUE FUNCIONE EM OUTRAS VERSÕES DO INTERNET EXPLORER */
filter: alpha(opacity=50);
/* VERSÕES ANTIGA DO MOZILLA FIREFOX */
-moz-opacity:0.5;
/* SAFARI/OPERA */
-khtml-opacity: 0.5;
opacity: 0.5;
}
</style>
Dúvidas nos comentários e até a próxima.
Deixe uma resposta