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 ele
Solution 1:
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.
Solution 2:
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>
Post a Comment for "Is It Possible To Treat Multiple Elements As One Text When Applying CSS Text-shadow?"