Some textual content results are comparatively exhausting to tug in CSS, the primary motive being we are unable to focus on particular person characters (one thing many people need within the type of ::nth-letter(), though we’ve got foundation for it with ::first-letter that offers us entry to a field ingredient’s first glyph.
However perhaps there are some things we are able to use immediately with what we have already got.
For instance, the CSS letter-spacing property adjusts the area between all characters in a block of textual content. Optimistic values add area to the precise aspect of every glyph (in a left-to-right writing mode), and unfavorable values shrink the width of the glyph field, inflicting letters to overlap and even transfer the opposite approach.
The letter-spacing accepts size models, and proportion (relative to font dimension). It’s animateable, and as we noticed earlier than, the unfavorable values can shrink it down or reverse it. Which is one thing we are able to make use of.
Overlapping and separating letters
It’s fairly simple to fully overlap the characters as a place to begin and setting it’s coloration to clear to visually disguise it.
label {
letter-spacing: -1ch;
coloration: clear;
/* and so on. */
}From there, we are able to reveal the textual content by animating that letter-spacing worth to a optimistic worth and updating the coloration to a visual worth, like when a checkbox is :checked:
li:nth-of-type(2) label {
text-align: heart;
}
li:nth-of-type(3) label {
text-align: proper;
}
enter:checked + label {
letter-spacing: 0ch;
coloration: black;
transition: letter-spacing 0.6s, coloration 0.4s;
}Be aware: The CSS ch unit is a relative size representing the width of the zero (0) glyph.
The labels go from unfavorable letter-spacing to regular spacing and the coloration updates to black. Each these adjustments occur over a transition.
The second and third labels are given heart and proper textual content alignments and thus when unfavorable letter spacing is utilized they bundle up on the given alignment place, heart and proper, respectively. When letter``-``spacing goes from unfavorable to zero (or any optimistic worth) the letters separate from that very same alignment place.
Thus, we get a textual content reveal impact! Let’s take a look at some extra.
Displaying and hiding textual content
Verify this out. We are able to toggle a checkbox label as a enjoyable interactive UI contact:
label {
overflow: clip;
/* and so on. */
}
span {
/* The primary label */
&:nth-of-type(1) {
/* Default spacing: letters are totally seen */
letter-spacing: 0ch;
/* When the checkbox is checked, goal this textual content */
:checked + * & {
/* collapse letters on prime of one another, hiding them */
letter-spacing: -2ch;
text-indent: -1.5ch;
/* Use a "bouncy" cubic-bezier for spacing */
transition: 0.4s letter-spacing cubic-bezier(.8, -.5, .2, 1.4),
0.1s text-indent;
}
}
/* The second label */
&:nth-of-type(2) {
/* Initially collapsed (letters overlap) */
letter-spacing: -1ch;
coloration: clear;
/* When the checkbox is checked, goal this textual content */
:checked + * & {
/* Returns to regular spacing */
letter-spacing: 0ch;
coloration: black;
/* Barely delay the looks so it begins after the primary textual content begins to cover */
transition:
0.4s letter-spacing cubic-bezier(.8, -.5, .2, 1.4) 0.3s,
0.8s coloration 0.4s;
}
}
}When the field is checked, a unfavorable letter-spacing worth (-2ch) and text-indent worth (-1.5ch) is used on the primary to slip it out of the container field. We use overflow: clip to fully disguise the textual content.
Concurrently, the textual content within the second textual content goes from a letter-spacing worth of -1ch to 0ch, which reveals it. To cover this overlapped textual content at -1ch, a clear coloration was provided that’s turned to black when the checkbox is checked.
Utilizing with different glyph field styling
Right here’s one other enjoyable one. We are able to begin with an acronym that reveal the complete textual content on hover. Once more, we’ve got current options to assist us pull this off, together with ::first-letter and ::first-line.
We’ll begin with this markup:
United
Nations
Worldwide
Kids's
Emergency
Fund
.phrases {
letter-spacing: -1ch;
coloration: clear;
/* and so on. */
&::first-letter {
coloration: black;
}
determine:hover + #acronym & {
letter-spacing: 0ch;
coloration: black;
transition: letter-spacing 0.4s cubic-bezier(.8, -.5, .2, 1.4) /* and so on. */;
}
}Every phrase within the UNICEF acronym initially has letter-spacing: -1ch to shrink the textual content, and coloration: clear to maintain the shrunk textual content hidden, besides the ::first-letter that has coloration: black so it stays seen though the remainder of the textual content is stacked beneath it.
Now, we are able to goal the picture on :hover and choose your complete textual content in order that the letter-spacing worth for every phrase decreases to 0ch and coloration: black is utilized, exhibiting what’s remaining of the phrases:
What else can we do?
I don’t know! However that’s the place you are available in. Clearly, a hypothetical ::nth-letter selector can be superb for all types of textual content results. But it surely’s neat that we are able to create some semblance of it immediately with current options, like letter-spacing, ::first-letter, and ::first-line.
What are you able to cook dinner up figuring out we’ve got these constraints?
