Añadir sombra una caja de texto sigue el mismo formato que añadir sombra en el texto, y para ello se utiliza la propiedad Box-shadow. Box-shadow es compatible con Safari 4, Firefox 3 y Chrome 1. El código en CSS3 puro sería así:

 

 

 

 

 

box-shadow: x y blur spread color;
  1. Valor horizontal, si es positivo indica que la sombra se dirigirá a la izquierda de la caja, si es negativo, a la derecha de la caja.
  2. Valor vertical de la sombra, si es negativo la sombra estará encima de la caja, si es negativo estará debajo de la caja.
  3. El atributo blur (opcional), cuanto más aumentemos este valor más borrosa se mostrará la sombra.
  4. El valor de dispersión -spread- (opcional), cuanto más lo aumentemos más aumentará el tamaño de la sombra, si se disminuye se reduce. El valor por defecto es 0, el mismo que el blur.
  5. Color

Pero, como ocurre con la propiedad text-shadow, Mozilla Firefox y Safari han implementado su propio vocabulario en las etapas finales del CSS estándar para mostrar Box-shadow:

-webkit-box-shadow: 0 0 10px rgb(0,0,0);

-moz-box-shadow: 0 0 10px rgb(0,0,0);

box-shadow: 0 0 10px rgb(0,0,0);

La mayoría de los navegadores nuevos soportan la propiedad box shadow:

  • Internet Explorer 9.0+
  • Firefox 3.5+
  • Chrome 1+
  • Safari 3+
  • Opera 10.5+

Con algunos navegadores deberás de usar etiquetas específicas. En firefox necesitas usar “-moz-“, en chrome/safari “-webkit”. En Firefox 3.5 necesitas usar el prefijo “-moz”, pero a partir de Firefox 4 no se necesita usarlo más.

Puedes añadir múltiples sombras incluyendo múltiples valores separados por espacios:

-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),

15px -20px 20px rgba(255,0,0,.75);

-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),

15px -20px 20px rgba(255,0,0,.75);

box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),

15px -20px 20px rgba(255,0,0,.75);

Si se desea hacer de manera automática, tenéis a vuestra disposición un generador de sombras para CSS online.

Con esto ya tendremos nuestra propia sombra en la caja de texto, sin usar ningún tipo de imágenes. Cualquier duda que tengas sobre la propiedad Box-shadow puedes escribirla en los comentarios.