[icedd]

Hey guys, I usually don't need help with css because I typically use image dropshadows for ease of mind. Today I need to use css dropshadows.

Here is what I'm using

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

The IE parts only seem to work directional? I need them to be even all the way around.

I have done some looking around but can't get it to work. I have also tried:

/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=20, Direction=45, Color='#000000');
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=20, Direction=225, Color='#000000');

In hope that it wouild project both ways and sort of make a full drop shadow. Though the second rule just over-writes the first instead of working togetehr like I hoped.

Is their a way to get a full surround drop shadow with IE 5.5 - 8.. or even just 8?


Thanks

[Astalor]

Rather than using very bloated CSS tags to try and get the box shadows to work in older browsers, I would suggest doing the method I use which also ensures every browser views the same shadow.

I mock-up the element I wish to apply a shadow to in my favorite modern browser and take a screenshot. Using this screenshot I then dissect parts of it, for example the shadow, and save them as an image(s).

With use of the CSS background tag and such, it's very easy to apply the images to said element. If the element in question is something small that will keep a specified size, like a checkbox or a textbox, I will generally have one image as the entire element background. If the element is larger or will be dynamically scaled, I will apply two sides (either top+bottom or left+right) as an image and then the opposite side a repeating image down the length.

If you need any help with this or some example code just tell us and I will be more than happy to help.

[icedd]

Thanks Astalor,

I am very comfortable with slicing out the image backgrounds and setting them for static & dynamic objects. Thank you very much for your suggestion however!

I was trying to use this as more of a text shadow I believe. I posted this over 2 months ago now and that application has escaped me a little.

[Astalor]

I'm sorry my reply did not reach you closer to your project.

I don't have any magical solution for text shadows, if it's just for headers I would once again use images, but if it's for large bulks of text or dynamically generated content I don't really have an answer.

[RudiVisser]

It sounds like what you're looking for isn't a drop shadow, but it's a glow, and it should be very simple to achieve with a filter:

filter: glow(color=#000,strength=6);

Look here for parameters of IE's glow filter.

This post has been edited by RudiVisser: 17 July 2012 - 06:04 AM