0

I need to know how to put shadow in all four sides of a div. I need a little explanation of:

filter: progid:DXImageTransform.Microsoft.Shadow

Daan
  • 2,680
  • 20
  • 39
user3619130
  • 45
  • 3
  • `filter: progid:DXImageTransform.Microsoft.Shadow` is for Internet Explorer v9 and below (from recollection please correct me if I'm wrong), which applies box shadows to IE only and can be added with the other box shadow options i.e. `-moz-`, `-webkit-`, etc.. I also remember those shadows looking seriously ugly as sin on older IE versions. – adamj May 09 '14 at 05:43

3 Answers3

5

This will give you shadow on all 4 sides:

div.shadow {
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

JSFiddle

The first two 0px's mean that the shadow won't explicitly protrude either left/right or up/down. The 10px gives it enough blur to protrude out all edges. The #000 is the color of the shadow. You can play around with it to get the look you like.

Mark Miller
  • 7,442
  • 2
  • 16
  • 22
0

Use box-shadow

.class-name{

   box-shadow: 2px 2px 2px #000;   
             /* horizontal, vertical, blurr-radius, colour  */


}
crafter
  • 319
  • 4
  • 13
0

Box-Shadow

CSS3 box-shadow property has following attributes: (W3Schools)

box-shadow: h-shadow v-shadow blur spread color inset;

The main prefix for shadow to support latest browsers is box-shadow.

There are 2 other prefix available that I recommend to use for older Mozilla and Webkit:

  • -moz-box-shadow
  • -webkit-box-shadow

Try it:

img{
     -webkit-box-shadow: 0 0 5px 2px #000000;
     -moz-box-shadow: 0 0 5px 2px #000000;
     box-shadow: 0 0 5px 2px #000000;
}

Working Demo

Reference

Ishan Jain
  • 8,063
  • 9
  • 48
  • 75