Apresentação & Efeito Sombreado em textos: CSS3, a série

O CSS3 surgiu para ficar, se o objetivo do CSS3 era melhorar a vida dos designers, concerteza está conseguindo. Devemos agradecer a empresas como Mozilla, Opera, Safari, entre outras, que permitiram o funcionamento desse tipo de código.

Novidades
Veja abaixo os novos recursos que acompanham o CSS3:

Bordas

• Border-color
• Border-image
• Border-radius
• Box-shadow

Fundos

• Background-origin
• Background-clip
• Background-size
• Fazer camadas com múltiplas imagens de fundo 

Cor

• Cores HSL
• Cores HSLA
• Cores RGBA
• Opacidade

Texto

• Text-shadow
• Text-overflow
• Ruptura de palavras longas

Interface

• Box-sizing
• Resize
• Outline
• Nav-top, nav-right, nav-bottom, nav-left

Outros

• Seletores por atributos
• Overflow-x, overflow-y
• Media queries
• Criação de múltiplas colunas de texto
• Propriedades orientadas a discurso ou leitura automática de páginas web
• Web Fonts 

Entre esses diversos conteúdos falaremos agora sobre "Text-Shadow" ou seja, sombreamento em textos, utilizado bastante em títulos e subtítulos, como utilizamos aqui no 1001 FACES. Mas atenção você só poderá visualizar os efeitos nos navegadores Safari, Opera e Mozilla Firefox, infelizmente ainda não funciona no Internet Explorer.

Conhecendo e aplicando o Text-shadow

Os parâmetros text-shadow são: PositionX, PositionY, Blur, Cores.

3px : É a distancia horizontal da sombra em relação ao texto.
4px: É a distancia vertical da sombra em relação ao texto.
5px: É o efeito borrado da sombra.
#ff0000: Cor da sombra.

Veja o exemplo: Text-Shadow: 3px 4px 5px #ff0000;

Caso você queira aplicar o efeito para a esquerda e para cima basta utilizar o sinal "-" antes dos pixeis, conforme mostra o exemplo:  Text-shadow: -3px -4px 5px #ff0000;

Para aplicar ambos os efeitos faça assim:

       Text-shadow: 5px 8px 1px #0000FF, -10px -15px 1px #FF7F00;

Agora fica com você, personalize conforme seu gosto. Você pode colocar em títulos, cabeçalhos, entre outros.