Efeitos CSS Vanessa S.
Efeito Sombra nos Textos (Text-shadow)
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.
<div style="background:#E6E6FA; color:#4682B4; text-shadow: 1px 1px 0px #000;">Texto Aqui</div>
Código para aplicar o efeito em algum seletor(elemento) no template:
text-shadow: 1px 1px 0px #000;
<div style="padding:10px;background:#2E8B57; color:#000; text-shadow:-1px -1px 2px #ff0;">Texto Aqui</div>
Código para aplicar o efeito em algum seletor(elemento) no template:
text-shadow:-1px -1px 2px #ff0;
<div style="background:#fff; color:#000; text-shadow:5px 5px 5px 000;">Texto Aqui</div>
Código para aplicar o efeito em algum seletor(elemento) no template:
text-shadow:5px 5px 5px 000;
<div style="text-shadow: 5px 5px 5px #333; color:#ffffff;">Texto Aqui</div>
Código para aplicar o efeito em algum seletor(elemento) no template:
text-shadow: 1px 1px 2px #333; color:#ffffff;
<div style="padding:5px;background:#bbb3ab; color:#412510;text-shadow:1px 1px 0px #fff;">Texto Aqui</div>
Código para aplicar o efeito em algum seletor(elemento) no template:
text-shadow:1px 1px 0px #fff;
<div style="padding:5px;background:#bbb3ab; color:#000;text-shadow:5px 8px 1px #FFD700, 10px -15px 1px #FF7F00;">Texto Aqui</div>
Código para aplicar o efeito em algum seletor(elemento) no template:
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 “modelo >> 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 h1
Você 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.
Se quiser que o Internet Explorer reconheça o efeito sombra no texto, você deverá acrescentar o filtro disponivel no início da postagem, editando os campos: color, direction e strength, de acordo com seu gosto.
Imagem:Ajaxian
Muito bom esse tuto
Deu tudo certinho!
Adooooro quando acontece isso! rsrs
Beijo no coração, Clau!
Dani
clau,me ajuda por favor? eu não compreendi a etapa 3 aplicar no tìtulo dos posts,o que eu coloco em edite?
Oi, Clau!
Saudades de vc, amiga!
Ahh demorou, mas estou de volta e em tempo integral! rsrsrs
Adorei as novidades! Ah? Não são tão novas assim? Nossa, então faz tempo que não apareço, né? rsrs
Aos poucos, vou recuperar o tempo perdido, viu?
Um beijo grande no coração!
dani
Poxa, você é um anjo! Eu conhecia apenas metade desses comandos. Sei que é um tutorial para todos mas agradeço de maneira muito especial por que cheguei a pedi-lo. Assim que eu conseguir terminar meu layout e abrir o blog pode ter certeza de que lá estarão os devidos créditos!