Algunos efectos de texto son difíciles de lograr en CSS, principalmente porque a nosotros No se puede apuntar a un solo rol (algo que muchos de nosotros queremos La forma es ::nth-letter()aunque tenemos la base ::first-letter Esto nos da acceso al primer glifo del elemento de caja.
Pero tal vez haya algo que podamos usar hoy con lo que ya tenemos.
Por ejemplo, CSS letter-spacing La propiedad ajusta el espacio entre todos los caracteres en el bloque de texto. El valor positivo aumenta el espacio. el lado derecho de cada glifo (modo de escritura de izquierda a derecha), y Los valores negativos reducirán el ancho del cuadro de glifo.provocando que las letras se superpongan o incluso se muevan en direcciones opuestas.
este letter-spacing Acepta unidades de longitud y porcentajes (en relación con el tamaño de fuente). Es animable y, como vimos antes, los valores negativos pueden reducirlo o invertirlo. Esto es algo que podemos aprovechar.
Letras superpuestas y separadas
Es muy fácil conseguir que el personaje se superponga completamente como punto de partida y hacerlo color llegar transparent Ocultarlo visualmente.
label {
letter-spacing: -1ch;
color: transparent;
/* etc. */
}Desde allí, podemos animar el texto. letter-spacing el valor se vuelve positivo y se actualiza color es un valor visible, por ejemplo cuando la casilla de verificación está en :checked:
li:nth-of-type(2) label {
text-align: center;
}
li:nth-of-type(3) label {
text-align: right;
}
input:checked + label {
letter-spacing: 0ch;
color: black;
transition: letter-spacing 0.6s, color 0.4s;
}notas: CSS ch La unidad es una longitud relativa Representa el ancho cero (0) del glifo.
Las etiquetas comienzan con negativo. letter-spacing al espaciamiento normal y color actualizado a black. Ambos cambios ocurrieron en transition.
La segunda y tercera etiquetas reciben alineación de texto central y derecha, por lo que cuando se aplica un espaciado negativo entre letras, se agrupan en las posiciones de alineación dadas (centro y derecha) respectivamente. cuando letter``-``spacing De negativo a cero (o cualquier valor positivo), las letras se separan de la misma posición de alineación.
¡De esta manera, obtenemos el efecto de visualización de texto! Veamos un poco más.
Mostrar y ocultar texto
Echa un vistazo a esto. Podemos alternar las etiquetas de las casillas de verificación como un toque divertido e interactivo en la interfaz de usuario:
<!-- Simplified for brevity; additional accessibility considerations -->
<input type="checkbox" id="cb">
<label for="cb">
<span>Join the global club</span>
<span>You've begun your journey!</span>
</label>label {
overflow: clip;
/* etc. */
}
span {
/* The first label */
&:nth-of-type(1) {
/* Default spacing: letters are fully visible */
letter-spacing: 0ch;
/* When the checkbox is checked, target this text */
:checked + * & {
/* collapse letters on top of each other, 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;
color: transparent;
/* When the checkbox is checked, target this text */
:checked + * & {
/* Returns to normal spacing */
letter-spacing: 0ch;
color: black;
/* Slightly delay the appearance so it starts after the first text begins to hide */
transition:
0.4s letter-spacing cubic-bezier(.8, -.5, .2, 1.4) 0.3s,
0.8s color 0.4s;
}
}
}Cuando la casilla está marcada, el resultado es negativo. letter-spacing valor(-2ch) y text-indent valor(-1.5ch) por primera <span> Deslícelo fuera de la caja contenedora. usamos overflow: clip Ocultar completamente el texto.
Al mismo tiempo, el segundo párrafo del texto <span> Texto de letter-spacing valor -1ch llegar 0chque lo revela. Ocultar este texto superpuesto -1chuno transparent El color se da para convertirse. black Cuando la casilla de verificación está marcada.
Usar con otros estilos de cuadros de glifos
Aquí hay otro interesante. Podemos comenzar con una abreviatura y mostrar el texto completo al pasar el mouse. Una vez más, nuestras capacidades existentes pueden ayudarnos a lograrlo, incluyendo ::first-letter y ::first-line.
Comenzaremos con este marcado:
<!-- Simplified for brevity -->
<p id="acronym">
<span class="words">United</span>
<span class="words">Nations</span>
<span class="words">International</span>
<span class="words">Children's</span>
<span class="words">Emergency</span>
<span class="words">Fund</span>
</p>.words {
letter-spacing: -1ch;
color: transparent;
/* etc. */
&::first-letter {
color: black;
}
figure:hover + #acronym & {
letter-spacing: 0ch;
color: black;
transition: letter-spacing 0.4s cubic-bezier(.8, -.5, .2, 1.4) /* etc. */;
}
}Cada letra de la abreviatura UNICEF originalmente tenía letter-spacing: -1ch reducir el texto y color: transparent Mantener oculto el texto minimizado excepto ::first-letter eso tiene color: black Por lo tanto, sigue siendo visible incluso si el resto del texto está apilado debajo.
Ahora podemos posicionar la imagen para :hover y seleccione el texto completo para que letter-spacing El valor de cada palabra se reduce a 0ch y color: black Aplicado, mostrando las palabras restantes:
¿Qué más podemos hacer?
¡No tengo ni idea! Pero ahí es donde entras tú. Obviamente, una suposición ::nth-letter Los selectores se ven increíbles con una variedad de efectos de texto. Pero es fantástico que hoy podamos crear algo similar con la funcionalidad existente, p. letter-spacing, ::first-lettery ::first-line.
Sabiendo que tenemos estas limitaciones, ¿qué puedes hacer?
