CSS - Sombras em Textos e Objetos

Para aplicar mais estilos a um texto e um objeto, vamos aprender sobre a propriedade Shadow   do CSS.
Primeiramente, vamos ver como ela se aplica a textos.

Sombra em Textos

Aqui esta um exemplo de como usar um texto com sombra

<p style="font-size:30px;color:000;text-shadow:2px 2px 5px #000;">Teste</p>

Teste

     
Este é o resultado. Em vermelho é a propriedade que da o sombreado ao texto, se você perceber, há três números (2px 2px 5px) os dois primeiros números ajusta a posição da sombra, Ex:

<p style="font-size:30px;color:000;text-shadow:-3px -3px 5px #000;">Teste</p>

O resultado será:

Teste

repare que ela mudou de posição, como se a luz batesse de outro angulo. Agora, vamos ver o terceiro numero, ele refere-se a intensidade da sombra, Ex:

text-shadow:-3px -3px 9px #000;

 Teste

Onde esta em vermelho é o que mudei, como coloquei um numero maior, a sombra ficou mais borrada, se colocar um numero menor, ele irá ficar diferente.

Você pode testar estes exemplos no editor HTMl aqui

Para usar Sombra em objetos não é muito diferente...

Sombra em Objetos

Vamos usar um exemplo de um cubo.

<div style="background:#6210b0;width:50px;height:50px;border-radius: 5px;box-shadow: 4px 4px 6px #000;">
</div>

Aqui esta o cubo com sombra. Para objetos só ira mudar a regra CSS, antes era text-shadow, Agora é Box-shadow. Para tudo que você quiser aplicar sombra, deve ser esta regra  agora para textos, somente a que ensinei anteriormente.

Pratique estas regras no editor HTML e faça os seus testes!