C'è un modo per creare un'ombra di sfondo di una casella del software utilizzando i CSS?

Question

Immaginate una scatola di software come il seguente:

http://www.sitellite.org/pix/sitellite-box.gif

Ora immaginate l'ombra non c'è. C'è un modo CSS in cui posso simulare l'ombra di sfondo e lavorare su almeno Firefox e Chrome, se non anche su IE9 e versioni successive?

Answer 1

Un modo sarebbe quello di iniziare con una forma triangolare come questo

<div id="triangle"></div> 

#triangle { 
    width: 0; 
    height: 0; 
    border-top: 100px solid grey; 
    border-left: 100px solid transparent; 
    opacity:0.1; 
}​ 

see example

Poi aggiungere un lineare gradiente e posizionarlo dietro l'immagine. Dai uno sguardo a questo gradient generator come punto di partenza.

Quindi è possibile utilizzare transform per inclinarlo leggermente.