Feeds
Newsletter
Aplicando filtros para o Internet Explorer
Mostraremos as técnicas CSS para aplicação de alguns filtros, cujo efeito é exibido somente em browsers Internet Explorer. Ao final da leitura deste artigo você estará em condições de empregar estilo inline em elementos HTML obter alguns efeitos bem interessantes, visualizáveis no IE.
Os filtros disponíveis
Estão disponíveis para projetos Web uma série de filtros desenvolvidos pela Microsoft® para aplicação em documentos a serem visualizados nos browsers por ela desenvolvidos, notadamente o Internet Explorer.
Neste artigo mostrarei o uso e efeitos de alguns destes filtros. Para uma visão completa de todos os filtros, visite o site da MS®.
A sintaxe para aplicação dos filtros
Para aplicar o filtro em um elemento HTML usa-se uma declaração de estilo "inline" (O que é estilo inline?). E a sintaxe da declaração é conforme mostrada a seguir:
Onde:
elemento: é
o elemento HTML ao qual será aplicado o filtro. Por exemplo:
uma imagem
progid:DXImageTransform.Microsoft: string padrão para chamada de um filtro;
filtername: nome do filtro que será aplicado;
(sProperties): variáveis que definem os efeitos do filtro.
O filtro Alpha
Este é um conhecido efeito, que consiste basicamente na aplicação de trasparência a um elemento HTML.
Vamos aplicá-lo a uma imagem. Usarei a imagem abaixo para aplicação dos filtros deste tutorial:
Acompanhe na listagem a seguir os passos para aplicação do filtro:
elemento a aplicar o filtro: uma imagem (usei a imagem denominada flor.jpg);
filtername: Alpha (este é o nome do filtro nomeado pela MS®);
(sProperties): opacity= (esta é a variável a declarar para o filtro). opacity pode assumir valores desde 0 (zero) que define transparência total até 100 (cem) que define opacidade total.
E finalmente, código HTML para aplicar o filtro alpha, com transparência de 40% é:
Nota: Nos códigos HTML para aplicação dos filtros usarei apenas o elemento e o filtro, omitindo os atributos dos elementos. Observe no código acima que não declarei os atributos width, height e alt da imagem. Não os deixe de declarar nos seus documentos!
O filtro Blur
Este é também um conhecido efeito e que consiste na aplicação de desfoque a um elemento HTML, notadamente a uma imagem. Para este filtro temos:
filtername: Blur (este é o nome do filtro nomeado pela MS®);
(sProperties): pixelradius= (esta é a variável a declarar para o filtro)
O código HTML para aplicar o filtro blur, com pixelradius=3 é:
O filtro MotionBlur
Esta é uma variação do efeito Blur e que consiste na aplicação de uma espécie de sombra desfocada simulando movimento em um elemento HTML, notadamente a uma imagem, e cuja direção e espessura da sombra são declaradas nas váriaveis do filtro.
Para este filtro temos:
filtername: MotionBlur (este é o nome do filtro nomeado pela MS®);
(sProperties): strength= (esta é a variável que controla a espessura da sombra) e direction= (esta é a variável que controla a direção da sombra)
Nota: O número declarado para a variável diretion expressa o numero de graus para onde está a sombra em uma variação de 0 a 360 graus.
Assim: 0 graus - sombra em cima, 90 graus - sombra à direita, 180 graus sombra embaixo, 270 sombra à esquerda.
E claro, você pode usar qualquer valor entre 0 e 360. Faça experiências.
O código HTML para aplicar o filtro Motion Blur, com strength=13, direction=310 é:
Veja o filtro MotionBlur aplicado
O filtro BasicImage - invert
Este é um efeito de "inversão de cores" aplicado a uma imagem. Para este filtro temos:
filtername: BasicImage (este é o nome do filtro nomeado pela MS®);
(sProperties): invert= (esta é a variável que controla a aplicação do filtro podendo assumir os valores 1 - filtro aplicado ou 0 - sem filtro).
O código HTML para aplicar o filtro BasicImage, com invert=1 é:
Veja o filtro BasicImage - invert aplicado
O filtro BasicImage - xray
Este é um efeito de "raio-x" aplicado a uma imagem. Para este filtro temos:
filtername: BasicImage (este é o nome do filtro nomeado pela MS®);
(sProperties): xray= (esta é a variável que controla a aplicação do filtro podendo assumir os valores 1- filtro aplicado ou 0 - sem filtro).
O código HTML para aplicar o filtro BasicImage, com xray=1 é:
Veja o filtro BasicImage xray aplicado
O filtro BasicImage - grayscale
Este é um efeito de "tons de cinza " aplicado a uma imagem. Para este filtro temos:
filtername: BasicImage (este é o nome do filtro nomeado pela MS®);
(sProperties): grayscale= (esta é a variável que controla a aplicação do filtro podendo assumir os valores 1- filtro aplicado ou 0 - sem filtro).
O código HTML para aplicar o filtro BasicImage, com grayscale=1 é:
Veja o filtro BasicImage - grayscale aplicado
O filtro BasicImage - rotation
Este é um efeito que rotaciona uma imagem. Para este filtro temos:
filtername: BasicImage (este é o nome do filtro nomeado pela MS®);
(sProperties): rotation= (esta é a variável que controla a rotação da imagem).
O código HTML para aplicar o filtro BasicImage, com rotation=1 é:
Veja o filtro BasicImage - rotation aplicado
O filtro gradient
Este é um efeito bastante conhecido e muito interessante que aplica um gradiente de cores em um elemento HTML qualquer que tenha suas dimensões (largura e altura) previamente definidas..
Para este filtro temos:
filtername: gradient (este é o nome do filtro nomeado pela MS®);
(sProperties): startColorstr=
(esta é a variável que controla a cor de início
do gradiente);
endColorstr= (esta é a variável que controla a cor
de fim do gradiente).
O código HTML para aplicar o filtro gradient em uma div de 300px x 300px é:
Veja o filtro gradient aplicado
O filtro gradient aplicado como fundo de uma tabela
Você pode aplicar um fundo gradient em suas tabelas! :-) Basta declarar o filtro na tag
Thiago Pereira
Wagner Braga
