box-shadow-css3

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

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

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.




Sigue la onda…

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!