Añadir sombras a los textos mediante CSS

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

Facebooktwittergoogle_plus