
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