Skip to main content
removeu 2 caracteres do conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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 01px #e0e0e0;#fff;
   font-size: 3em;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 01px #e0e0e0;#fff;
   font-size: 3em;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?

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 0 #e0e0e0;
   font-size: 3em;
   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 0 #e0e0e0;
   font-size: 3em;
   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?

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?

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Como fazer efeito de baixo relevo em textos?

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 0 #e0e0e0;
   font-size: 3em;
   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 0 #e0e0e0;
   font-size: 3em;
   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?