Federico Mazzei / Truco de CSS para colocar sombra interna

Created Thu, 11 Nov 2010 21:55:55 +0000 Modified Thu, 11 Nov 2010 21:55:55 +0000
104 Palabras

Si bien esto no funciona en todos los navegadores a alguien le puede interesar colocar dentro de un div una sombra interna, ya sea por diseño u otra indole.

Imaginemos que tenemos un contenedor de 800px de ancho por 600px de alto (px = pixel) y a ese contenedor le aplicamos la sombra interna en cuestión, bueno lo único que tienen que hacer es colocar las lineas de código que marco con comentarios.

<br></br>.contenedor {<br></br>position: absolute;<br></br>width: 800px;<br></br>height: 600px;<br></br>background-color:#CCC;<br></br>/* sombra interna */<br></br>-moz-box-shadow:inset 0 0 10px #000000;<br></br>-webkit-box-shadow:inset 0 0 10px #000000;<br></br>box-shadow:inset 0 0 10px #000000;<br></br>/* termina sombra interna*/<br></br>}<br></br>

Para ver el resultado final hacer click acá.