CSS Básico: Text Shadow

Oi pessoal! Estava navegando pela internet, procurando algo de útil para fazer, e me lembrei que no Mundo Blogger tem algumas dicas super úteis de CCS e resolvi ir lá conferir. Acabei descobrindo algumas propriedade úteis, que resolvi compartilhar com vocês. A primeira é a propriedade de sombras nos textos, talvez eu traga as outras.

Aplicando a propriedade sombra nos textos

Acho que a maioria das pessoas conhece a propriedade de sombra nos textos, eu conheço ela por causa do tutorial de colocar sombra nos títulos dos posts. Acabei aprendendo mais algumas, que vou compartilhar aqui.

Infelizmente essa propriedade só funciona em navegadores modernos, alguns não tem suporte para isso. Aliás, vocês já conferiram seus blogs em outros navegadores?

Pelo que entendi, a propriedade sombra tem quatro parâmetros:

text-shadow: PositionX >> PositionY >> Efeito Blur >> Escala de cores

seletor {text-shadow:2px 3px 8px #000;}

2px -> é a distância horizontal (X)

3px -> é a distância vertical (Y)

8px -> é o efeito Blur (efeito borrado)

#000 -> é a cor da Sombra

Aplicar o efeito no post:

Segue o exemplo da sombra e como aplicá-la (o primeiro código em um post, o segundo em um Template): 

1-Exemplo da Sombra

<div style="background:#E6E6FA; color:#4682B4; text-shadow: 1px 1px 0px #000;">Texto Aqui</div>

No Template:

text-shadow: 1px 1px 0px #000;

2-Exemplo da Sombra

<div style="padding:10px;background:#2E8B57; color:#000; text-shadow:-1px -1px 2px #ff0;">Texto Aqui</div>

text-shadow:-1px -1px 2px #ff0;

3-Exemplo da Sombra

<div style="padding:5px;background:#bbb3ab; color:#000;text-shadow:5px 8px 1px #FFD700, 10px -15px 1px #FF7F00;">Texto Aqui</div>

text-shadow:5px 8px 1px #FFD700, 10px -15px 1px #FF7F00;

Existem muitos outros efeitos, mas eu demoraria muito para postar tudo aqui e seria desnecessário, pois estão todos no mundo Blogger. Basta conferir o post original para ver todos.

Aplicar o efeito "aonde desejar":

Esse código aqui é para usar "aonde quiser". É muito simples, basta criar um class, o mesmo que a gente faz na elite de afiliados.

Cole acima de /b:skin o seguinte código:

.sombra-text {
text-shadow: 2px 3px 4px #000; /*--- Edite  ---*/
color: # F0C2D1;  /*--- Edite cor ---*/
font-size: 30px;  /*--- Edite tamanho da fonte ---*/
}

Sempre que quiser usar a propriedade, acrescente a seguinte linha:

<p class="sombra-text">
Texto Aqui
</p>

OBS: acredito que não funciona em imagens.
OBS²: Não usem no texto do post que fica horrivel e super cansativo de ler.

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar