http://www.lucianosimas.com.br/blog/wp-content/themes/wordpress-brown
24/10

Transparência com CSS

4

css transparentePodemos 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*/}

}

demonstração

deixe seu comentário

Artigos Relacionados

4 Comentários para “Transparência com CSS”

  1. 1
    ALLAN DE ALMEIDA GONTIJO . Comenta:

    Show de bola!
    Abraço

  2. 2
    Dalisson Comenta:

    Gosteey ‘

  3. 3
    ganhar curtidas Comenta:

    muito boa suas dicas !

  4. 4
    Fernando Comenta:

    Ó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

Deixe sua opinião, informação ou dúvida sobre o assunto

Comentar