Fancy CSS shadow, possible? - css

Question

I am currently coding a PSD file in HTML/CSS, and the designer used a somewhat fancy shadow. I can't figure a way to do it in CSS - is it possible? - If so, how?
Here's the shadow:

Answer 1

Based on thgaskell's suggested link, you can use #box:before and #box:after to add 2 slightly smaller boxes with indices lower than 0 and add shadows to them. Use the shadow's color for the background color for these as well.
Here's a codepen that attempts to do this (you can tweak it to suit your purpose):
http://codepen.io/walmik/pen/fyidv
Here's another one tweaked more to the image you ve attached:
http://codepen.io/walmik/pen/eqpGk
HTML:
<div id='box'>Fancy Shadow</div>
CSS:
#box {
position: relative;
width: 600px;
height: 300px;
padding: 20px;
background: #fff;
text-align: center;
font-size: 24px;
color: #333;
font-family: Georgia. serif;
box-shadow: 0px 0px 2px #888;
}
#box:before, #box:after
{
/*this is like appending a div element before the box:*/
z-index: -1;
position: absolute;
content: "";
bottom: 0px;
left: 0px;
width: 45%;
height: 60%;
top: 15px;
max-width:300px;
background: #888;
-webkit-box-shadow: -2px -15px 30px #888;
-moz-box-shadow: -2px -15px 30px #888;
box-shadow: -2px -15px 30px #888;
}
#box:after
{
/*this is like appending a div element after the box:*/
right: 3px;
left: auto;
-webkit-box-shadow: 2px -15px 30px #888;
-moz-box-shadow: 2px -15px 30px #888;
box-shadow: 2px -15px 30px #888;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
}

Answer 2

What you're looking for is the CSS3 attribute box-shadow. The syntax goes something like this:
box-shadow: h-shadow v-shadow blur spread color inset;
The drop shadow you're doing in the image above has a gradient, which is not possible with CSS currently, but a similar shadow would probably be something like this:
box-shadow: -10px -10px 20px #000;
You'll need to play with the numbers to get it to where you like it, but this should help you to start.