0

Gostaria de fazer um efeito de baixo relevo em um texto. Usando a propriedade text-shadow é possível fazer isso, como mostro abaixo:

.box{
   font-family: Arial;
   background: #bababa;
   text-shadow: 1px 1px 1px #fff;
   font-size: 4em;
   font-weight: bold;
   padding: 20px;
}
<div class="box">
   Texto
</div>

O problema é que no meu projeto, a div onde está o texto possui um background mais claro do que no exemplo acima (background: #f5f5f5;), e com isso, o efeito do text-shadow fica imperceptível devido ao baixo contraste entre o background e a cor do text-shadow, veja:

.box{
   font-family: Arial;
   background: #f5f5f5;
   text-shadow: 1px 1px 1px #fff;
   font-size: 4em;
   font-weight: bold;
   padding: 20px;
}
<div class="box">
   Texto
</div>

Seria algo semelhante ao valor inset da propriedade box-shadow, mas o box-shadow só se aplica a tags de conteúdo (div, span etc.) e não a textos.

É possível fazer esse efeito de baixo relevo em textos com CSS? Como?

4
  • 2
    Sam seria interessante vc incluir na sua pergunta uma imagem com um exemplo o mais próximo possível do que vc quer, pois existem varias técnicas e vários estilos de baixo e alto relevo
    – hugocsl
    Commented 15/02/2020 às 11:39
  • Oi Hugo! O snippet não basta?
    – Sam
    Commented 15/02/2020 às 11:46
  • 2
    Acho que não Sam ate Pq na sua própria resposta vc fala que encontrou um Codepen com efeito "semelhante" ao que vc quer, então nem seu snippet, nem o codepen parecem ser o que vc quer... Logo, seria legal vc incluir uma imagem para a gente não perder tempo te dando uma resposta que tbm não eh o que vc tem em mente, já que o efeito pode ser feito com formas e técnicas diferentes com o falei...
    – hugocsl
    Commented 15/02/2020 às 12:11
  • @hugocsl Então, seria algo semelhante ao primeiro snippet, e o Codepen que achei ficou a contento com o sombreado interno, porque, pelo menos à princípio, a questão do contraste da sombra branca com o background, que daria o efeito mostrado no snippet, é o que prejudica.
    – Sam
    Commented 15/02/2020 às 12:18

1 Resposta 1

4

Pesquisando no Google encontrei um Codepen que faz um efeito semelhante que ficou a contento:

.box{
   font-family: Arial;
   background: #f5f5f5;
   font-size: 4em;
   font-weight: bold;
   padding: 20px;   
}

.box span{
   color: transparent;
   background-color: #000; /* cor do texto */
   text-shadow: 1px 1px 3px rgba(255,255,255,.5);
   -webkit-background-clip: text;
   -moz-background-clip: text;
   background-clip: text; 
}
<div class="box">
   <span>Texto</span>
</div>

Além do text-shadow, é utilizada a propriedade background-clip: text em conjunto com color: transparent e background-color gerando um sombreamento interno no texto, criando um efeito ótico de que a parte interna do texto é mais baixa do que por fora.

No Chrome e Opera a propriedade background-clip necessita do prefixo -webkit-.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .