Reino Kawaii

Olá! Hoje trouxe um mini tutorial para mostrar como criar aquele efeito de texto "pressionado" que a gente obtém em textos no Photoshop, só que sem usar programa nenhum, apenas CSS. Note nos códigos e no exemplo que é possível adicionar o efeito em textos com background de qualquer cor ou com qualquer imagem; você só precisa saber qual é a cor de fundo da área em que for usar.

Para isso, use uma ferramenta em formato de conta gotas que aparece em quase todo editor de imagem, como no Pixlr, por exemplo, que é o que recomendo para fazer esse tutorial porque mostra a cor original em tons claros e escuros, que vamos precisar.
Tendo descoberto essa cor, basta aplicar uma cor mais escura que o background no texto e uma mais clara que o texto no sombreamento. Observe lá no exemplo com resultado; já está tudo explicado; antes de /b:skin, você adiciona o código CSS para um background:

.bg {
background:#d4487b;/*cor do background*/
}

Se for imagem:

.bg2 {
background:url("URL-DA-IMAGEM") no-repeat;/*mude para uma URL de alguma imagem*/
width: 600px;/*largura*/
height: 450px;/*altura*/
margin-left: 100px;/*posiciona a imagem com relacao a esquerda se for preciso*/
border: 1px dashed #fff;/*borda opcional*/
}

Agora adicione o efeito no texto, podendo aplicar em qualquer class que preferir, tipo nos títulos de postagens, da sidebar. Se for usar com uma cor como plano de fundo, lembra da regrinha?

.pressed {
color:#a11b46;/*cor do texto mais escura que o background*/
text-shadow: 0px 1px 1px #ff75a5;/*cor da sombra mais clara que a cor do texto*/
}

E aplica mais estilos como tipo e tamanho da fonte, alinhamento... Se usar com uma imagem, identifique a cor da área em que vai usar:

.pressed2 {
color:#170000;/*cor do texto mais escura que a área da imagem que escolher*/
text-shadow: 0px 1px 1px #6e5959;/*cor da sombra mais clara que a cor do texto*/
padding: 10px;/*posicionar*/
margin-left: 115px;/*posicionar em relacao a esquerda*/
margin-top: 360px;/*posicionar em relacao ao topo*/  
width: 200px;/*limitar largura da area do texto opcional*/
}

Lembre-se de posicionar o texto onde preferir e aplicar mais estilos. Onde quiser que o efeito apareça, em locais específicos, como em uma postagem, gadget HTML/JavaScript...basta usar o nome da class:

<div class="bg">
<div class="pressed">Texto</div>
</div>

Se usar com imagem como plano de fundo:

<div class="bg2">
<div class="pressed2">Texto</div>
</div>

Se usar em áreas como títulos dos posts, sidebars, blockquotes....não precisa dessa parte acima. Espero que tenha ficado claro e que gostem :3