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
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. 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 de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta