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; }