Kevin Powell - Community•3mo ago

How to prevent text-shadow from overlapping previous letter

I need help with text-shadow. I'm trying to do a 3D effect text reveal, but letter's shadows are overlapping previous letter, which is rendered by <span> inside of a container. What I want to achieve, is that with each child's index increasing, I want it's z-index to decrease, so that previous letter is on top. I tried to set z-index in scss, and in JS but didn't work. Is there other way? I also tried using css: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; but it didn't work. I'm using SCSS, vanilla JS & animation from Anime.js Here is my code: https://codepen.io/blberrysmoothie/pen/QWPdEpb

7 Replies

ἔρως•3mo ago

position: relative and then z-index going from length to 1

ἔρως•3mo ago

you can see how the um is properly set just change the replacement from your string to this:

(chr, i, str)=>`<span class="letter" style="z-index:${str.length - i}">${chr}</span>`

(chr, i, str)=>`<span class="letter" style="z-index:${str.length - i}">${chr}</span>`

and change .letter to this:

.letter {
  display: inline-block;
  position: relative;
}

.letter {
  display: inline-block;
  position: relative;
}

the relative is important

ἔρως•3mo ago

and everything is as it should be

ἔρως•3mo ago

the idea is for the first letter to be at the highest z-index, and the first to be at the lowest, so each letter's shadow can be over the next one

ἔρως•3mo ago

so, L is z-index: 11 and m is z-index: 1

swirlingblueberrysmoothie•3mo ago

Thank you so much for help and explaining! It works as it should now 🥰

ἔρως•3mo ago

you're welcome

Gaming

Programming

How to prevent text-shadow from overlapping previous letter