CSS3 sombra interior

Alguna vez te has preguntado ¿cómo hacer una sombra interior utilizando solo CSS3? es bastante sencillo en realidad!

Utilizaremos la propiedad «box-shadow«.

Vamos a aprovechar para crear un menu redondeado con una sombra interior en la parte superior.

1º el css:

.sombra{
    -moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
    -webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
    box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
}
.redondea{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.menu{
    width:100%;
    height: 30px;
    line-height: 30px;
    background:#fff;
    border:1px solid #ddd;
}
.menu li{
    float:left;
}
.menu li a{
    padding:0 15px;
    text-decoration:none;
    color:#bbb;
}

2º el html de la lista del menu:

<ul class="menu redondea sombra">
    <li><a href="">Inicio</a></li>
    <li><a href="">Empresa</a></li>
    <li><a href="">Fotos</a></li>
    <li><a href="">Contacto</a></li>
</ul>