Agora vamos entrar na área de posicionamento de objetos da folha de estilo para aprender um efeito novo e interessante. O que é um objeto? Objeto é todo elemento envolvido por uma tag, como por exemplo um texto, uma imagem, um link... O título Fonte Tridimensional nada mais é que três camadas de objetos sobrepostos, ou seja, três frases iguais porém com cores e alinhamentos diferentes.

Fonte Tridimensional

Fonte Tridimensional

Fonte Tridimensional

Sua sobreposição é possível devido a propriedades de posicionamento position, top e left. Position está configurada com o valor absolute que define uma posição fixa no monitor. Top será a distância que o bloco terá da borda superior (de seu monitor) e left a distância da borda esquerda. Os valores top/left estão em pixels(px) Então a sintaxe ficará assim:

<DIV STYLE="position:absolute; top:80; left:196; font-family:arial; color:000000; font-size:45">Fonte Tridimensional</DIV> <DIV STYLE="position:absolute; top:82; left:198; font-family:arial; color:daa520; font-size:45">Fonte Tridimensional</DIV> <DIV STYLE="position:absolute; top:84; left:200; font-family:arial; color:228b22; font-size:45">Fonte Tridimensional</DIV>

Observe que os valores de top (80, 82 e 84) e left (196, 198 e 200), criam um ligeiro deslocamento de cada camada para baixo e para a direita. É esse deslocamento que irá criar o efeito tridimensional da fonte. Para alterar o ângulo de inclinação basta manipular esses valores. A ordem de sobreposição obedece a ordem da sintaxe, isso é, o objeto que vem primeiro será sobreposto pelos que vem depois, se você inverter as posições o mesmo ocorrerá no efeito visual.

Bom..., nem tudo é um mar de rosas para o webmaster. O problema do posicionamento de objetos com o position:absolute está nas diversas resoluções de monitores que existem por aí. Por isso aconselho usar esse recurso sempre no topo da página, assim ela permanecerá, mais ou menos, no local que você estipulou em monitores com resoluções diferentes. Como cerca de 90% dos monitores são de resolução 800 por 600 pixels aconselho usa-la como referência.

Uma vantagem é que se você for criar um arquivo gif com essas dimensões ele ocuparia, pelo menos, uns 8.000 bytes de tamanho enquanto que pela forma de posicionamento de objetos ele ocuparia seus reles 400 bytes, ou seja, 20 vezes menor. Algo a se considerar.

NOTA: O browser Netscape v4.51 não aceita o posicionamento de objetos. Já os browseres IE v5.5 e o Opera v5.02 aceitam esse recurso perfeitamente.

Para aprender mais sobre textos tridimensionais, vá para:

Método Embedding

 

<span> ... </span>

Ênfase definida por folha de estilos. O texto marcado com este elemento se apresentará na tela de acordo com as propriedades de estilo (cor, fonte, tamanho, estilo, sublinhado, background, etc.) definidas em uma folha de estilos. No exemplo abaixo estou usando a tag SPAN para aplicar uma cor de fundo às fontes:

<SPAN style="background:#9acd32"><h2>Êxito</h2></SPAN>

Êxito

Todo aquele que pretende realizar um projeto, para obter o mais completo êxito, deve começar por convencer-se de que logrará o que deseja; deve ter a determinação de vencer todos os obstáculos, empregando o maior entusiasmo em tudo quanto fizer. Seja qual for o seu objetivo, dedica-lhe todas as energias do vosso cérebro; e, concentrando o vosso pensamento, dizei: "Terei bom êxito, nada haverá que seja capaz de me impedir".

 

<SPAN STYLE="background-image:url(imagens/back1.gif); FONT-FAMILY:courier new">Agora aplicando...</SPAN>

Agora aplicando uma textura no fundo do texto. usando o mesmo princípio

Para obter mais informações sobre esta propriedade vá para:

Background-image

SPAN também possibilita criar diversos efeitos visuais na fonte através da propriedade filter ideais para destacar títulos ou dar maior ênfase a alguma frase. Aqui estão selecionados alguns deles:

 

EFEITO GLOW 

<span style="height:1; filter:glow(color=#FF0000); color:#FFDEAD>No século 18...</span>

"No século 18, a invenção do pára-raios, por Benjamin Franklin, foi condenada pela Igreja como invenção do diabo. Sendo o raio expressão da cólera do Senhor, só podia ser tentação do demo impedir que o castigo divino caísse sobre o mundo. Na França, a "excomunhão" foi levada a sério: em Saint-Omer, Vissey de Bois foi processado por heresia, por instalar um pára-raios em sua casa".

Este efeito de borramento é conseguido através da propriedade de estilo filter:glow aplicado a tag span, conforme mostra a sintaxe acima. Ele também pode ser aplicado as linhas e figuras (arquivos gif, jpg...), basta envolver o elemento com span e suas propriedades. height:1 destaca a visualização do efeito, (color=#FF0000) especifica a cor do borramento e finalmente color:#FFDEAD a cor do texto.

Para aprender mais sobre esta propriedade vá para:

Filtro Glow.

Filtros Combinados

 

EFEITO BLUR

<span style="width: 550; height:1; font-size: 24pt; font-family: Arial Black;
color: green; Filter: Blur(Direction=225, Strength=4)">No século 18...</span>

"No século 18, a invenção do pára-raios, por Benjamin Franklin, foi condenada pela Igreja como invenção do diabo. Sendo o raio expressão da cólera do Senhor, só podia ser tentação do demo impedir que o castigo divino caísse sobre o mundo. Na França, a "excomunhão" foi levada a sério: em Saint-Omer, Vissey de Bois foi processado por heresia, por instalar um pára-raios em sua casa".

Este efeito de letras em 3D é conseguido através da propriedade de estilo filter:blur e configuração de seus atributos: Direction=225 indica o ângulo de inclinação da sombra que vai de 0 a 360 graus (no exemplo coloquei uma inclinação de 225 graus), e strength=4 indica o comprimento que a sombra deve ter.

DIRECTION indica o ângulo de inclinação do efeito

Direction=0	Direction=45	Direction=90	Direction=135
Direction=180	Direction=225	Direction=270	Direction=315

STRENGH indica o comprimento do efeito

Strength=2

Strength=5

Strength=7

Strength=9

Para aprender mais sobre esta propriedade:

Filtro Blur.

 

EFEITO DROPSHADOW

<span style="width: 550; height:1; font-size: 28pt; font-family:courier new; color: black;
Filter: DropShadow(Color=#FFFFFF, OffX=3, OffY=3, Positive=1)">No século 18...</span>

"No século 18, a invenção do pára-raios, por Benjamin Franklin, foi condenada pela Igreja como invenção do diabo. Sendo o raio expressão da cólera do Senhor, só podia ser tentação do demo impedir que o castigo divino caísse sobre o mundo. Na França, a "excomunhão" foi levada a sério: em Saint-Omer, Vissey de Bois foi processado por heresia, por instalar um pára-raios em sua casa".

Onde color:#FFFFFF define a cor da sombra, offx=3 o deslocamento horizontal em pixel, offy=3 o deslocamento vertical em px, positive=1 a sombra terá um efeito externo ou 0 para um efeito interno.

Deslocamentos do efeito com offx & offy

offx=0, offy=5

offx=5, offy=0

offx=5, offy=5

offx=10, offy=10

 

EFEITO WAVE

<span style="width: 357; height: 50; font-size: 24pt; font-family: Arial Black; color: red;
Filter: Wave(Freq=4, Phase=100, Strength=3)">EFEITO WAVE</span>

Onde Freq=2 define o número de ondulações, Phase=5 determina a sua freqüência e Strength=50 a sua intensidade.

Para aprender mais sobre esta propriedade vá para:

Filtro Wave.

Filtros Combinados

 

EFEITO MASK

<span style="width: 350; height: 30; font-size: 45pt;
Filter: Mask(Color=#800080)">EFEITO MASK</span>

Este efeito cria uma máscara de fundo para a fonte que passa a ser transparente. Repare que o background da página também acontece no interior da fonte. Seu parâmetro color=#800080 define a cor da máscara.

Para aprender mais sobre esta propriedade vá para:

Filtros Combinados

 

EFEITO SHADOW

Sintaxe:

<span style="height:10; color:#556B2F filter:shadow(color=ff0000, direction=320, enabled=1)"> <h1>World<BR> Wide<BR> Web</h1> </span>

World Wide Web

Onde height:10 ajusta a distância do sombreamento com a próxima linha de baixo, color:#556B2F define a cor da letra, color=ff0000 (entre aspas) define a cor da sombra, direction=320 ajusta o ângulo de direção, e enabled=1 habilita o efeito.

Os browsers Netscape, Opera e Internet Explorer inferior a v5,5 não aceitam estes recursos.

 

 

Filtros Combinados

Agora que sabemos, um pouco, como eles funcionam já podemos criar alguns efeitos interessantes usando dois ou mais filtros sobre o mesmo objeto. No exemplo a seguir vou usar um combinado dos filtros Wave e Glow sobre o texto CARTOON PICS. Repare que alguns webmasters preferem simular este mesmo efeito criando arquivos.gif (por acharem esta maneira mais simples), que ficarem se envolvendo com parâmetros de DHTML/CSS, o que não é o nosso caso.

CARTOON PICS

Sintaxe:

<P ALIGN="center" STYLE="font-size:42px; font-family:'arial black'; filter:wave(Add=1, Freq=2, LightStrength=100, Phase=16, Strength=1) filter:glow(color=black, Strength=1); height=1; font-weight:bold; color:purple"> CARTOON PICS

Na sintaxe acima realcei os parâmetros dos dois filtros com cores distintas para que você possa observar onde começa e termina cada um com a formatação de suas respectivas propriedades (que está envolvida pelo HTML convencional). Um detalhe importante é que para obter o efeito degrade do texto, você não pode formatá-lo com o código RGB (Red/Green/Blue) mas somente com os Nomes Padrão suportados pelos browsers, Caso contrário o degrade não funcionará.

NOMES PADRÃO		CÓDIGO	NOMES PADRÃO		CÓDIGO
	red	ff0000		maroon	800000
	lime	00ff00		green	008000
	blue	0000ff		navy	000080
	yellow	ffff00		olive	808000
	aqua	00ffff		teal	008080
	fuchsia	ff00ff		purple	800080
	white	ffffff		silver	c0c0c0
	black	000000		gray	808080

NOTA: Esta tabela de Nomes Padrão NÃO ESTÁ COMPLETA. Existem mais nomes de cores, porém como exemplo estes já são suficientes.

Assim, como usei a nome padrão da cor purple, no exemplo, então seu degrade correspondente será a cor funchsia, como consta na tabela acima. Ainda aproveitando o mesmo exemplo agora vou fazer outro combinado dos filtros DropShadow e Glow modificando algumas propriedades como fonte e cor:

CARTOON PICS

Sintaxe:

<P ALIGN="center" STYLE="font-size:42px; font-family:verdana; filter: DropShadow(offx=3, offy=3, color:#ff00ff, positive=1) filter: glow(color=black, Strength=2); height=1; font-weight:bold; color:#8a2be2"> CARTOON PICS

Uma pequena observação: Vai acontecer que quando você aplicar a sintaxe acima em um texto com letras minúsculas, as letras "p", "q", "y" e "j" aparecerão com suas bases cortadas.

copy the pics

Para resolver isso basta aumentar a altura da linha inserindo a propriedade line-height e configurar seu valor para que o corte desapareça.

Sintaxe:

<P ALIGN="center" STYLE="font-size:35px; font-family:verdana; filter: DropShadow(offx=3, offy=3, color:#ff00ff, positive=1) filter: glow(color=black, Strength=2); height=1; font-weight:bold; color:#8a2be2; line-height:50px"> copy the pics

copy the pics

 

Outro exemplo agora combinando 3 filtros: Mask, Shadow e Chroma. Este, porém, vou apresentar por etapas para que fique bem claro o efeito que cada filtro irá causar no objeto.

1) filter:mask(color=#000000) cria uma máscara de cor preta que irá envolver o texto e width:280; height:70 define o tamanho que a máscara deve ter.

Olhe Isto!

2) O filtro shadow(color=#228b22, direction=135) cria um sombreado onde color=#228b22 define a sua cor e direction=135 o seu ângulo de inclinação.

Olhe Isto!

3) E, finalmente o filtro chroma(color=#000000) anula a máscara preta realçando o efeito interno do texto.

Olhe Isto!

Sintaxe:

<P ALIGN="center"> <SPAN STYLE="width:280; height:70; font-size:50px; font-family:verdana; font-weight:bold; filter:mask(color=#000000) shadow(color=#228b22, direction=135) chroma(color=#000000)">Olhe Isto! </SPAN>

Logicamente este efeito só irá funcionar em textos com letras grandes, algo acima de font-size:30px e espessura realçada com font-weight:bold. Abaixo configurei o mesmo efeito em um texto com tamanho normal. O efeito desapareceu!...

 
"No século 18, a invenção do pára-raios, por Benjamin Franklin, foi condenada pela Igreja como invenção do diabo. Sendo o raio expressão da cólera do Senhor, só podia ser tentação do demo impedir que o castigo divino caísse sobre o mundo. Na França, a "excomunhão" foi levada a sério: em Saint-Omer, Vissey de Bois foi processado por heresia, por instalar um pára-raios em sua casa".