Efeito de filtro alpha com CSS

Publicado em: 16/06/2004

Introdução

Este tutorial mostra uma técnica bastante simples para se reproduzir com CSS puro, os efeitos de filtro alpha, que quando definidos sem uso das CSS, ficam restritos a serem visualizados em determinados browser, limitando ou mesmo impedindo com isso seu uso irrestrito para projetos web.

Ao final da leitura deste tutorial, você estará capacitado a reproduzir esse efeito e mais ainda, com algumas simples adaptações obter outros efeitos similares e tudo de acordo com as WebStandards, validado pela W3C e visualizados em todos os browsers com suporte para CSS.

O filtro alpha para o Internet Explorer

A MS desenvolveu vários tipos de filtros (entre eles o filtro alpha), que são visualizados em browsers Internet Explorer versão 5.5 ou superior.

Se toda a sua audiência usa este browser, o filtro da MS poderá ser usado, mas com a desvantagem de que sua folha de estilo não será validada pelo W3C, e em consequência não conforme com as Web Standards.

Veja um exemplo do filtro alpha da MS, e o código correspondente.

O filtro alpha para browser com tecnologia mozilla

A Mozilla desenvolveu um filtro alpha, que é visualizado em browser que adotam a tecnologia mozilla.

Se toda a sua audiência usa este browser, o filtro poderá ser usado, mas com a desvantagem de que sua folha de estilo não será validada pelo W3C, e em consequência não conforme com as Web Standards.

Veja um exemplo do filtro alpha mozilla, e o código correspondente.

O filtro alpha CSS

Com CSS é possível simular perfeitamente um filtro alpha, que é visualizado em todos os browsers que suportam CSS.

Assim, use o filtro com CSS, pois você terá a sua folha de estilo validada pelo W3C, e em consequência conforme com as Web Standards.

O HTML para o filtro

A marcação HTML é bem simples:

• Uma DIV para conter a imagem;
• Uma DIV para o filtro, dentro da DIV imagem.

<div id="imagem">
<img src="flor.jpg" alt="flor" />
<div id="filtro">
Técnica  de filtro alpha com CSS puro!
</div>
</div>

O HTML acima é renderizado conforme mostrado a seguir.

Colori a divisão #imagem em cinza claro e a DIV texto em amarelo claro para efeito de visualização.

As regras CSS para colocar o filtro sobre a figura

#imagem {position:relative;}

E, as regras de estilo para a divisão #filtro:

Notar que o posicionamento da DIV texto é feito em relação a DIV imagem e não a viewport.

#filtro {
position:absolute;
width: 160px;
height:100px;
top:90px;
left:60px;
font: bold 14px arial, sans-serif;
color:#333333;
}

Com estas regras observe como o browser renderiza o HTML

As regras CSS

Para obter o efeito final, declaramos a largura da divisão #imagem, igual a largura da imagem (neste tutorial: a flor):

#imagem {
width:280px ; /* igual a largura da imagem */
position:relative; /* esta regra cria a 
referência para posicionar o filtro */
}

E, nas regras de estilo para a divisão #filtro acresentamos uma imagem como background.
Está é uma imagem especial que vai simular o efeito do filtro.

#filtro {
position:absolute;
width: 160px;
height:100px;
top:90px;
left:60px;
font: bold 14px arial, sans-serif;
color:#333333;

/* É na regra CSS para o background que está o FILTRO! */
/* O filtro é a imagem alpha.gif */	
background:transparent url(alpha.gif) center repeat;
}

O filtro

O "truque" para obter o efeito reside na imagem de fundo para a divisão #filtro.

Imagem esta que Todd Fahrner chamou de halfscreen, que traduzido ao pé da letra resulta em meia-tela e que eu vou chamar de imagem ou fundo alpha.

A imagem alpha é formada por pixels que se alternam em transparente e opaco. Imagine um tabuleiro de xadrez, onde as "casas" pretas sejam pixel colorido (opaco) e as brancas transparentes.

Veja a figura abaixo ilustrando a explicação:

Considerações finais

Como você já deve ter concluído o filtro alpha com CSS resume-se a imagem alpha. Mudando a cor dos pixels, você obtém cores diferentes para o filtro.

Sugiro alterar o formato de montagem (tabuleiro de xadrez) da imagem alpha para observar o efeito final.

Por exemplo: Tente com uma alpha tipo scan lines ou usar 4px ao invés de 1 px e uma variedade sem fim de experimentos.

Simples,...... mas genial! :-)

veja um exemplo do filtro alpha, com CSS e o código correspondente.