CSS3 HTML5

Los nuevos estándares para el diseño y desarrollo web y Móvil

Capacitación HTML5

Cómo hacer una sombra interior con CSS3

| Deja tu comentario

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 css3html5.com.ar */
}

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

¿Te gustaría aprender más sobre CSS3 y HTML5? Contáctanos.

Autor: Damián

Escribió cuatro libros, relacionados con sistemas operativos, hardware y desarrollo web, entre ellos se destaca Webmaster Profesional (editado en el año 2009) y HTML 5 – Entienda el cambio, aproveche su potencial lanzado en el 2011 en formato papel y en el 2012 en versión ebook. Se ha desempeñado como editor de libros relacionados con informática. Ha realizado trabajos de edición en la revista Users Digital Design, para la cual participa también escribiendo notas sobre diseño y desarrollo web. Ha colaborado como autor en la revista Dr. Max, Phone Users y en diversas colecciones de fascículos (Universo PC y 1000 Ideas PC, entre otras). Escribe contenidos para diversos medios online, incluyendo el sitio RedUSERS.com. Es consultor y especialista en desarrollo web, con amplio conocimiento en HTML, CSS, AJAX, PHP y Bases de datos. En la actualidad se destaca su trabajo en la preparación de contenidos relacionados con CSS3 y HTML5. Es profesor y dicta curso de HTML5 y clases en la Carrera de Programador Web en el Instituto IT Master Professional Training, en Buenos Aires (Argentina).

Deja un comentario

Es requirido que se compelte.*.