efeitos avançados com css

o recurso de css (cascading style sheets, ou folhas de estilo em cascata) é
perfeito para gerar efeitos e formatos impossíveis de se fazer em html.
neste tópico você conhecerá alguns desses efeitos e aprenderá a inserí-los em
suas páginas.
criando elementos com bordas em css
para contornar o conteúdo de sua página, você precisa "cercar" esse conteúdo
usando uma tag <div> contendo instruções em css. veja o código abaixo
(preste atenção na área escrita em vermelho):
<div
style="filter:glow(strength=2,color=red,enabled=1);height:70px">
<h1>
<font color=darkblue face=arial>efeito "glow" <img
src=http://www.criandosite.com.br/actimage.pcs?file=dicas/0008/cs.jpg
width=73 height=60 border=0></font>
</h1>
</div>
a tag <div> contém um atributo style que permite a inclusão de comandos
css diretamente dentro da tag. no caso acima, o comando filter:glow gera
um efeito de borda arredondada em torno de todos os elementos cercados
pelo <div>, sejam eles imagens ou texto.
veja os resultados:
efeito "glow"
você pode selecionar o texto para perceber como o efeito se "comporta" em
diferentes situações. também é possível alterar alguns valores como color
(cor da sombra) e strength (largura do contorno), dentro da tag style.
criando elementos sombreados
para sombrear o conteúdo de sua página, usa-se o mesmo processo visto
acima, apenas mudando-se o atributo do comando css filter. veja o código
abaixo (preste atenção na área escrita em vermelho):
<div
style="filter:shadow(color=000000,direction=60,enabled=10);height:70px">
<h1>
<font color=darkblue face=arial>sombreamento <img
src=http://www.criandosite.com.br/actimage.pcs?file=dicas/0008/cs.jpg
width=73 height=60 border=0></font>
</h1>
</div>
a tag <div> contém um atributo style que permite a inclusão de comandos
css diretamente dentro da tag. no caso acima, o comando filter:shadow
gera um efeito de borda arredondada em torno de todos os elementos
cercados pelo <div>, sejam eles imagens ou texto.
veja os resultados:
sombreamento
você pode selecionar o texto para perceber como o efeito se "comporta" em
diferentes situações. também é possível alterar alguns valores como color
(cor da sombra) e direction (ângulo de direção), dentro da tag style.
criando elementos difusos
para criar um efeito de difusão no conteúdo de sua página, usa-se o mesmo
processo, apenas mudando o atributo do comando css filter. veja o código
abaixo (preste atenção na área escrita em vermelho):
<div
style="filter:blur(strength=10,direction=220,enabled=1);height:70px">
<h1>
<font color=darkblue face=arial>difusão <img
src=http://www.criandosite.com.br/actimage.pcs?file=dicas/0008/cs.jpg
width=73 height=60 border=0></font>
</h1>
</div>
a tag <div> contém um atributo style que permite a inclusão de comandos
css diretamente dentro da tag. no caso acima, o comando filter:blur gera um
efeito de borda arredondada em torno de todos os elementos cercados pelo
<div>, sejam eles imagens ou texto.
veja os resultados:
difusão
você pode selecionar o texto para perceber como o efeito se "comporta" em
diferentes situações. também é possível alterar alguns valores como
strength (intensidade) e direction (ângulo de direção).