Our designers love fancy drop shadows, but I prefer to avoid using image sprites. I am determined to create this effect using only CSS3. However, it's proving to be a challenge to replicate it perfectly with CSS3 alone:
This is my attempt so far, but I'm not completely satisfied with the results. I don't want the additional HTML wrapper for .box and the fade effect on the left doesn't quite look right to me:
Here is the fiddle link for reference: https://jsfiddle.net/valmar/k8ugjwb2/3/
My current code snippet:
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);
}<div class="boxwrap">
<div class="box">content</div>
</div>Calling all CSS experts! Can anyone out there create a flawless replica of this drop shadow without any extra markup other than
<div class="box">content</div>