Change text size and color incrementally
I want to know if it's possible to change the text size and color incrementally on the same line, like this:
I want to use CSS only if possible. Any other solution, that at least doesn't force me to put each letter in its own span, is welcome, too.
body {
font-family:monospace;
}<span style="font-size:50px;">L</span><span style="font-size:45px;opacity:0.7">o</span><span style="font-size:38px;opacity:0.5">r</span>...Solution 1:
What about some transformation and gradient without all these markup:
body {
perspective: 250px;
perspective-origin: bottom;
}
div {
font-size: 70px;
background: linear-gradient(to right, black,rgba(0,0,0,0.3),rgba(0,0,0,0.2));
display: inline-block;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
transform: rotateY(70deg);
transform-origin: left;
}<div>
Lorem Ipsum Lorem
</div>Solution 2:
That really depends on your HTML markup. You can't do this with plain text "Lorem ipsum", but you can do it if each letter is wrapped in its own separate element pretty simply:
body > span {
font-size: 72px;
}
span > span {
font-size: 85%;
opacity: 0.8;
}<span>
L<span>
o<span>
r<span>
e<span>
m <span>
i<span>
p<span>
s<span>
u<span>
m
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>You likely won't be able to do this without modifying your existing markup or introducing some JavaScript to do this for you, however.
As for the colour, you can change the opacity of each letter with this approach (as per the above example), but I'm not sure if this is possible as easily without having to apply styling to each letter individually.
Solution 3:
Using James Donnelly answer with a bit of JS:
format = ([head, ...tail]) => {
if(tail.length == 0)
return "<span>" + head + "</span>";
return "<span>" + head + format(tail) + "</span>";
}
var el = document.querySelector(".test");
el.innerHTML = format(el.innerText).test > span {
font-size: 72px;
}
span > span {
font-size: 85%;
opacity: 0.8;
}<div class="test">
Lorem ipsum
</div>