CODEWITHSUNDEEP
htmlcssshadow
Timar Ivo Batis
Timar Ivo Batis

Reputation: 1996

text-shadow shows on top of text of previous line, of same element

Why does text shadow render above the text that is throwing the shadow. I would expect for all shadows to show below all of the text.

Shadow is on top the previous line: red HATE being a shadow, should be displayed below the text of LOVE

Shadow is above previous line

Shadow is below following line: enter image description here

h1 {
  text-shadow: -10px -25px 0 #f00;
}
<h1>LOVE LOVE LOVEL LOVE <br>HATE HATE HATE HATE HATE</h1>

Upvotes: 3

Views: 908

Answers (2)

Temani Afif
Temani Afif

Reputation: 272590

Simply because the text itself will be above the previous line in case of overlap thus the shadow will follow this logic:

h1 {
  line-height:0.8;
}
span {
  background:red;
}
<h1>

  <span>LOVE LOVE LOVEL LOVE <br>HATE HATE HATE HATE HATE</span>
</h1>

As you can see the decoration of the next line hide the previous line when using background which is the same considering shadows and other properties (like border too). The decoration of each line will be above the previous one

h1 {
  line-height:0.8;
  text-shadow:0px -20px #fff;
}
span {
  background:red;
  border:2px solid green;
}
<h1>

  <span>LOVE LOVE LOVEL LOVE <br>HATE HATE HATE HATE HATE</span>
</h1>

From the specification of the painting order in the step (7) which is somehow complex you will see that we deal with each line box in tree order (each line)

  1. Otherwise, for each line box of that element:
  2. For each box that is a child of that element, in that line box, in tree order:

Upvotes: 3

SilentCity
SilentCity

Reputation: 76

If you take a look at the css you wrote, the second option (here 25px) selects the position of the shadow compared the the element. The code below,

h1 { text-shadow: 10px 25px 0 #f00;}

will create a shadow Below the H1, which is the default. If you wish to have a shadow ABOVE the text, you need to write this :

h1 { text-shadow: 10px -25px 0 #f00;}

The difference being the minus.

Upvotes: 0

Related Questions