Ist es möglich, diesen Schlagschatten nur mit reinem CSS3 zu erstellen?

Question

Unsere Designer haben einen Fetisch für ausgefallene Schlagschatten wie diese, aber ich möchte die Verwendung von Bildsprites vermeiden. Stattdessen möchte ich das nur mit css3 erstellen. Es ist ein wenig schwierig, obwohl es zu replizieren pixelgenaue nur mit CSS3:

Dies ist die nächste, die ich bekommen konnte, aber ich bin nicht wirklich zufrieden mit dem Ergebnis, denn ich will nicht den zusätzlichen HTML-Wrapper für .box und auch der Fade-Effekt nach links schaut nicht rechts:

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

Mein Code Versuch:

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); 
} 

Gibt es ein CSS-Guru da draußen, die eine pixelgenaue Nachbildung des Schlagschattens ohne zusätzlichen Markup als <div class="box">content</div> erstellen können?

Answer 1

Versuchen, pixelgenaue eine harte Anforderung ist.

Bu Ich kann Ihnen einen Weg zeigen, und lassen Sie es ganz in der Nähe. Ich verwende ein Pseudo-Element mit 2 radialen Gradienten und einer Rotation.

Sie können mit den relativen Positionen der Farbverläufe, der Farben und der Stops spielen, um eine Feineinstellung vorzunehmen.

#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

dieses Gut 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); 
}