CODEWITHSUNDEEP
htmlcsshtml-rendering
Sarah Groß
Sarah Groß

Reputation: 10879

Is it possible to treat multiple elements as one text when applying CSS text-shadow?

When applying CSS text-shadow to an element that has its text content partially wrapped in child elements, the letters after the wrapped text will throw a shadow on the wrapped elements, as you can see in this example:

* {
  font-family: sans-serif;
  font-weight: 900;
}

.shadow {
  color: #ffd9e2;
  font-size: 3rem;
  text-shadow: 0 0 0 transparent, 0 0 10px #ff003c, 0 0 20px rgba(255, 0, 60, 0.5), 0 0 40px #ff003c, 0 0 100px #ff003c, 0 0 200px #ff003c, 0 0 300px #ff003c, 0 0 500px #ff003c, 0 0 1000px #ff003c;
}

hr {
  margin: 2em 0;
}
<span class="shadow">This <span>t</span>ext <span>c</span>onsists of multiple elements</span>
<hr>
<span class="shadow">This text consists of one single element</span>

The first "t" of "text" and the "c" of "consists" appear darker than the rest of the text due to this. The rendering engines (testet FF and Chrome latest) also seem to break up multiline text for rendering, so a new line will throw a shadow on the line before, but that's not even bothering that much here. However, I would like to have all characters of the text to be regarded as being on the same layer.

Is there some trick you can apply to the CSS to make the rendering behave that way?

I played around with z-index and wrapping all text nodes in child elements of the .shadow container, but to no avail.

Upvotes: 1

Views: 531

Answers (2)

Temani Afif
Temani Afif

Reputation: 272608

You can consider drop-shadow() filter but pay attention as it doesn't work the same as text-shadow. Filter are cumulated and not applied seperately:

* {
  font-family: sans-serif;
  font-weight: 900;
}

.shadow {
  color: #ffd9e2;
  font-size: 3rem;
 filter:
  drop-shadow(0 0 10px #ff003c)
  drop-shadow(0 0 20px rgba(255, 0, 60, 0.5))
  drop-shadow(0 0 40px #ff003c);
}

hr {
  margin: 2em 0;
}
<span class="shadow">This <span>t</span>ext <span>c</span>onsists of multiple elements</span>
<hr>
<span class="shadow">This text consists of one single element</span>

To better illustrate the effect of multiple drop-shadow() filter:

.box {
  padding:50px;
  font-size:30px;
  font-weight:bold;
}
.s {
 text-shadow: 20px 50px 0 red,150px -20px 0 blue,-20px 20px 0 green;
}

.f {
 filter: drop-shadow(20px 50px 0 red) drop-shadow(150px -20px 0 blue) drop-shadow(-20px 20px 0 green);
}
<div class="box s">some shadow</div>

<div class="box f">some filter</div>

You can clearly see how many shadows we have in the second example because each time we consider the previous and we duplicate it.

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 191936

You can use the drop-shadow() filter.

Demo:

* {
  font-family: sans-serif;
  font-weight: 900;
}

.shadow {
  color: #ffd9e2;
  font-size: 3rem;
  filter: drop-shadow(0 0 0 transparent)
          drop-shadow(0 0 10px #ff003c) 
          drop-shadow(0 0 20px rgba(255, 0, 60, 0.5));
}

hr {
  margin: 2em 0;
}
<span class="shadow">This <span>t</span>ext <span>c</span>onsists of multiple elements</span>
<hr>
<span class="shadow">This text consists of one single element</span>

Upvotes: 1

Related Questions