È possibile creare questa ombra esterna solo con un semplice CSS3?

Question

I nostri designer hanno un feticcio per le ombre fantasiose come queste, ma voglio evitare di usare gli sprite delle immagini. Invece mi piacerebbe creare questo solo con css3. E 'un po' difficile anche se per replicarlo pixel-perfect solo con css3:

Questo è il più vicino ho potuto ottenere, ma io non sono molto contento del risultato perché non voglio che l'involucro html in più per .box e anche l'effetto di dissolvenza a sinistra non sembra giusto:

Fiddle: https://jsfiddle.net/valmar/k8ugjwb2/3/

il mio tentativo di codice:

HTML

<div class="boxwrap"> 
    <div class="box">content</div> 
</div> 

CSS

body{ 
    background: #edefed; 
} 

.boxwrap{ 
    width: 350px; 
    height: 365px; 
    position:relative; 
} 

.box{ 
    width: 350px; 
    height: 350px; 
    background: #fff; 
} 

.box:after{ 
    width: 350px; 
    height: 50px; 
    bottom: 26px; 
    display: block; 
    position:absolute; 
    content: " "; 
    z-index: -1; 
    -webkit-box-shadow: 0px 16px 21px -10px rgba(0,0,0,0.56); 
    -moz-box-shadow: 0px 16px 21px -10px rgba(0,0,0,0.56); 
    box-shadow: 0px 16px 21px -10px rgba(0,0,0,0.56); 
    -webkit-transform: rotate(-3deg); 
    -moz-transform: rotate(-3deg); 
    -o-transform: rotate(-3deg); 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 

C'è qualche guru css là fuori che può creare una replica pixel-perfect di questa ombra, senza alcun margine di profitto in più rispetto <div class="box">content</div>?

Answer 1

Beh, pixel-perfect è un requisito difficile.

Bu Posso mostrarti un modo e lasciarlo abbastanza vicino. Sto usando uno pseudo elemento, con 2 gradienti radiali e una rotazione.

È possibile giocare con le posizioni relative dei gradienti, i colori e le fermate per regolarne l'ottimizzazione.

#testback { 
 
    position: absolute; 
 
    top: 0px; 
 
    width: 900px; 
 
    height: 210px; 
 
    background-color: rgb(238, 238, 238); 
 
    z-index: 1; 
 
} 
 
#test { 
 
    position: absolute; 
 
    background: white; 
 
    width: 94%; 
 
    height: 50%; 
 
    left: 3%; 
 
    z-index: auto; 
 
} 
 
#test:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 81%; 
 
    height: 61px; 
 
    bottom: -10px; 
 
    left: 1%; 
 
    transform: rotate(-4deg); 
 
    z-index: -1; 
 
    background-image: radial-gradient(ellipse at center, rgb(82, 82, 82), rgba(255, 255, 255, 0) 60%),       radial-gradient(ellipse at center, gray, rgba(255, 255, 255, 0) 70%); 
 
    background-position: 14px 0px, center center; 
 
}

<div id="testback"> 
 
<div id="test"> 
 
</div> 
 
</div>

Answer 2

Prova questa Fiddle.

.box:after{ 
    width: 350px; 
    height: 50px; 
    bottom: 26px; 
    display: block; 
    position:absolute; 
    content: " "; 
    z-index: -1; 
    box-shadow: 0px 19px 8px -5px rgba(0,0,0,0.56); 
}