Cómo crear texto de neón con CSS

El texto de neón puede agregar un toque agradable y futurista a cualquier sitio web. Siempre me ha encantado la magia de los letreros de neón y quería recrearlos usando CSS. ¡Pensa en compartir algunos consejos sobre cómo hacerlo! En este artículo, veremos cómo agregar efectos brillantes al texto. También veremos varias formas de animar los letreros de neón, todas usando CSS y fotogramas clave.

Esto es lo que haremos:

Agregar un efecto de brillo al texto

Primero, hagamos que el texto brille. Esto se puede hacer en CSS con la text-shadowpropiedad. Lo bueno text-shadowes que podemos aplicar Múltiples sombras simplemente separándolas por comas:

.neonText {  color: #fff;  text-shadow:    0 0 7px #fff,    0 0 10px #fff,    0 0 21px #fff,    0 0 42px #0fa,    0 0 82px #0fa,    0 0 92px #0fa,    0 0 102px #0fa,    0 0 151px #0fa;}

text-shadowrequiere cuatro valores, los dos primeros representan la posición horizontal y vertical de la sombra, respectivamente. El tercer valor representa el tamaño de la radio desenfoque mientras que el último valor representa el color de la sombra. Para aumentar el tamaño del efecto de brillo, aumentaríamos el tercer valor, que representa la radio de desenfoque. Oh, expresado de otra manera:

text-shadow: [x-offset] [y-offset] [blur-radius] [color];

Esto es lo que obtenemos con ese pequeño fragmento de CSS:

Lo siguiente que quizás te preguntes es ¿qué pasa con todos esos valores? ¿Cómo los conseguí y por qué hay tantos? Primero, agregamos efectos de brillo blanco a los bordes exteriores de las letras del texto con una pequeña radio de desenfoque.

.neonText {  color: #fff;  text-shadow:    /* White glow */    0 0 7px #fff,    0 0 10px #fff,    0 0 21px #fff,}

Los últimos cinco valores son sombras de texto más amplias con una radio de desenfoque mayor que forma el brillo verde.

.neonText {  color: #fff;  text-shadow:    /* White glow */    0 0 7px #fff,    0 0 10px #fff,    0 0 21px #fff,    /* Green glow */    0 0 42px #0fa,    0 0 82px #0fa,    0 0 92px #0fa,    0 0 102px #0fa,    0 0 151px #0fa;}

Sería fantástico si pudiéramos lograr esto con menos de cinco sombras, pero necesitamos todas estas sombras para poder apilarlas unas sobre otras para agregar más profundidad al brillo. Si hubiéramos usado uno solo text-shadow, el efecto no tendría la profundidad necesaria para que pareciera realista.

¡Continúe y experimente con varios tonos y colores, así como tamaños de radio desenfoque! Hay una gran variedad de efectos de brillo geniales que puedes crear, así que prueba diferentes variaciones; Incluso puedes mezclar y combinar colores donde un color se mezcla con otro.

El efecto “parpadeante”

Una cosa que quizás notes sobre los letreros de neón es que algunos de ellos, particularmente los más antiguos, tienden a parpadear. La luz entra y sale. ¡Podemos hacer el mismo tipo de cosas con animaciones CSS! Vamos a @keyframeshacer una animación que enciende y apaga la luz en destellos rápidos y aparentemente aleatorios.

@keyframes flicker {  0%, 18%, 22%, 25%, 53%, 57%, 100% {    text-shadow:      0 0 4px #fff,      0 0 11px #fff,      0 0 19px #fff,      0 0 40px #0fa,      0 0 80px #0fa,      0 0 90px #0fa,      0 0 100px #0fa,      0 0 150px #0fa;  }  20%, 24%, 55% {           text-shadow: none;  }}

¡Eso es realmente todo! Tomamos exactamente las mismas text-shadowpropiedades y valores que teníamos antes, los envolvimos en una @keyframesanimación llamada flickery elegimos puntos en la línea de tiempo para aplicar las sombras, así como puntos que eliminan las sombras por completo.

Todo lo que queda es llamar a la animación donde queremos que parpadee la luz. En este caso particular, solo lo agregaremos al h1elemento. Hacer que una parte de todo el letrero parpadee parece un poco más realista que si aplicamos el parpadeo a todo el texto.

h1 {  animation: flicker 1.5s infinite alternate;     }

Tenga en cuenta que si quisiéramos que todo el letrero parpadeara, técnicamente podríamos eliminar los text-shadowvalores de la .neonTextclase, agregarle la animación y dejar que @keyframesse apliquen las sombras.

¡Es un efecto bastante interesante y agrega más realismo a nuestro texto de neón! Por supuesto, hay otros efectos que también puedes probar, que también se explorarán más a fondo en este artículo. Por ejemplo, ¿qué tal una animación más pulsante o un parpadeo más sutil?

¡Exploremos esos y otros efectos!

Resplandor pulsante

Acabamos de echarle un vistazo rápido a esto. Utiliza fotogramas clave, tal como lo hace el ejemplo anterior, donde especificamos el tamaño del radio desenfoque al inicio y al final de la animación.

Queremos que el tamaño de la radio de desenfoque sea el más pequeño al final de la animación, por lo que simplemente disminuimos los valores de la radio de desenfoque para cada text-shadowvalor en el 0%fotograma clave. De esta manera, el tamaño del desenfoque disminuye y fluye gradualmente, creando un efecto pulsante.

@keyframes pulsate {  100% {    /* Larger blur radius */    text-shadow:      0 0 4px #fff,      0 0 11px #fff,      0 0 19px #fff,      0 0 40px #0fa,      0 0 80px #0fa,      0 0 90px #0fa,      0 0 100px #0fa,      0 0 150px #0fa;  }  0% {    /* Smaller blur radius */    text-shadow:      0 0 2px #fff,      0 0 4px #fff,      0 0 6px #fff,      0 0 10px #0fa,      0 0 45px #0fa,      0 0 55px #0fa,      0 0 70px #0fa,      0 0 80px #0fa;  }}

Una vez más, agregamos la animación a algún elemento. Iremos con h1otra vez:

h1 {  animation: pulsate 2.5s infinite alternate;     }

Aquí está todo junto:

Parpadeo sutil

Podemos atenuar un poco las cosas y hacer que la acción parpadeante sea súper sutil. Todo lo que tenemos que hacer es disminuir ligeramente el tamaño del radio desenfoque en el 0%fotograma clave, pero no tanto como se ve en el ejemplo anterior.

@keyframes pulsate {  100% {    /* Larger blur radius */    text-shadow:      0 0 4px #fff,      0 0 11px #fff,      0 0 19px #fff,      0 0 40px #f09,      0 0 80px #f09,      0 0 90px #f09,      0 0 100px #f09,      0 0 150px #f09;  } 0% {    /* A slightly smaller blur radius */    text-shadow:      0 0 4px #fff,      0 0 10px #fff,      0 0 18px #fff,      0 0 38px #f09,      0 0 73px #f09,      0 0 80px #f09,      0 0 94px #f09,      0 0 140px #f09;  }}

Dado que el parpadeo es más sutil y la reducción de la radio de desenfoque no es tan grande, deberíamos aumentar el número de veces que se produce esta animación por segundo para emular un parpadeo más frecuente. Esto se puede hacer disminuyendo la duración de la animación, digamos simplemente 0.11s:

h1 {  animation: pulsate 0.11s ease-in-out infinite alternate;    }

Usando una imagen de fondo

Sería realmente genial si nuestro letrero estuviera colgado en una pared en lugar de en un espacio vacío. Tomemos una imagen de fondo para eso, tal vez algún tipo de textura de ladrillo de Unsplash o algo así:

body {  background-image: url(wall.jpg);}

Agregar un borde

Un último detalle que podemos añadir es una especie de borde circular o rectangular alrededor del cartel. Es simplemente una buena manera de marcar el texto y hacer que parezca, ya sabes, un letrero real. ¡Al agregar una sombra al borde, podemos darle el mismo efecto de neón que el texto!

Cualquier elemento que sea el contenedor del texto es lo que necesita un borde. Digamos que solo estamos trabajando con un h1elemento. Eso es lo que llega a la frontera. Llamamos a la borderpropiedad taquigráfica para crear un borde blanco sólido alrededor del título, además de un poco de relleno para darle al texto algo de espacio para respirar:

h1 {  border: 0.2rem solid #fff;  padding: 0.4em;}

Podemos redondear un poco las esquinas del borde para que las cosas no queden tan nítidas aplicando un border-radiusen el título. Puede utilizar el valor que mejor le convenga para obtener la redondez exacta que desea.

h1 {  border: 0.2rem solid #fff;  border-radius: 2rem;  padding: 0.4em;} 

¡La última pieza es el brillo! Ahora, text-shadowno funcionará para la frontera aquí, pero está bien porque para eso box-shadowestá diseñada la propiedad. La sintaxis es extremadamente similar, por lo que podemos incluso extraer exactamente lo que tenemos text-shadowy modificar ligeramente los valores:

h1 {  border: 0.2rem solid #fff;  border-radius: 2rem;  padding: 0.4em;  box-shadow: 0 0 .2rem #fff,              0 0 .2rem #fff,              0 0 2rem #bc13fe,              0 0 0.8rem #bc13fe,              0 0 2.8rem #bc13fe,              inset 0 0 1.3rem #bc13fe;}

¿Notas esa insetpalabra clave? Eso es algo text-shadowque no podemos hacer, pero agregarlo al borde box-shadownos permite obtener algo del brillo en ambos lados del borde para lograr una profundidad realista.

¿Qué pasa con la accesibilidad?

Si los usuarios prefieren un movimiento reducido, tendremos que adaptarnos a esto mediante la prefers-reduced-motionconsulta de medios. Esto nos permite eliminar nuestros efectos de animación para hacer que nuestro texto sea más accesible para aquellos que prefieren el movimiento reducido.

Por ejemplo, podríamos modificar la animación parpadeante del lápiz de arriba para que los usuarios que la hayan prefers-reduced-motionhabilitado no vean la animación. Recuerde que aplicamos el efecto de parpadeo h1solo al elemento, por lo que desactivaremos la animación para este elemento:

@media screen and (prefers-reduced-motion) {   h1 {    animation: none;  }}

Es increíblemente importante garantizar que se satisfagan las preferencias de los usuarios, y hacer uso de esta consulta de medios es una excelente manera de hacer que el efecto sea más accesible para aquellos que prefieren el movimiento reducido.

Conclusión

¡Esperamos que esto te haya mostrado cómo crear textos de neón geniales para tu próximo proyecto! Asegúrate de experimentar con varias fuentes, tamaños y colores de radio de desenfoque y no olvides probar también diferentes animaciones: hay un mundo de posibilidades ahí fuera. Y agregue un comentario si ha creado un efecto de sombra elegante que desea compartir. ¡Gracias por leer!