miércoles, 22 de enero de 2014

Efectos de texto en HTML y CSS3: Texto de Neón

Ahora vamos a ver como hacer un efecto de luz de neón para nuestro texto, este efecto es bastante agradable visualmente y lo mejor es que al hacerlo con css3 no tendremos que trepar imágenes que pueden ser pesadas y demorar la carga de nuestra página.

Para hacerlo es similar al efecto de 3d, es decir, aplicamos varias capas de sombras de diferentes tamaños, pero en este caso también jugamos con la opacidad para dar el efecto de luz.

Pues sin más aquí les dejo el código.




1. Primero el html

<!DOCTYPE HTML>
<html>
<head>
<title>Texto en Neon</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<h1>Este es un texto de Neon</h1> <!--en h1 para que se le aplique el efecto-->
</body>

</html>

2.- Ahora el css

body{
background: black; /*fondo obscuro para observar mejor el efecto*/
}

h1{
text-shadow: 0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #ff00de,
                   0 0 70px #ff00de,
                   0 0 80px #ff00de,
                   0 0 100px #ff00de,
                   0 0 150px #ff00de;

} /*se lo aplico a un encabezado pero se le puede aplicar a 

cualquier etiqueta de texto o crear una clase o id*/


Bueno, eso es todo por ahora y nos leemos luego, cualquier duda no duden en realizarla por este medio.

No hay comentarios:

Publicar un comentario