1

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

enter image description here

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

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.