Adding curved drop shadows using Gimp

Question

I was going through a few website designs and I really liked this pointed corner drop shadow:

How can I add similar shadow effect using The Gimp or simple CSS?

Answer 1

Let me speak for CSS only:

The trick is to define an :after and :before pseudo elements which you then rotate and position under your content div.

Basically you create your div with your content:

<div class="box effect">
...
</div>

An apply this CSS rules:

.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
 z-index: -1;
 position: absolute;
 content: "";
 bottom: 15px;
 left: 10px;
 width: 50%;
 top: 80%;
 max-width:300px;
 background: #777;
 -webkit-box-shadow: 0 15px 10px #777;
 -moz-box-shadow: 0 15px 10px #777;
 box-shadow: 0 15px 10px #777;
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 -ms-transform: rotate(-3deg);
 transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}

This article features a lot of other effects as well.