En esta corta entrada veremos cómo crear un sencillo efecto neón como el publicado en la imagen promocional de esta entrada que lo podemos conseguir con muy poco CSS.
Con nuestro documento HTML listo, creamos el CSS base para darle estilo a nuestro contenido:
body {
background-color: #000000;
font-size: 50px;
}
h1 {
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
Un fondo oscuro, un tamaño de letra grande, texto centrado y todo el texto en mayúscula básicamente; ahora para lograr en efecto neón tenemos:
.neon {
color: #fff;
margin-top: 30%;
text-shadow:
0 0 5px rgba(0,178,255,1),
0 0 10px rgba(0,178,255,1),
0 0 20px rgba(0,178,255,1),
0 0 40px rgba(38,104,127,1),
0 0 80px rgba(38,104,127,1),
0 0 90px rgba(38,104,127,1),
0 0 100px rgba(38,104,127,1),
0 0 140px rgba(38,104,127,1),
0 0 180px rgba(38,104,127,1);
}
Como podemos ver, simplemente aplicamos sombras sobre sombras en distintas posiciones y así creamos un bonito patrón como de neón; aplicamos el color más claro en un comienzo, el más luminoso y a posterior un color un poco más oscuro; con eso logramos el efecto neón que cuyo experimento puedes conseguir al inicio y final de esta entrada.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter