How to make low relief effect in texts?

Asked

Viewed 298 times

0

I would like to make a bas-relief effect on a text. Using the property text-shadow it is possible to do this, as shown below:

.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>

The problem is that in my project, the div where the text is has a clearer background than in the above example (background: #f5f5f5;), and with it, the effect of text-shadow is imperceptible due to the low contrast between the background and the color of text-shadow, see:

.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>

It would be something similar to the value inset of property box-shadow, but the box-shadow only applies to content tags (div, span etc.) and not the texts.

Is it possible to do this low-relief effect on CSS texts? How?

css
  • 2

    Sam would be interesting to include in your question an image with an example as close as possible to what you want, because there are various techniques and various styles of low and high relief

  • Hi Hugo! Snippet is not enough?

  • 2

    I don’t think Sam ate Pq in his own answer you say you found a Codepen with effect "similar" to what you want, so neither your snippet, nor the codepen seem to be what you want... Therefore, it would be nice to include an image for us not to waste time giving you an answer that tbm eh what you have in mind, since the effect can be done with different shapes and techniques with the I spoke...

  • @hugocsl So it would be something similar to the first snippet, and the Codepen that I found was content with the internal shading, because, at least at first, the issue of the contrast of the white shadow with the background, which would give the effect shown in the snippet, is what hurts.

1 answer

4


Searching in Google I found a Codepen that makes a similar effect that was pleased:

.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>

Beyond the text-shadow, the property is used background-clip: text together with color: transparent and background-color generating an internal shading in the text, creating an optical effect that the inner part of the text is lower than the outer.

In Chrome and Opera the property background-clip requires the prefix -webkit-.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.