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 Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.