Non-linear shadow in HTML design

Question

Hi

I'm trying to create a shadow that is wider in the top like in the picture below. It does not have to be very cross-browser, recent Firefox and WebKit based browser will do just fine. Does anyone have any good ideas on how to do this?

Answer 1

photoshop or gimp, which u like

Answer 2

I haven't yet tried this technique, but CSS3 includes the border-image property, as described here. Perhaps if you developed your own shadow, you might be able to set it as the border (or use a wrapper element with such a border).

Answer 3

You may want to try fiddling with box-shadow and the transform property’s skew function. Maybe place a transparent div with box-shadow beneath the content element, e.g.:

#shadow{
    -webkit-transform: skewY(-10deg);
       -moz-transform: skewY(-10deg);
         -o-transform: skewY(-10deg);
            transform: skewY(-10deg);
    -webkit-box-shadow: 4px;
       -moz-box-shadow: 4px;
         -o-box-shadow: 4px;
            box-shadow: 4px;    
}

Answer 4

I just wrote about something similar.