In Tutoriais

Efeito Pressionado em Textos com CSS

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

Related Articles

4 comentários:

  1. Bem legal seu tutorial :3

    http://madnesshoujo.blogspot.com.br/

    ResponderExcluir
  2. Adorei o tutorial, como sempre!
    Posso fazer uma perguntinha? Você já ensinou aqui como colocar o avatar ao lado do titulo do post? Tentei com um que achei e não consegui :(
    Te passei uma tag aqui ---> http://blogcoisinhasorientais.blogspot.com/2014/11/tag-playlist-com-o-seu-nome.html se quiser responder ^^

    Beijos~!

    ResponderExcluir

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