Diseñar y crear una interfaz de usuario visualmente atractiva y efectiva es una tarea que requiere de conocimientos específicos. Dentro de esos conocimientos podríamos incluir la necesidad de dominar CSS y sus principales secretos.
Lograr 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.
Para comenzar debemos trabajar con la propiedad de CSS box-shadows. Esta característica soporta varios valores, entre los que encontramos el desplazamiento y el blur. Pero para lograr una sombre interior necesitamos un valor adicional.
¿Cómo logramos entonces la sombra interior? La manera más simple de conseguir este efecto es agregar el valor inset a los valores de color y desplazamiento de sombra (x, y, blur).
Ejemplo de código para una sombra interior con CSS3
¿Un ejemplo sencillo? Veamos como aplicarlo a un div, cuya clase es sombra:
.sombra{
width: 200px;
height: 200px;
box-shadow:inset 10px 10px 5px #5c5c5c;
}En este ejemplo aplicamos los estilos especificando primero ancho y alto y luego sombra, aunque el orden dentro de esta regla no afecta el resultado final.
El resultado que obtendremos para una caja de 200px x 200px y 1px de borde negro es el siguiente:
Podremos leer más sobre como aplicar efectos de sombra en cajas en la documentación que nos brinda el W3C.
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