sábado, marzo 29, 2014

Crear Texto con Efecto Neón (Css)

Leave a Comment

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.

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">
Aqui pondras tu texto tipo Neon  
</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


Fuente: trucodigo.org
If You Enjoyed This, Take 5 Seconds To Share It

0 Comments:

Publicar un comentario