Observe a barra de comandos no topo desta página. Ela parece estranha, quase sumida... Agora repare o rótulo colorido "Tutorial DHTML/CSS Edaurelio" logo abaixo da barra à esquerda, está desfocado... Repare também no título desta seção "*FILTROS*" ele apresenta um sombreado e a sua letra R está invertida.
Estes efeitos visuais apareceram pela primeira vez como controles de ActiveX e posteriormente foram incorporados como propriedades de folha de estilo aceitas inicialmente pelo browser Internet Explorer v4.0. Efeitos anteriormente que só poderiam ser criados com aplicativos como o Photoshop em arquivos de imagem agora podem ser usados em qualquer objeto HTML como por exemplos bloco de texto, tabelas, links, bordas, etc e inclusive criar efeitos dinâmicos!! Eles são fáceis de aprender e basicamente sua sintaxe é a seguinte:
<DIV STYLE="filter:nome(parâmetro=valor, parâmetro=valor, etc...)">objeto</DIV>
Onde name define o tipo de filtro, parâmetro define suas propriedades de formatação e valor suas unidades que geralmente são graus, pixels, %, etc. A seguir apresento uma relação de filtros em ordem alfabética, bem como seus parâmetros e alguns exemplos interessantes. Você pode aplicar diversos filtros ao mesmo objeto criando uma variedade de efeitos conforme manda a sua imaginação.
ALPHA
O filtro Alpha, cujo efeito já foi apresentado na barra de comandos acima, cria um efeito de transparência total ou parcial no objeto por ele envolvido de forma que quanto menor for a sua graduação de porcentagem, definida por opacity=% maior será a sua transparência.
PARÂMETROS:
Opacity - Apresenta o grau de transparência do objeto e seu valor refere-se a %. Opacity=100 apresenta um objeto totalmente opaco e opacity=0 um objeto totalmente invisível. FinishOpacity - Define o nível de opacidade e seus valores vão de 0 a 100%. Style - Seus estilos podem ser 0 (uniforme), 1 (linear), 2 (radial) ou 3 Retangular. StartX - Coordenada horizontal para começo do gradiente de opacidade. StartY - Coordenada vertical para começo do gradiente de opacidade. FinishX - Coordenada horizontal para o fim do gradiente de opacidade. FinishX - Coordenada vertical para o fim do gradiente de opacidade.
No exemplo a seguir temos um bloco de texto com fonte preta e diversos graus de opacidade com estilos diferentes.
ALPHA UNIFORME
<SPAN STYLE="font-size: 24pt; font-family: Arial Black; height:1;
filter:Alpha(opacity=20)">ALPHA UNIFORME</SPAN>
ALPHA LINEAR
<SPAN STYLE="font-size: 24pt; font-family: Arial Black; height:1;
filter:Alpha(style=1)">ALPHA LINEAR</SPAN>
ALPHA RADIAL INTERNO
<SPAN STYLE="font-size: 24pt; font-family: Arial Black; height:1;
filter:Alpha(opacity=0, FinishOpacity=50, style=2)">ALPHA RADIAL INTERNO</SPAN>
ALPHA RADIAL EXTERNO
<SPAN STYLE="font-size: 24pt; font-family: Arial Black; height:1;
filter:Alpha(opacity=60, style=2)">ALPHA RADIAL EXTERNO</SPAN>
Agora o mesmo efeito alpha aplicado a uma tabela, primeiro apresentando a tabela normal, depois ela mesma envolvida pelo filtro:
|
|
||||||||||||
|
|
TABELA COM FILTER:ALPHA(OPACITY=50, STYLE=2)
|
|
||||||||||||
|
|
A sintaxe simplificada da tabela é esta:
|
<DIV STYLE="filter:alpha(opacity=20, style=2); height:1"> <TABLE> ... </TABLE> </DIV> |
BLUR
Este filtro cria um efeito difuso diminuindo a definição das bordas do objeto. Sua sombra apresenta a mesma cor do objeto porém com uma textura mais atenuada.
PARÂMETROS:
add - Parâmetro booleano, 1 Sombreamento nítido, 0 Sombreamento difuso. direction - Define o ângulo em que o efeito deve acontecer. Seu valor vai de 0 (topo) em incrementos de 45 graus até 315 graus. strength - Define o comprimento que o efeito deve ter. Default = 5.
Figura e texto SEM o filtro.
Figura e texto COM o filtro.
<SPAN STYLE="height:1; filter: Blur(Direction=45, add=0, Strength=3)"><FONT COLOR="blue">
<IMG SRC="imagens/cs05g.gif">Figura e texto</FONT> <B>COM</B><FONT COLOR="red"> o filtro.</FONT></SPAN>
No exemplo acima envolvi uma imagem e um texto de três cores. Repare que a difusão acompanha as cores do texto. Para aprender mais sobre este filtro vá para [Efeito Blur]
CHROMA
Este filtro torna uma cor específica do objeto transparente. No exemplo a seguir tenho a imagem home1.gif cujo fundo branco cria um contraste com o background da página. Porém com o filtro chroma posso neutralizar o fundo branco (#FFFFFF) da imagem simulando uma imagem GIF de fundo transparente.
PARÂMETROS:
color - Define uma cor do código RGB que sofrerá o efeito de transparência.
 <IMG SRC="imagens/home1.gif"> |
<SPAN STYLE="filter:chroma(color=FFFFFF); height:1"> <IMG SRC="imagens/home1.gif"></SPAN> |
NOTA: O filtro não funcionará se a cor selecionada para o efeito não existir na figura.
DROPSHADOW
Este filtro cria um eleito de sombra solida no objeto que pode ser direcionada conforme o ângulo desejado. No exemplo a seguir temos a mesma tabela já apresentada no filtro Alpha, porém sem o BGCOLOR (para realçar o efeito deste filtro sobre ela).
PARÂMETROS:
color - Define a cor RGB (#rrggbb) da sombra. Os valores são em hexadecimal. offx - Determina a distância de afastamento em "x" (horizontal), os valores em pixels (px) podem ser positivos ou negativos. offy - Determina a distância de afastamento em "y" (vertical), os valores em pixels (px) podem ser positivos ou negativos. positive - Parâmetro booleano: 1 para sombra positiva. 0 para sombra negativa.
TABELA COM FILTER:DROPSHADOW
|
|
||||||||||||
|
|
Sintaxe simplificada da tabela:
|
<DIV STYLE="filter:dropshadow(color=#1E90FF, offx=-2, offy=-2, positive=1); height:1"> <TABLE> ... </TABLE> </DIV> |
NOTA: Embora esse filtro possa ser aplicado em qualquer objeto, ele apresentará um melhor resultado em fontes ou imagens com fundos transparentes ou vazados. Para aprender mais sobre este filtro vá para [Efeito DropShadow]
FLIPH e FLIPV
Estes dois filtros criam o efeito de imagem invertida no objeto. FlipH inverte no sentido horizontal como um reflexo de espelho e FlipV inverte no sentido vertical como o reflexo na superfície de um lago.
</P ALIGN="center" STYLE="filter:fliph; height:1; font-size:20px; color:#8B008B"> <B>Socorram-me,...</B>
Socorram-me, subi no ônibus em Marrocos.
<P ALIGN="center" STYLE="filter:flipv; height:1; font-size:20px; color:#8A2BE2"> <B>Socorram-me,...</B>
Socorram-me, subi no ônibus em Marrocos.
GLOW
O filtro Glow cria um efeito de borramento nos contornos do objeto. Este borramento pode assumir uma cor diferente do objeto. Repare que no exemplo a seguir o objeto (uma tabela) possui bordas brancas com um texto preto, e no entanto seu borramento é azul (color=#1E90FF).
PARÂMETROS:
color - Define a cor RGB (#rrggbb) do borramento. strength - Determina a distância de afastamento do efeito. Seu valor é em pixels (px) e pode ser valor positivo (borramento externo) ou negativo (borramento interno).
TABELA COM FILTER:GLOW
|
|
||||||||||||
|
|
Sintaxe simplificada da tabela:
|
<DIV STYLE="filter:glow(color=#1E90FF strength=10); height:1"> <TABLE> ... </TABLE> </DIV> |
Para aprender mais sobre este filtro vá para [Efeito Glow]
GRAY
Este filtro anula os efeitos de cor do objeto apresentando-o em tons de cinza. Até onde sei este filtro não possui parâmetros e a sintaxe é bem simples.
 <IMG SRC="imagens/anjodapaz.jpg"> |
<SPAN STYLE="filter:gray; height:1"> <IMG SRC="imagens/anjodapaz.jpg"></SPAN> |
INVERT
Este filtro tem a propriedade de inverter a matriz de cores do objeto criando um efeito semelhante ao negativo de uma fotografia.
<IMG SRC="imagens/anjodapaz.jpg"> |
<SPAN STYLE="filter:invert; height:1"> <IMG SRC="imagens/anjodapaz.jpg"></SPAN> |
MOTION BLUR
Este filtro cria um efeito de movimento no objeto.
PARÂMETROS:
strenght - Define o comprimento do efeito, seu valor é em pixels. direction - Define o grau em que o efeito deve ocorrer. Ele pode ser de 0 a 360 graus. progid:DXImageTransform.Microsoft - Parâmetros proprietários da Microsoft.
No exemplo a seguir há uma imagem normal e mais duas com o efeito aplicado dentro de uma tabela. Todas elas foram centralizadas dentro de suas respectivas células. Repare que as imagens com efeito Motion Blur sofreram uma deslocação no sentido do movimento que o efeito causou. Isso acontece porque agora o efeito passa a fazer parte da imagem alterando o seu centro de equilíbrio.
| 1 | 2 | 3 |
|---|---|---|
 |
|
|
Sintaxe da célula 3
<SPAN STYLE="HEIGHT:1; filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=40, direction=30)">
<IMG SRC="imagens/gal001.gif">
</SPAN>
WAVE
Cria um efeito de ondulação no objeto.
PARÂMETROS:
add - Parâmetro booleano: 1 cria o efeito wave, 0 anula o efeito. freq - Define o número de ondulações que o objeto deve sofrer. lightstrength - Define a intensidade de ondulação luminosa. Seu valor vai de 0 a 100%. phase - Define a freqüência da ondulação, seu valor vai de 0 a 360graus. strength - Define a intensidade da ondulação da imagem.
<IMG SRC="imagens/anjodapaz.jpg">
<SPAN STYLE="filter:wave(freq=13, lightstrength=30); height:1">
<IMG SRC="imagens/anjodapaz.jpg"></SPAN>
Para aprender mais sobre este filtro vá para [Efeito Wave]
XRAY
Este filtro cria um efeito semelhante ao filtro Gray transformando as cores do objeto em tons de cinza. Ainda não sei quais as diferenças entre esses dois filtros.
|
|
