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
position: relative
and then z-index
going from length
to 1
you can see how the
um
is properly set
just change the replacement from your string to this:
and change .letter
to this:
the relative
is importantand everything is as it should be
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
so,
L
is z-index: 11
and m
is z-index: 1
Thank you so much for help and explaining! It works as it should now 🥰
you're welcome