El texto de neón puede agregar un toque agradable y futurista a cualquier sitio web. Siempre me ha gustado la magia de los letreros de neón y quería recrearlos usando CSS. ¡Pensé 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 el text-shadow propiedad. ¿Qué hay de bueno? text-shadow es que podemos aplicarle múltiples sombras con solo separarlas 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-shadow requiere cuatro valores, los dos primeros de los cuales representan la posición horizontal y vertical de la sombra, respectivamente. El tercer valor representa el tamaño del radio de 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 el radio de desenfoque. O, 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 se esté preguntando es ¿qué pasa con todos esos valores? ¿Cómo los obtuve y por qué hay tantos? Primero, agregamos efectos de brillo blanco a los bordes exteriores de las letras del texto con un pequeño 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 de un radio de desenfoque más grande que forma el resplandor 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 genial si pudiéramos lograr esto con menos de cinco sombras, pero necesitamos todas estas sombras para que puedan apilarse unas sobre otras para agregar más profundidad al brillo. Si hubiéramos usado un solo text-shadow en cambio, el efecto no tendría la profundidad necesaria para que parezca realista.
¡Continúe y experimente con varios tonos y colores, así como con tamaños de radio de desenfoque! Hay una gran variedad de efectos de brillo geniales que puede hacer, así que pruebe diferentes variaciones; incluso puede mezclar y combinar colores donde un color se mezcla con otro.
El efecto “parpadeo”
Una cosa que puede notar acerca de 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 lo mismo con las animaciones CSS! Vamos a alcanzar @keyframes para hacer una animación que encienda y apague la luz en destellos rápidos, 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! Hemos tomado exactamente lo mismo text-shadow propiedad y valores que teníamos antes, los envolvió en un @keyframes animación llamada flickery eligió puntos en la línea de tiempo para aplicar las sombras, así como puntos que eliminen por completo las sombras.
Todo lo que queda es llamar a la animación donde queremos que la luz parpadee. En este caso particular, agreguemos solo al <h1> elemento. Tener una parte del parpadeo completo del letrero se siente 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, entonces técnicamente podríamos eliminar el text-shadow valores en el .neonText clase, agregue la animación y deje que el @keyframes aplique las sombras en su lugar.
¡Es un efecto bastante bueno y agrega más realismo a nuestro texto de neón! Por supuesto, también puede probar otros efectos, 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 echar un vistazo rápido a esto. Utiliza fotogramas clave, tal como lo hace el ejemplo anterior, donde especificamos el tamaño del radio de desenfoque al inicio y al final de la animación.
Queremos que el tamaño del radio de desenfoque sea más pequeño al final de la animación, por lo que simplemente disminuimos los valores del radio de desenfoque para cada text-shadow valor en el 0% fotograma clave. De esta manera, el tamaño del desenfoque fluye y refluye 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 <h1> de nuevo:
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 del parpadeo sea súper sutil. Todo lo que tenemos que hacer es reducir ligeramente el tamaño del radio de desenfoque en el 0% fotograma clave, pero no en la medida en que 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 del radio de desenfoque no es tan grande, debemos aumentar el número de veces que ocurre 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 a un mero 0.11s:
h1 {
animation: pulsate 0.11s ease-in-out infinite alternate;
}Usando una imagen de fondo
Sería muy bueno 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:
body {
background-image: url(wall.jpg);
}Agregar un borde
Un último detalle que podemos agregar es una especie de borde circular o rectangular alrededor del cartel. Es solo una buena manera de enmarcar 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 trabajamos con un <h1> elemento. Eso es lo que consigue la frontera. Llamamos al border propiedad taquigráfica para hacer un borde blanco sólido alrededor del título, más 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 sean tan nítidas aplicando un border-radius en el encabezado. Puede utilizar el valor que mejor se adapte a sus necesidades para obtener la redondez exacta que desee.
h1 {
border: 0.2rem solid #fff;
border-radius: 2rem;
padding: 0.4em;
}¡La última pieza es el resplandor! Ahora, text-shadow no funcionará para la frontera aquí, pero está bien porque eso es lo que box-shadow La propiedad está diseñada para hacer. La sintaxis es extremadamente similar, por lo que incluso podemos extraer exactamente lo que tenemos para text-shadow y modificar los valores ligeramente:
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;
}Darse cuenta de inset ¿palabra clave? Eso es algo text-shadow no puede hacer, pero agregarlo a la frontera box-shadow nos permite obtener algo de brillo en ambos lados del borde para obtener una profundidad realista.
¿Y la accesibilidad?
Si los usuarios tienen una preferencia por el movimiento reducido, tendremos que adaptarnos a esto utilizando el prefers-reduced-motion consulta de medios. Esto nos permite eliminar nuestros efectos de animación para que nuestro texto sea más accesible para quienes prefieren el movimiento reducido.
Por ejemplo, podríamos modificar la animación parpadeante del lápiz anterior para que los usuarios que tengan prefers-reduced-motion habilitado no ve la animación. Recuerde que aplicamos el efecto de destello a la <h1> solo elemento, por lo que desactivaremos la animación para este elemento:
@media screen and (prefers-reduced-motion) {
h1 {
animation: none;
}
}Es increíblemente importante asegurarse de que se atiendan 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 quienes prefieren el movimiento reducido.
Conclusión
¡Con suerte, esto le ha mostrado cómo crear un texto de neón genial para su próximo proyecto! Asegúrese de experimentar con varias fuentes, tamaños y colores de radio de desenfoque y no olvide probar también diferentes animaciones: hay un mundo de posibilidades por ahí. Y agregue un comentario si ha creado un bonito efecto de sombra que desea compartir. ¡Gracias por leer!