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:
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...( ˘ ³˘)♥
Esse tutorial é bem útil e bem legal!!
ResponderExcluirGostei!
Sarang Cute