A propriedade text-shadow nos permite criar sombras no texto, variando a posição e a cor da sombra.
O uso deste efeito é viável por estar funcionando em navegadores modernos, que aceitam os padrões de W3C.
A aplicação deste efeito em titulos e cabeçalhos é bem comum, e é o mesmo efeito que eu apliquei aos títulos dos posts, aqui no blog.
O único problema é que esta propriedade não está disponível em todos os navegadores.
Funciona perfeitamente no Firefox, Safari, Chrome e Opera.
Para o Internet Explorer existe um filtro que faz algo semelhante.
Exemplos:
filter:progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,strength=13, direction=310);}
filter:progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5); }
A propriedade text-shadow é muito simples e possui 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
1. Aplicar o efeito diretamente no post:
Segue alguns exemplos para aplicação em textos e abaixo de cada exemplo o código referente.Sombra Text-Shadow
<div style="background:#E6E6FA; color:#4682B4; text-shadow: 1px 1px 0px #000;">Texto Aqui</div>text-shadow: 1px 1px 0px #000;Sombra Text-Shadow
<div style="padding:10px;background:#2E8B57; color:#000; text-shadow:-1px -1px 2px #ff0;">Texto Aqui</div>text-shadow:-1px -1px 2px #ff0;Sombra Text-Shadow
<div style="background:#fff; color:#000; text-shadow:5px 5px 5px 000;">Texto Aqui</div>text-shadow:5px 5px 5px 000;Sombra Text-Shadow
<div style="text-shadow: 5px 5px 5px #333; color:#ffffff;">Texto Aqui</div>text-shadow: 1px 1px 2px #333; color:#ffffff;Sombra Text-Shadow
<div style="padding:5px;background:#bbb3ab; color:#412510;text-shadow:1px 1px 0px #fff;">Texto Aqui</div>text-shadow:1px 1px 0px #fff;Sombra Text-Shadow
<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;Para aplicar o efeito em textos no post basta colar o código referente à propriedade, no corpo da postagem, através da aba "editar html".
(Edite distância e cores da sombra)
Faça testes e brinque com os efeitos e cores que você pode aplicar.
2. Aplicar o efeito no CSS do template:
Podemos também acrescentar o efeito à folha de estilo no template, para que seja aplicada somente aos elementos que você desejar, como por exemplo, substitulos nos posts.1º passo - Vá em design >> Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e cole-o ACIMA de ]]></b:skin>
.sombra-text {
text-shadow: 2px 3px 4px #000; /*--- Edite ---*/
color: # F0C2D1; /*--- Edite cor ---*/
font-size: 30px; /*--- Edite tamanho da fonte ---*/
}2º passo - Sempre que quiser aplicar o efeito sombra em alguma parte do texto, ou substitulos, no modo "Editar HTML" da postagem, acrescente a seguinte linha:
<p class="sombra-text">
Texto Aqui
</p>
3. Aplicar o efeito sombra nos Títulos dos Posts:
Procure no corpo do HTML do seu blog, o código de comando do Título do Post, que geralmente é .post h3 ou .post-title, dependendo do modelo do seu template.E acrescente logo abaixo as seguintes linhas:
text-shadow: 2px 3px 4px #000; /*--- Edite ---*/
3. Aplicar o efeito sombra nos Títulos do Blog (cabeçalho):
Você também pode acrescentar este efeito no Título do Blog (cabeçalho), basta acrescentar a linha da propriedade text-shadow em #header h1Você também pode aplicar este efeito aos títulos da sidebar, basta acrescentar o código do efeito text-shadow em:
.sidebar h2
Se quiser acrescentar o efeito aos titulos do Footer, acrescente em:
#footer h2
Como eu disse anteriormente, faça testes e brinque com os efeitos e cores que você pode aplicar.
0 comentários:
Postar um comentário
Deixe Seu Coméntario