Tabela com filtro de opacidade e filtro Íris em imagem

Para essa lição escolhemos um script bastante simples. O objetivo principal é testar as opções do filtro de Transição Íris. Veja o modelo ilustrativo.

Consulte o ANEXO 07 para compreender, testar e escolher o estilo do efeito a ser aplicado na sua formatação.

Material: 01 background principal, uma imagem principal (moldura ou tag), um texto e um arquivo de som.

1 - Abra uma nova mensagem, clique na aba Origem, delete tudo o que lá estiver, copie e cole o seguinte código:



2 - Digite nos lugares indicados do background e da imagem principal. Caso queira, aplique o background principal pela aba Editar (menu Formatar/Plano de fundo/imagem).

3 - Se achar conveniente, altere o grau de opacidade da tabela no tag STYLE, em .tab1

FILTER: alpha(opacity=90);

4 - No script, faça os testes mudando o estilo do filtro e o motion

pic.style.filter="progid:DXImageTransform.Microsoft.Iris(duration=3, enabled=1, irisStyle=diamond, motion=out)"

Nota. Acompanhe sempre pela aba Visualizar cada alteração que fizer.

5 - Faça todas as alterações necessárias para adequar à sua formatação (mude as cores, espessura das bordas, estilo de moldura, etc.).
A largura da caixa de texto (WIDTH: 500px) é exemplificativa. Você poderá aumentá-la ou diminuí-la.
Poderá também aumentar o valor do PADDING-TOP: 10px para afastar mais o texto da parte inferior da imagem.

6 - Na Origem, digite a sua mensagem de rodapé no local especificado no script.

7 - Na aba Editar, digite (ou cole) o texto e aplique o som.

Antes de enviar seu trabalho à lista, confira o tamanho da mensagem (em kb) e aplique algum recurso para o banner não atrapalhar.

Muito lindinho o efeito desse filtro, não achou?

Helena Monteiro e Zoia Sales Cavalcante