domingo, 14 de febrero de 2021

👨‍💻 Efecto de texto neon con solo CSS

El dia de hoy expongo un pequeño efecto css que hace que el texto tenga una sombra detras es por eso que se le llama EFECTO neon, se hace utilizando la propiedad Text-shadow.

Les mostrare algunos de los ejemplos que pueden utilizar al crear este muy util y agradable efecto que les podrá servir a su web.

Existen varios colores que pueden aplicar a este código, si tu dominas muy bien los colores no se te hará muy dificíl

Acá el código HTML del primer modelo. En los siguientes se mantiene el mismo código, variando únicamente el estilo css de la sombra:


EJEMPLO UNO DE UN TEXTO NEON COLOR MORADO

EJEMPLO DOS DE UN TEXTO NEON COLOR VERDE

EJEMPLO TRES DE UN TEXTO NEON COLOR ROJO
EJEMPLO TRES DE UN TEXTO NEON COLOR CELESTE


CÓDIGO PARA APLICAR EL TEXT SHADOW


1.- MORADO  {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,0 0 0.2em #87F}
2.- VERDE   {text-shadow: 0 0 0.2em #8F7}                                
3.- ROJO    {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
4.- CELESTE  {text-shadow: 0 0 5px rgba(0,178,255,1)}

Otros ejemplos:

Ejemplo 5

El código html es el siguiente:

El código css es el siguiente:


Ejemplo 6

El código html es el siguiente:

El código css es el siguiente:

Modelo 7


El código html es el siguiente:

El código css es el siguiente:




FUENTES.
https://helpwebpro.es.tl/Efecto-neon-con-CSS.htm
https://www.bufa.es/obtener-ciudad-pais-ip/