La mayoría de los efectos de texto CSS que parecen complicados están hechos de una propiedad. El letrero de neón en una página de inicio, el contorno duro del título de un juego, las letras naranjas apiladas que parecen una portada de disco de los años 70: cada una de ellas es única text-shadow declaración con varias capas separadas por comas. La sintaxis es corta. La parte difícil es seleccionar compensaciones y valores borrosos que se lean bien y recordar qué capa pinta encima.
Esta guía cubre el text-shadow gramática, cómo funcionan las capas, las recetas detrás de los efectos comunes con los valores exactos que utilizan y los errores que hacen que el texto sombreado sea difícil de leer o lento de renderizar. Cada ejemplo se puede reconstruir en el Generador de sombras de texto CSS, que muestra el resultado en vivo y escribe la declaración por usted.
TL;Dr:
text-shadowtoma una lista de sombras separadas por comas, cada una escrita comooffset-x offset-y blur-radius color. La primera sombra de la lista pinta en la parte superior. No tiene valor de dispersión y noinsetpalabra clave, diferentebox-shadow. Los brillos son varias sombras sin desplazamiento con desenfoque creciente, los contornos son cuatro sombras duras de un píxel y el texto 3D es una pila de sombras duras, cada una de ellas un píxel más alejada. El Generador de sombras de texto Toolz los construye con controles deslizantes y ocho ajustes preestablecidos, del lado del cliente, gratis, sin registro.
¿Qué es la propiedad de sombra de texto CSS?
los text-shadow la propiedad pinta una o más sombras detrás de los glifos de un elemento 's texto. Está definido en el W3C Módulo de Decoración de Texto CSS Nivel 3, y su valor es cualquiera de los dos none o una lista de sombras separada por comas.
Cada sombra tiene hasta cuatro partes:
| Parte | Requerido | Lo que hace | valores permitidos |
|---|---|---|---|
| Desplazamiento horizontal | sí | Mueve la sombra hacia la derecha (positiva) o hacia la izquierda (negativa) | Cualquier longitud, por ejemplo. 2px, -0.1em |
| Desplazamiento vertical | sí | Mueve la sombra hacia abajo (positiva) o hacia arriba (negativa) | Cualquier longitud |
| Radio borroso | No, el valor predeterminado es 0 |
Suaviza el borde; más grande significa más borroso | Cero o una longitud positiva. Negativo no es válido |
| Color | No, el valor predeterminado es currentColor |
Color de sombra, incluida la transparencia | Cualquier color CSS |
El color puede ir primero o último. text-shadow: #000 1px 1px y text-shadow: 1px 1px #000 son la misma sombra. Si dejas el color fuera, la sombra toma el texto y el color #39, que rara vez es lo que deseas para una sombra desplegable pero es útil para un brillo rápido en el color del texto.
Una sombra nunca cambia de diseño. No aleja los elementos vecinos ni hace crecer el elemento 's box, por lo que un desenfoque grande puede derramarse fuera del cuadro y ser cortado por uno de los padres overflow: hidden.
¿en qué se diferencia text-shadow de box-shadow?
text-shadow sigue la forma de cada letra, mientras box-shadow sigue el rectángulo del cuadro fronterizo element's. Esa es la diferencia práctica y decide a cuál se llega. La gramática también difiere.
| ráfaga | text-shadow |
box-shadow |
|---|---|---|
| Forma de la sombra | Cada glifo delinea | El cuadro element's, incluidas las esquinas redondeadas |
| Radio de dispersión | No disponible | Sí, cuarto largo |
inset palabra clave |
No disponible | sí |
| Múltiples capas | Sí, separados por comas | Sí, separados por comas |
| Orden de pintura | Primero listado en la parte superior | Primero listado en la parte superior |
| Color predeterminado | currentColor |
currentColor |
| Uso Típico | Encabezados, logotipos, legibilidad sobre imágenes | Tarjetas, botones, elevación |
El valor de dispersión que falta es la razón por la que los esquemas de texto necesitan cuatro sombras en lugar de una. Con box-shadow puedes escribir 0 0 0 2px black para hacer crecer un anillo sólido. Con el texto no hay forma de expandir el glifo, por lo que lo falsificas compensando copias en varias direcciones. Si estás diseñando el contenedor en lugar de las palabras, el guía del generador de sombras de caja cubre capas extendidas, insertadas y en alzado.
¿cómo funciona la superposición de múltiples sombras de texto?
Una sola declaración puede contener tantas sombras como quieras, separadas por comas, y el navegador pinta la primera más cercana al espectador. La última sombra de la lista se encuentra al final. El texto en sí siempre pinta por encima de todos ellos.
Ese orden es importante cuando las capas se superponen. Compare estas dos declaraciones:
/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;
/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;
En el primero, la copia negra nítida permanece nítida y la neblina amarilla se encuentra detrás de ella. En el segundo, el brillo amarillo se lava sobre la copia negra y la suaviza. Mismas sombras, aspecto diferente.
El generador sigue la misma regla. La capa 1 en las pestañas de capa es la primera sombra en la salida, por lo que pinta en la parte superior. Agregar una capa lo agrega al final de la lista, detrás de las demás. Para mover una capa hacia adelante, la eliminas y la recreas o editas el CSS copiado a mano.
¿qué valores escribe el generador Toolz?
los generador de sombras de texto le da a cada capa cinco controles y escribe una declaración en un formato fijo. Saber que ese formato ayuda cuando pegas el resultado en un código base con sus propias convenciones.
| Control | Rango | Paso | Escrito como |
|---|---|---|---|
| Compensación X | -50px px | 1px | Npx |
| Compensación Y | -50px px | 1px | Npx |
| Desenfocar | 0px a 100px | 1px | Npx, incluido 0px |
| Color | Selector de color | - | Hexágono de 6 dígitos |
| Opacidad | 0% până la 100% | 1% | Agregado como dos dígitos hexadecimales después del color |
La opacidad se pliega en el color como un valor hexadecimal de 8 dígitos, siguiendo el Notación hexadecimal de nivel 4 del módulo de color CSS. Los dos últimos dígitos son el canal alfa en una escala de 0 a 255, por lo que la herramienta multiplica la opacidad por 255, redondea y se convierte a hexadecimal.
Así es como funciona eso para algunas opacidades:
| Control deslizante de opacidad | Veces 255 | Redondeado | Hex alfa | Color de ejemplo |
|---|---|---|---|---|
| 100% | 255 | 255 | ff |
#000000ff |
| 90% | 229,5 | 230 | e6 |
#4466eee6 |
| 70% | 178,5 | 179 | b3 |
#4466eeb3 |
| 60% | 153 | 153 | 99 |
#00000099 |
| 35% | 89,25 | 89 | 59 |
#00000059 |
| 25% | 63,75 | 64 | 40 |
#00000040 |
Cada navegador actual lee un hexágono de 8 dígitos. Si debe admitir un navegador muy antiguo, reescriba el color como rgba() după copiarea: #00000099 se convierte en rgba(0, 0, 0, 0.6).
La herramienta solo acepta entradas de control deslizante y selector, por lo que los valores son píxeles completos. Para una sombra medida en em, que escala con el tamaño de fuente, copie el CSS e intercambie las unidades en su hoja de estilo. Un 2px el texto del cuerpo desplazado es de 16px 0.125em.
¿cómo se crea un efecto de texto con brillo de neón?
Un brillo de neón consta de varias sombras con desplazamiento cero, el mismo color brillante y desenfoque creciente. Cada capa agrega un halo más ancho y tenue, y juntas parecen una luz que sangra en el aire circundante.
El generador se abre en su preajuste Neon Glow, lo que produce esto:
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
Tres capas, el desenfoque se duplica cada vez (7, 14, 28), la opacidad disminuye del 100% al 90% al 70%. La capa ajustada de 7px le da a las letras un núcleo brillante y la capa de 28px extiende el color. Sobre un fondo oscuro con texto blanco se lee como un tubo iluminado. Sobre un fondo claro, la mayor parte del efecto desaparece, razón por la cual la vista previa tiene un interruptor Light bg / Dark bg: verifique ambos antes de enviar un brillo a un sitio con un interruptor de tema.
Para fortalecer el brillo, agregue una cuarta capa a 56 px de desenfoque o repita la capa de 7 px dos veces. Repetir una capa acumula su opacidad y hace que el núcleo sea más intenso sin ensancharlo.
¿cómo se describe el texto con sombras de texto?
Coloca cuatro sombras duras (borrosas) 0) un píxel en cada diagonal. Su superposición traza el borde de cada glifo.
El preestablecido Esquema escribe:
text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;
Esto funciona bien en un píxel. En dos o tres píxeles, los espacios comienzan a mostrarse en los puntos medios de las curvas y los bordes rectos, porque las cuatro copias solo cubren las diagonales. Para un contorno más grueso, agregue cuatro capas más en los ejes rectos (0 -2px, 2px 0, 0 2px, -2px 0) entonces ocho copias rodean cada letra.
Existe una alternativa sin sombras. -webkit-text-stroke dibuja un trazo real a lo largo de la ruta del glifo y es compatible con los navegadores actuales a pesar de su prefijo. Está centrado en el contorno, por lo que se alimenta de letras finas y se especifica en el estándar de compatibilidad WHATWG en lugar de en un módulo CSS. Para contornos pequeños y nítidos en el texto mostrado, el truco de las cuatro sombras sigue siendo la opción más predecible.
¿cómo se hace texto 3D o extruido?
Apila varias sombras duras del mismo color, cada una desplazada un píxel más abajo y hacia la derecha. Cada copia agrega un píxel de profundidad y el ojo lee la pila como el lado de una letra sólida.
El ajuste preestablecido Retro 3D:
text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;
Tres capas naranjas construyen una extrusión de tres píxeles, y una cuarta capa negra con un 25% de opacidad se encuentra un píxel más lejos como una sombra de contacto que fundamenta las letras. Para una extrusión más profunda, siga agregando capas naranjas con los desplazamientos 4, 5, 6 y mueva la capa oscura hasta el final. Doce capas para una extrusión de 12px son normales para un título de gran héroe.
El preajuste Long Shadow utiliza la misma idea con espacios y opacidad que se desvanece:
text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;
Las compensaciones crecen (1, 3, 6, 10) mientras que la opacidad cae (20%, 15%, 10%, 6%), por lo que la sombra se aleja diagonalmente en lugar de formar un bloque sólido.
¿qué receta de sombras de texto se adapta a qué efecto?
Aquí hay los ocho ajustes preestablecidos en el generador, con la idea detrás de cada uno para que puedas adaptarlos.
| Preestablecido | Capas | Compensaciones | Desenfocar | Idea |
|---|---|---|---|---|
| Suave | 1 | 0, 2px | 4px | Sombra sutil con un 35% de negro, segura para la mayoría de los títulos |
| Difícil | 1 | 2px, 2px | 0 | Copia nítida offset al 60% negro, un aspecto de impresión plana |
| Resplandor de neón | 3 | 0, 0 | 7, 14, 28px | Mismo color, volviéndose borroso, para luz sobre oscuridad |
| Retro 3D | 4 | 1 a 4px diagonales | 0 | Copias impresas escalonadas más una tenue sombra de contacto |
| Esquema | 4 | +/-1px diagonales | 0 | Cuatro copias rastreando el borde del glifo |
| Estampado | 2 | -1px/-1px și 1px/1px | 0 | Blanco resaltado arriba a la izquierda, tono oscuro abajo a la derecha |
| Fuego | 3 | 0, -1 / -2 / -4px | 4, 10, 18px | De amarillo a naranja y a rojo, subiendo hacia arriba |
| Sombra larga | 4 | 1, 3, 6, 10px diagonales | 0 | Brecha creciente, opacidad cada vez menor |
El relieve es el que la gente mal lee. Combina una sombra clara hacia arriba y hacia la izquierda con una sombra oscura hacia abajo y hacia la derecha, que imita la luz de la parte superior izquierda que golpea las letras en relieve. Cambie los dos colores y el texto se verá presionado en la página, el clásico efecto tipográfico. Ambos solo funcionan cuando el color del texto está cerca del color de fondo; en texto de alto contraste, las luces desaparecen.
El fuego es el único preestablecido con desplazamientos verticales negativos. Cada capa se mueve más hacia arriba y se vuelve más borrosa y roja, por lo que el calor parece elevarse de las letras.
¿la sombra de texto perjudica la legibilidad o la accesibilidad?
Puede hacerlo, y el riesgo crece con el desenfoque y el desplazamiento. Una sombra no cambia la relación de contraste que mide WCAG, que se calcula entre el color del texto y el color de fondo. El Mínimo de contraste WCAG 2.1 solicita 4,5:1 para texto normal y 3:1 para texto grande, y un brillo no le ayuda a cumplirlo en papel.
En la práctica, una fina sombra oscura detrás de un texto claro en una foto ocupada hace que las letras sean más fáciles de distinguir, porque separa los bordes del glifo de la imagen. Un brillo intenso en un texto pequeño hace lo contrario: el halo llena los contadores de letras como "e" y "a" y la palabra se convierte en papilla.
Algunas pautas que aguantan:
- Mantenga sutiles las sombras del texto del cuerpo. Algo como
0 1px 2px rgba(0, 0, 0, 0.3)es suficiente. - Guarde efectos multicapa para texto en pantalla grande, aproximadamente 32px o más.
- Verifique el efecto tanto en fondos claros como oscuros si su sitio tiene un tema alternar.
- No confíes en la sombra para rescatar el bajo contraste. Primero arregla el color del texto.
- Pruebe en el tamaño más pequeño que alcance el encabezado en un teléfono, donde la sombra es proporcionalmente mayor.
¿Qué ralentiza la sombra de texto y cuáles son los errores comunes?
El desenfoque es la parte cara. Cada capa borrosa debe rasterizarse y borrarse en cada repintado, y el costo aumenta con el radio borroso y la cantidad de texto. El Referencia MDN para sombras de texto cubre la sintaxis. El aspecto del rendimiento es fácil de razonar: un brillo de tres capas en un solo encabezado es barato, y el mismo brillo en cada párrafo de un artículo largo, repintado durante el desplazamiento, es una fuente común de jank en teléfonos de baja potencia.
Errores que aparecen una y otra vez:
| Error | Síntoma | Arreglar |
|---|---|---|
Escribir un valor extendido como 0 0 4px 2px red |
Se ignora toda la declaración | Eliminar la cuarta longitud; la sombra de texto no tiene extensión |
Añadiendo inset |
Declaración ignorada | No es compatible con texto; utilice un relieve más ligero en su lugar |
Desenfoque negativo, por ejemplo. -2px |
Declaración ignorada | El desenfoque debe ser cero o positivo |
| Faltan comas entre capas | Declaración ignorada, nada se traduce | Separa cada sombra con una coma |
| Resplandor recortado en los bordes | Halo cortado en línea recta | Padre tiene overflow: hidden; agregar relleno |
| Resplandor invisible | Parece que no pasa nada | Brillo de luz sobre fondo claro; prueba en la oscuridad |
Prefijo del proveedor -webkit-text-shadow |
Inofensivo pero inútil | Utilice simple text-shadow; no necesita prefijo |
Vale la pena enfatizar los tres primeros. Una sola parte no válida invalida toda la declaración, no solo esa capa, por lo que un error tipográfico en la capa cuatro de un efecto 3D de doce capas elimina las doce. La salida del generador & #39;s siempre es válida, lo cual es una de las razones para construir la pila allí y pegarla.
¿cuándo deberías utilizar un generador en lugar de escribir sombras de texto a mano?
Una sola sombra suave es más rápida de escribir que de hacer clic. Cualquier cosa con tres o más capas se construye visualmente más rápido, porque estás juzgando una mirada, y una mirada es difícil de juzgar a partir de números. El generador también es útil para aprender: elige un ajuste preestablecido, cambia una capa y observa qué parte del efecto se mueve.
El generador Toolz se ejecuta completamente en el navegador. La vista previa, la lista de capas y el CSS se calculan en la página, no se carga nada y sigue funcionando sin conexión una vez cargado. Es gratuito, no hay registro. Copiar CSS se cuenta con una asignación de uso diario, como otras herramientas del sitio; la edición y la vista previa no lo son.
Lo que no hace: no tiene em investigaciones operacionales rem unidades, sin campos numéricos escritos, sin arrastrar para volver a ordenar para capas y sin fuente personalizada en la vista previa. Para ellos, copie la declaración y ajústela en su propia hoja de estilo o herramientas de desarrollo del navegador.
Si el efecto que desea es un elemento borroso o recoloreado en lugar de una sombra, Filtros CSS como drop-shadow() y blur() aplicar a elementos completos, incluidas imágenes. Los paneles esmerilados detrás del texto son un trabajo para el generador de morfismo de vidrio, y los botones extruidos suaves pertenecen al generador de neumorfismo. El conjunto completo de compiladores visuales de CSS está en el Centro de herramientas CSS, y el Guía del generador de gradiente CSS combina bien con efectos de texto cuando quieres un fondo degradado detrás de un título brillante.
Un ejemplo trabajado: un título de héroe legible sobre una foto
Digamos que tienes texto blanco de 64px sobre una foto brillante de la playa y las letras siguen desapareciendo en la arena. El objetivo es primero la legibilidad y luego el estilo.
Comience en el herramienta de sombras de texto con el preajuste Soft: 0px 2px 4px #00000059. En una imagen ocupada que es demasiado tenue. Aumente la opacidad al 60% y difumine a 8px, lo que da 0px 2px 8px #00000099. Los bordes se separan del fondo, pero los trazos finos siguen parpadeando.
Agregue una segunda capa con desplazamiento cero, 2px de desenfoque y 50% de negro: 0px 0px 2px #00000080. Debido a que lo agregaste en segundo lugar, pinta detrás de la primera capa, pero abraza el borde del glifo y le da a cada trazo un borde delgado y oscuro. El resultado:
.hero-title {
color: #fff;
font-size: 64px;
text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}
Dos capas, ambas baratas de renderizar, y el título se mantiene en la arena, el cielo y el oleaje. En un teléfono donde el título cae a 36px, los mismos valores de píxeles son proporcionalmente más pesados; convirtiendo a em los mantiene en sintonía (0 0.03em 0.125em la 64px).
