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?