Generador de efectos de texto CSS

La mayoría de las galerías de efectos de texto CSS te ofrecen un ajuste preestablecido fijo: un brillo de neón, una extrusión 3D, tómalo o déjalo. En cambio, este generador construye el CSS a partir de sus parámetros, en el texto que realmente escribe. Elija brillo de neón, extrusión 3D, tipografía/relieve, delineado o relleno degradado desde la selección de efectos, ajuste los propios controles de ese efecto y la vista previa en vivo más el bloque CSS copiable debajo se actualizan con cada cambio.

El efecto de extrusión 3D es el que vale la pena comprender: para una profundidad elegida (número de capas apiladas) y un ángulo, la capa i se compensa con i × cos(ángulo) horizontalmente y i × sin(ángulo) verticalmente, calculada en JavaScript con las funciones trigonométricas reales, no leídas de una tabla de búsqueda de ángulos preestablecidos. A 45 grados, los desplazamientos horizontal y vertical resultan iguales para cada capa, porque el coseno y el seno de 45° tienen el mismo valor; gire el control deslizante de ángulo y observe cómo toda la pila de capas de "texto-sombra" oscilan alrededor de las letras en tiempo real, cada una oscurecida un poco más que la anterior para simular una cara iluminada en 3D.

El brillo de neón acumula cuatro capas de "sombra de texto" con un radio de desenfoque creciente en el color elegido, con un parpadeo opcional: actívelo y se generará y animará en vivo una regla "@keyframes" con una secuencia aleatoria de caídas de opacidad, y un botón de reproducción aleatoria le permitirá volver a enrollar el patrón sin escribir un solo fotograma clave a mano. El texto delineado aplica `-webkit-text-stroke` para los navegadores que lo admiten, además de un respaldo honesto de `text-shadow` de 8 direcciones para los que no lo hacen; ambas líneas se envían en el CSS copiado con una nota sobre el motivo. El relleno de degradado recorta un "degradado lineal" a la forma del texto con "clip de fondo: texto", ahora una propiedad estándar con amplio soporte, manteniendo la antigua línea con el prefijo "-webkit-" para motores heredados.

Todo se muestra localmente en su navegador: ningún texto que escriba se envía a ninguna parte. Copie el bloque CSS terminado, incluida la regla `@keyframes` cuando el efecto la necesite, directamente en su hoja de estilo.