Cómo hacer una sombra interior con CSS3

Crear una sombra interior en una caja es una tarea muy sencilla con CSS3. Siempre mis alumnos se sorprenden al ver la simplicidad de esta función y lo complejo y tedioso que era hacerlo con imágenes antes. ¿Cómo lo logramos ahora? En primer lugar debemos recordar que la propiedad de CSS3 que nos permite crear sombras para cajas es box-shadow y que por el momento requiere que, además, agreguemos las opciones con los modificadores para -moz y -webkit. Hecha esta aclaración, la manera de aplicar este efecto es agregar el valor inset a los valores de color y desplazamiento de sombra (x, y, blur).

¿Un ejemplo sencillo? Veamos como aplicarlo a un div, cuya clase es sombra:

.sombra{
-webkit-box-shadow:inset 10px 10px 5px #5c5c5c;
-moz-box-shadow:inset 10px 10px 5px #5c5c5c;
box-shadow:inset 10px 10px 5px #5c5c5c;
/* Código by @damiande */
}

El resultado para una caja de 200px x 200px y 1px de borde negro es el siguiente:

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes y herramientas para Desarrollo Web y móvil en modalidad online y presencial.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

*



Encontrame en las redes sociales. Contactame.