Feed

14 maio 2008

Propriedade de cores: "opacity"

Propriedade de cores: "opacity"

A propriedade de opacidade do CSS3 pode ser usada em cima de imagens ou fundos escuros para que possamos destacar algum outro conteúdo, como textos, formulários ou menus.


Resultado final
exemploOpacity1

Como a maioria das propriedades do CSS3, essa também ainda não funciona nos navegadores mais antigos ou em outros que não seguem o padão W3C, por isso não é muito recomendado em alguns casos. Veja a lista de compatibilidades abaixo:


Funciona:
» Firefox 2 e 3beta4
» Safari 3.0 win e Safari 3.1 win
» Opera 9.5beta

Não funciona:
» IE 5.5, IE 6 e IE 7 (com filtros)
» IE 8beta1
» Konqueror 3.5.7


Essa propriedade pode ser aplicada à todos os elementos da página. Seu valor fica entre 0.0 e 1.0 sendo 0.0 completamente transparente.


Tutorial:

Agora mostrarei um exemplo simples. O arquivo fonte pode ser baixado aqui (arquivo .zip).


Código HTML
<div id="container">

  <div class="opacidade" />

  <div class="txt">
     <h1>Opacidade CSS3</h1>

     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sapien odio, elementum ut, bibendum sed, laoreet vel, tortor. Nulla sed dui et lorem pellentesque varius.</p>
  </div>

</div>

O código HTML deve posuir uma div vazia para o efeito de opacidade e a div do conteúdo ("txt") com o que você quiser dentro. Criei a div "container" para melhor visualização do conteúdo.


O CSS
.opacidade {
background:#FFF;
bottom:10px;
height:118px;
padding:10px;
position:absolute;
right:10px;
width:174px;
}

.opacidade {
opacity:0.7;
filter:alpha(opacity=70);
-moz-opacity: 0.70;
}

.txt {
background:transparent;
padding:10px;
position:absolute;
right:0;
top:0;
}

No CSS, dexei os estilos para o efeito da transparência em um bloco separado apenas para o código ficar mais organizado. Mas isso não é obrigatório. A propriedade "opacity" funciona para os navegadores que seguem os padrões W3C; o filtro criado é para que funcione nos navegadores IE e seu valor varia de 0 à 100; e "-moz-opacity" é para os navegadores Mozilla e seus valores vão de 0.00 à 0.100.


Já não é difícil achar esse efeito nos sites atuais, vi esse efeito mais usado com bibliotecas Ajax em galerias ou alertas.


Aqui detalhei apenas um jeito de se fazer esse efeito. Os outros que eu conheço é usando uma imagem png, ou já fazer a imagem com o quadrado transparente. Nenhuma delas está errada, mas usando imagem png tem que fazer alguns hacks para que funcione em todos os navegadores.


Esse efeito é muito bom para compor o design da página, mas não com um uso exagerado.



;)

Fontes: Tabela de compatibilidades CSS [en] | CSS3 Color Module – W3C [en]

3 comentários:

  1. Ia usar esse recurso no último freela que eu fiz e acabei desistindo, meio com medo mesmo! heheh Mas arrependi de não ter usado pq dá um efeito bacana.

    E por sinal, com seu post vi que estava me esquecendo de algo :P

    Valeu demais!

    ResponderExcluir
  2. Nossa, já apanhei muito com opacity até achar uma maneira que funcione em todos os browsers. O único problema que enfrentava era uma terrível lentidão no maléfico IE6.

    Só não posto o link do site aqui porque eu realmente não sei, não achei no google e nem a empresa aonde eu trabalho disponibilizou :s
    mas tenho o print da home em http://www.flickr.com/photos/gustavoribeiro/2281463791/in/set-72157602263393914/

    bjo.

    ResponderExcluir
  3. respondendo aqui o do flickr!

    na verdade não, é o entorno todo do site... legal seria se eu tivesse a shot da interna que da para ver beeem melhor. tenho aqui os arquivos, sempre salvo, vou ver se separo a parte do opacity e te mando.

    ResponderExcluir