Search code examples
javascripthtmlcssdropshadow

drop shadow on HTML objects

I am trying to get a dropshadow effect going on selected HTML elements (input text, select, div etc).

The solutions given by many internet users were using CSS3 solution where it uses:

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

However, this will not work on IE8 (possibly other IE versions)

Is there any way of creating this effect without using these CSS3 elements?

Solution

  • I am not quite sure how it can be done without CSS3 but what I know is 

    .shadow { 
-moz-box-shadow: 3px 3px 4px #000; 
-webkit-box-shadow: 3px 3px 4px #000; 
box-shadow: 3px 3px 4px #000; 
/* For IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
/* For IE 5.5 - 7 */ 
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 
}

    will work in all browsers.