Banner propaganda da DevMedia - Cursos de desenvolvimento web

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.

screenshot de uma flor com um texto

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

screenshot de uma flor com um texto sobre ela

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:

screenshot mostrando o fundo alfa

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.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo