Aplicando sombra nos textos com a propriedade Text-Shadow

Olá queridos leitores! Vamos aprender hoje a adicionar sombra nos textos de qualquer elemento em seu blog. O nosso que se dá há este efeito, chama-se de Text-Shadow. Existe outra propriedade que se chama Box-Shadow, mas ela tem outro funcionamento, se você adicionar ela em textos, não ira funcionar. Mas se você aplicar em boxes, imagens e botões ele funciona. Mas isso é assunto para outro artigo. Bom, como todo efeito ele funciona em todos os navegadores perfeitamente com exceção do Internet Explorer, que não aparece a sombra. Veremos como fazer ele aparecer mais a frente.

Entendendo o Text-Shadow

O Text-Shadow funciona como nos programas de designer, só que de forma diferente, bem diferente. Vamos agora entender como utilizar, ajustar a propriedade em seu template. Você pode aumentar o grau de escurecimento de cor, posição, etc em números. Veja o exemplo abaixo:

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

Podemos dividir ele em  quatro opções. Veja como funciona: PositionX » PositionY » Efeito Blur » Escala de cores. Entendo facilmente:

• 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 diretamente no post

Veja os exemplos abaixo e o código referentes a cada um logo a seguir. Lembrando que você pode alterar a cor, plano de fundo, blur, cor de texto e outros. Faça o que quiser com a sua imaginação!

Exemplo de texto 1

Código para ser utilizada no post:

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

Lembre-se de alterar a parte de vermelho por uma cor de fundo que desejar; altere a parte destacada de azul por uma cor que será utilizada como cor de texto; altere as cores de laranja por uma cor de sombra e o verde para o seu texto.

Exemplo de texto 2

Código para ser utilizado no post:

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

Lembre-se de alterar a parte de vermelho por uma cor de fundo que desejar; altere a parte destacada de azul por uma cor que será utilizada como cor de texto; altere as cores de laranja por uma cor de sombra e o verde para o seu texto. A parte em rosa refere-se à distância do background ao texto.

Exemplo de texto 3

Código para ser utilizado no post:

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

Lembre-se de alterar a parte de vermelho por uma cor de fundo que desejar; altere a parte destacada de azul por uma cor que será utilizada como cor de texto; altere as cores de laranja por uma cor de sombra e o verde para o seu texto. A parte em rosa refere-se à distância de um texto de fundo ao outro. Eu também deixei negritado duas partes em laranja, a primeira você altera para a cor de cima, a outra a cor de baixo.

Aplicando um código CSS no template para ser utilizado facilmente

Além de podermos adicionar diretamente na postagem, podemos adicionar um código CSS em seu template para ser utilizado mais fácil. Veja como fazer isso.

1. Acesse a guia Modelo e pressione Ctrl+F para abrir o localizador de seu navegador e procure pela tag abaixo.

]]></b:skin>

2. Imediatamente, acima da tag destacada cole o código a seguir acima dela. Lembre-se de fazer as devidas modificações para obter o efeito desejado.

.sombra-texto {
text-shadow: 2px 3px 4px #000;
color: #F0C2D1;
font-size: 30px;
}

Lembre-se de alterar a parte destacada de vermelho por um nome de class que desejar; a parte destacada de laranja por a orientação Y e X, efeito borrado e cor da sombra; a cor azul por uma cor de texto e a rosa por o tamanho do texto.

3. Depois clique no botão Salvar modelo.

Depois de instalado, como utiliza-lo na postagem? Veja logo abaixo:

Para utilizar o código aplicado no CSS do template, vamos utilizar o seguinte código. Siga os passos e veja como fazer isso.

1. Acesse o editor de postagens do Blogger e clique na guia HTML. Depois selecione o local desejado e cole o código abaixo fazendo as modificações.

<p class="sombra-texto">Seu texto</p>

Caso ainda tenha dúvidas de como colocar, veja a ilustração abaixo.

Clique na imagem para uma visualização maior

Como adicionar o efeito em alguns elementos

Para adicionar o efeito text-shadow em alguns elementos do Blogger é bem simples. Basta adicionar aquelas partes destacadas em laranja que mostrei nos códigos acima. Veja:

 1. Acesse a guia Modelo e procure pelo código desejado. Veja o exemplo abaixo:

h3.post-title {margin: 0;padding:0px 0px 4px;font: normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif;text-shadow: 2px 3px 4px #000;border-bottom:4px double #EEEEEE;}

Pronto, é bem simples. Basta adicionar o código como está no exemplo acima nos códigos do Blogger que utiliza títulos, basta somente encontrar o código referente.

Como fazer o Text-Shadow aparecer no Internet Explorer

Para fazer o text-shadow aparecer no Internet Explorer (em qualquer versão), o processo já mais complicado. Temos que colocar uma espécie de filtro para que ele possa aparecer. Ao invés de você utilizar os códigos que mostrei acima, você deverá utilizar o código abaixo.

filter:progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,strength=13, direction=310);}
filter:progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5); }

As primeira parte destacada de vermelho você deve alterar para a cor do texto, e a segunda a cor da sombra. A azul, você deve alterar pra a direção da sombra. E a rosa por o blur da sombra.

Pronto, espero ter ajudado vocês com este "probleminha" para alguns blogueiros. O Text-Shadow é bem simples e pode ser utilizado em qualquer lugar. Abraços e boa sorte!