Efeito Emboss no texto
Sabe o efeito emboss do Photoshop? É essa imagem ai do lado. Agora você pode usar também com o CSS nos seus themes, sem o uso de imagens. (Página de testes)
Código:
color:#ccc; text-shadow: -1px -1px white, 1px 1px #333;
E agora é colocar este código acima nas classes de css em que pretende usar. Nos exemplos, eu usei isso como base:
.emboss { padding: 10px; color:#corfonte; text-shadow: -1px -1px #cor1, 1px 1px #cor2; font-size: 24px; }
Dá pra brincar bastante com esse efeito, deixar ele tipo transparente. Eu fiquei brincando um pouquinho com ele na página de testes, e ficou bem legal. Fica quase que transparente, como uma marca d'agua. Explicando o código:
padding: 10px; // opcional, é o espaçamento entre o texto e a margem, é bom sempre usar, pra não ficar tudo coladinho.
color:#d2d8a4; // cor da fonte, coloque a mesma cor que o bg pra melhor efeito, pra deixar ~transparente~.
text-shadow: -1px -1px #cor1, 1px 1px #cor2; // a cor1 é a cor da primeira sombra, que seria a de cima da fonte, use uma cor mais clarinha da que você esta usando no bg e na cor2 uma mais escura, as vezes o preto e o branco não ficam legal.
font-size: 24px; // coloquei a fonte desse tamanho porque o efeito quase não aparece em fontes pequenas, aconselho que a sua fonte seja grossa e com mais de 20px.
Bom, se gostar ou usar, curte ai!
