Some textual content results are comparatively laborious to tug in CSS, the principle motive being we are unable to focus on particular person characters (one thing many people need within the type of ::nth-letter(), though we now have foundation for it with ::first-letter that offers us entry to a field ingredient’s first glyph.
However possibly there are some things we will use at the moment with what we have already got.
For instance, the CSS letter-spacing property adjusts the house between all characters in a block of textual content. Optimistic values add house to the proper aspect of every glyph (in a left-to-right writing mode), and destructive values shrink the width of the glyph field, inflicting letters to overlap and even transfer the opposite manner.
The letter-spacing accepts size items, and proportion (relative to font dimension). It’s animateable, and as we noticed earlier than, the destructive values can shrink it down or reverse it. Which is one thing we will make use of.
Overlapping and separating letters
It’s fairly simple to utterly overlap the characters as a place to begin and setting it’s coloration to clear to visually cover it.
label {
letter-spacing: -1ch;
coloration: clear;
/* and many others. */
}From there, we will reveal the textual content by animating that letter-spacing worth to a constructive 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;
}Word: The CSS ch unit is a relative size representing the width of the zero (0) glyph.
The labels go from destructive 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 destructive letter spacing is utilized they bundle up on the given alignment place, heart and proper, respectively. When letter``-``spacing goes from destructive to zero (or any constructive 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.
Exhibiting and hiding textual content
Examine this out. We will toggle a checkbox label as a enjoyable interactive UI contact:
label {
overflow: clip;
/* and many others. */
}
span {
/* The primary label */
&:nth-of-type(1) {
/* Default spacing: letters are absolutely 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 destructive 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 utterly cover 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 will begin with an acronym that reveal the complete textual content on hover. Once more, we now have present options to assist us pull this off, together with ::first-letter and ::first-line.
We’ll begin with this markup:
United
Nations
Worldwide
Youngsters's
Emergency
Fund
.phrases {
letter-spacing: -1ch;
coloration: clear;
/* and many others. */
&::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 many others. */;
}
}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 regardless that the remainder of the textual content is stacked beneath it.
Now, we will goal the picture on :hover and choose the complete textual content in order that the letter-spacing worth for every phrase decreases to 0ch and coloration: black is utilized, displaying 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 could be wonderful for every kind of textual content results. However it’s neat that we will create some semblance of it at the moment with present options, like letter-spacing, ::first-letter, and ::first-line.
What are you able to prepare dinner up understanding we now have these constraints?
