CODEWITHSUNDEEP
htmlcss
Rumata
Rumata

Reputation: 1047

I can't make the inner shadow of text (an incorrect result)

I encountered a problem when creating inner shadow for the text. I tried this method (some css does not work in such online-compilers, but the code is visible):

.text {
  background-color: #565656;
  font-size: 35px;
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}
<div class="text">
Text
</div>

The result is a light gray text, but I need the text of a different color. When I tried to change the text color and shadow color (not alpha), it became clear that, apparently, "background-clip: text;" do not cut the shadow in the text area, and I see a blurred silhouette outside the contours of letters.

This is what happens (the text and shadow colors are wrong here, but the overlap is visible):

enter image description here

And that's what I need:
enter image description here

Upvotes: 0

Views: 139

Answers (2)

Arif
Arif

Reputation: 563

    .text {
  font-size: 50px;
  display:flex;
  justify-content: center;
  font-stretch: ultra-expanded;
  color: rgb(96, 32, 24);
background-color: rgb(186, 186, 186);
background-image: url(http://previews.123rf.com/images/auborddulac/auborddulac1201/auborddulac120100059/12000991-Dotted-yellow-background-Stock-Photo.jpg);
text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}
<div class="text">
Text
</div>

Upvotes: 0

Chris Simmons
Chris Simmons

Reputation: 55

By using a background color the same as main shadow color it's possible, there may be other ways but this is the most common one I know of.

Source code -- https://codepen.io/vincicat/pen/zikrC

body {
  /* This has to be same as the text-shadows below */
  background: #def;
}

h1 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 2em;
  line-height: 1em;
  text-align:center;
}

.inset-text {
  /* Shadows are visible under slightly transparent text color */
  color: rgba(10, 60, 150, 0.8);
  text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}

/* Don't show shadows when selecting text */
::-moz-selection, ::selection {
  background: #5af;
  color: #fff;
  text-shadow: none;
}
<h1 class="inset-text">Inset text-shadow trick</h1>

Upvotes: 1

Related Questions