Las nuevas especificaciones de CSS3 nos permiten crear espectaculares efectos con unas pocas líneas de código.
Éste es el caso de la propiedad text-shadow, la cual nos permitirá crear desde un simple sombreado a un efecto de luz de neón.
Valores que admite la propiedad text-shadow:
Los valores de entrada que admite text-shadow son cuatro:
text-shadow: h-shadow v-shadow blur color;
- h-shadow: Desplazamiento en el eje X (Horizontal)
- v-shadow: Desplazamiento en el eje Y (Vertical)
- blur: Valor del difuminado
- color: Valor del color de la sombra
Crear una sombra sencilla
Para añadir el efecto de sombreado a una etiqueta h1, añadiremos esta línea:
h1 {
text-shadow:2px 2px #555;
}
Crear una sombra con efecto de difuminado
Al ejemplo anterior, habria que añadirle un valor para blur, resultando:
body{
background-color: #666;
}
h1 {
text-shadow:3px 2px 3px #111;
color: #999;
}
Crear el efecto de luz de neón
Podemos varias capas difuminando la sombra y variando el color. Con ello obtendremos un efecto tan interesante como el que os mostramos a continuación:
body{
background-color: #000;
}
h1 {
text-shadow: 0 0 1px #fff,
0 0 2px #fff,
0 0 3px #fff,
0 0 4px #ff00de,
0 0 7px #ff00de,
0 0 8px #ff00de,
0 0 20px #ff00de,
0 0 30px #ff00de;
}
