In Tutoriais

Contorno e Sombra com CSS

Oi. Hoje eu trouxe um truque que aprendi no Css Tricks e no Oloblogger sobre sombreamento e contorno de textos para deixar mais bonito sabe, um estilo para ser aplicado em títulos do blog, sidebar, postagens ou algo que queira destacar. Eu gosto disso para não ter a necessidade de criar uma imagem com style em Photoshop, fazendo seus próprios efeitos e no HTML. Ficará assim:
Exemplo
Para isso, cole o código abaixo no CSS em que desejar obter o efeito:
-webkit-text-fill-color: #ffe6ff;
-webkit-text-stroke: 1px #e0cce0;
text-shadow: 3px 3px 0 #e0cce0, -1px -1px 0 #e0cce0, 1px -1px 0 #e0cce0, -1px 1px 0 #e0cce0, 1px 1px 0 #e0cce0; 

(ㅅ´ ˘ `)♡Por exemplo, para aplicar nos títulos dos posts use assim:
.post-title {
font-size: 30px;
font-weight: bold;
-webkit-text-fill-color: #ffe6ff; -webkit-text-stroke: 1px #e0cce0; text-shadow: 3px 3px 0 #e0cce0, -1px -1px 0 #e0cce0, 1px -1px 0 #e0cce0, -1px 1px 0 #e0cce0, 1px 1px 0 #e0cce0;
}
.post-title a{
font-size: 30px;
font-weight: bold;
-webkit-text-fill-color: #ffe6ff; -webkit-text-stroke: 1px #e0cce0; text-shadow: 3px 3px 0 #e0cce0, -1px -1px 0 #e0cce0, 1px -1px 0 #e0cce0, -1px 1px 0 #e0cce0, 1px 1px 0 #e0cce0;
}
.post-title a:hover{
font-size: 30px;
font-weight: bold;
-webkit-text-fill-color: #ffe6ff; -webkit-text-stroke: 1px #e0cce0; text-shadow: 3px 3px 0 #e0cce0, -1px -1px 0 #e0cce0, 1px -1px 0 #e0cce0, -1px 1px 0 #e0cce0, 1px 1px 0 #e0cce0;
}

Se fosse na sidebar, era só mudar o texto .post-title para .sidebar h2; veja que não precisa definir cor para o texto porque -webkit-text-fill-color já define a cor sobreposta. Em -webkit-text-stroke você define a cor do contorno e text-shadow serve para definir as cores de sombras; aí é só acrescentar mais estilos ao seu gosto, como mudar os códigos de cores acompanhados de "#" (veja tabelas de cores), adicionar fonte e tal. Bju...( ˘ ³˘)♥

Related Articles

1 comentários:

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart