Breaking

Post Top Ad

Your Ad Spot

jueves, 23 de agosto de 2018

Como hacer Texto con efecto Neón en CSS

Un sencillo ejemplo de como simular un efecto “neón” sobre una tipografía en CSS3, sin utilizar imágenes. Para ello utilizamos principalmente text-shadow para dar resplandor al texto, text-fill-color para colorear el interior del texto, text-stroke-color para el color del borde exterior, y text-stroke-width para el ancho del borde.


https://i.gyazo.com/24f2b9837eb654802c0adbad84013e5c.png 

Solo tienen que colocar este codigo entre las etiquetas <head></head>

<style type="text/css">
.neon {
font-size: 50px;
letter-spacing:-2px;
color: #fff;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 25px #ff00de;
-webkit-text-fill-color: #F4ECFF;
-webkit-text-stroke-color:#C546F7;
-webkit-text-stroke-width:0.2px;
-moz-text-fill-color: #F4ECFF;
-moz-text-stroke-color:#C546F7;
-moz-text-stroke-width:0.2px;
}
</style>

y ahora este codigo donde quieras que aparezca tu mensaje con este estilo

<div class="neon">
TEXTO NEÓN
</div>


Bueno eso seria todo espero les guste este pequeño estilo y tengan en cuenta que para que resalte el estilo debe ir con un fondo obscuro bueno me despido y les dejo un

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas