Podemos utilizar transparência (opacidade) em sites utilizando css, evitando assim a utilização de uma imagem png. O grande problema da utilização é a interpretação nos diversos browsers, porém pode ser facilmente resolvido criando mais 2 linhas de css.
Com o código abaixo, é possível aplicar transparência em imagens ou cores. São necessárias declarações CSS distintas para que todos os browsers interpretem corretamente a transparência, as declarações não interferem uma nas outras.
<style type="text/css">
<!--
img {
opacity:0.10;/* propriedade padrão - Fire fox e Chrome*/
filter: alpha(opacity=10);/*Internet explorer*/
-moz-opacity:0.1; /*suporte a browsers antigos como o Netscape}
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:144px;
top:85px;
width:151px;
height:287px;
background-color: #FFFFFF;
opacity:0.10;/* propriedade padrão - Fire fox e Chrome*/
filter: alpha(opacity=10);/*Internet explorer*/
-moz-opacity:0.1; /*suporte a browsers antigos como o Netscape*/}
}
Show de bola!
Abraço
Gosteey ‘
muito boa suas dicas !
Ótima dica, apesar do navegador Netscape ser antigo eu tenho menos problemas com ele do que o IE8, não querendo ser muito exagerado mas em funcionalidades comuns de CSS tive até menos problemas do que o IE11. Eu acredito que ter preocupações com navegadores antigos seja importante para um desenvolvedor web, por que se tem um grande proveito de conhecimento e facilita na hora de resolver problemas atuais, pois “nada se cria, tudo se cópia” .
OBS: estou acessando esta página do “Netscape” sem problemas, mas no exemplo de funcionalidade do código não está com a transparência ativa, é preciso colocar um valor maior que 0.1 (0.2 , 0.3 , …).
fernandocontatos2014@gmail.com