LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Web Standards

Feed da seção Web Standards

Newsletter de Web Standards


Terça-feira, 19/10/2004 - 16:00 - Por Mauricio Samy
Seções relacionadas:

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 style="....>;

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:

flor

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!

Veja o filtro Alpha aplicado

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 é:

Veja o filtro Blur aplicado

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

Observe um exemplo:

style="filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#ffffff, endColorstr=#00ffcc)" >

..................

Veja o filtro gradient aplicado como fundo de uma tabela

O filtro gradient aplicado em uma página web

Você pode aplicar um fundo gradient em toda sua página web:-) Basta declarar o filtro na tag

Observe um exemplo:

style="filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#ffffff, endColorstr=#00ffcc)" >
..................

Veja o filtro gradient aplicado como fundo de uma página web

Palavras finais

Ao decidir usar estes filtros no seu projeto web leve em consideração que êles funcionam somente no Internet Explorer.

Assim, esteja seguro de que sua audiência usa este browser e de que eventualmente a visualização em outros browsers não ficará comprometida pela ausência do efeito projetado com o filtro.

E, que seu código HTML não será validadado pelo W3C e em consequência não conforme as Web Standards.

Descubra a versatilidade das CSS
Projete conforme as Web Standards
.

Todos os artigos de Mauricio Samy

4 comentários publicados

  • 1. legalzin hein

    Terça-feira, 19/10/2004, por Thiago Pereira

    interessante isso hein

    Responder comentário
  • 2. Útil

    Segunda-feira, 01/11/2004, por Shivans

    Todas as publicações do nosso amigo Mauricio são bem-vindas.

    Responder comentário
  • 3. Impressionante.

    Quarta-feira, 12/01/2005, por Wagner Braga

    Fiquei surpreso. Realmente nao sabia que css oferecia esse tipo de recurso.

    Responder comentário
  • 4. Problemas na sintaxe?

    Quinta-feira, 22/12/2005, por Guacira Rocha

    Caro Mauricio, tenho até mesmo copiado e colado a sintaxe de alguns filtros que você apresenta, mas não rola de jeito nenhum. Quando pedi a verificação do css pelo Validator, deu mais erro do que antes da modificação sugerida por você. Estou desolada. Como complemento às minhas questões, algo está me devastando: há alguma forma de preparar uma página "sem scroll" com css, de maneira a ser aceita pelo validator? Aguardo seu retorno ansiosamente.
    Em tempo: parabéns pela dádiva de ter pessoas como você dispostas a ensinar, sem cobrar nada em troca. Deus te abençõe, amigo! Guacira Rocha

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Mauricio Samy é Engenheiro Civil formado pelo IME, ex-Professor de Geometria Descritiva e Matemática, autodidata em CSS e administrador do site www.maujor.com.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.