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
No description
7 Replies
ἔρως
ἔρως8mo ago
position: relative and then z-index going from length to 1
No description
ἔρως
ἔρως8mo 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
ἔρως
ἔρως8mo ago
and everything is as it should be
No description
ἔρως
ἔρως8mo 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
ἔρως
ἔρως8mo ago
so, L is z-index: 11 and m is z-index: 1
No description
No description
swirlingblueberrysmoothie
Thank you so much for help and explaining! It works as it should now 🥰
ἔρως
ἔρως8mo ago
you're welcome
Want results from more Discord servers?
Add your server