Como crear sombras interiores con CSS

Muchos des-arrolladores actualizados saben hacer Sombras exteriores e interiores con CSS3 pero algunos "nuevos en esto" por así decirlo no están aun tan familiarizados. Para crear un sombra normal tenemos el siguiente código: .sombraext { box-shadow: outset 1px 3px 9px #999; -webkit-box-shadow: outset 1px 3px 7px #0f0f0f; /*Safari, Chrome*/ -ms-box-shadow: outset 1px 3px 7px #0f0f0f;/*Internet explorer*/ -o-box-shadow: outset 1px 3px 7px #0f0f0f;/*Opera*/ -moz-box-shadow: outset 1px 3px 7px #0f0f0f;/*Mozilla Firefox*/ } Tal vez no conozcas la propiedad OUTSET ya que no es necesario ponerla por que el navegador la detecta por defecto. Con este código crearíamos una bonita sombra (Que puedes ver en la fuente de este articulo). Ahora para crear una sombra Interior tendriamos el siguiente código: .sombraint { box-shadow:inset 1px 3px 9px #999; -webkit-box-shadow:inset 1px 3px 7px #0f0f0f; /*Safari, Chrome*/ -ms-box-shadow:inset 1px 3px 7px #0f0f0f; /*Internet explorer*/ -o-box-shadow:inset 1px 3px 7px #0f0f0f; /*Opera*/ -moz-box-shadow:inset 1px 3px 7px #0f0f0f; /*Mozilla Firefox*/ } Esta vez en lugar de OUTSET colocamos INSET que esto Si es necesario para que el navegador entienda que es una sombra interior.(también podrás ver el efecto en la fuente mas abajo). La compatibilidad de este efecto en los navegadores es completamente visible, con algunas fallas en Internet Explorer pero valla.. ¿que esperábamos de el?... Puedes leer el articulo completo en la Fuente.