IE filter replacement for text / box shadows

HTML & CSS
1

Hi guys,
I was reading an article here and [URL=“http://placenamehere.com/article/384/css3boxshadowininternetexplorerblurshadow/”]here so that I could learn how to replicate a css3 box-shadow in ie as that styling will be in ie conditional style-sheet.

It seemed straight-forward when I was reading it, but I was trying to replicate a box-shadow styling I already and couldn’t figure out how to do it. And, I was hoping someone here could help me.

Here is the normal styling for the box-shadow I couldn’t replicate:

box-shadow:inset -1px 2px 0 #000;

Does anyone have any ideas on how to do this successfully? I would really appreciate any help!

Thanks in Advance & Kind Regards,
Team 1504.

2

Hi,

That rule above just gives you a thick top and right border which you could almost duplicate just with borders. Or was that not a real code example?

You can probably use something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.shadow {
	width:200px;
	height:200px;
	border:1px solid #000;
	-moz-box-shadow:inset -1px 2px 0 #000;
	-webkit-box-shadow:inset -1px 2px 0 #000;
	box-shadow:inset -1px 2px 0 #000;
}
</style>
</head>
<!--[if lt IE 9]>
<style type="text/css">
.shadow{
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=-145, Strength=3);
}
.shadow p {
	position:relative;
	zoom:1.0;
	margin:5px;
}
</style>
<![endif]-->

<body>
<div class="shadow">
		<p>test test test </p>
</div>
</body>
</html>

However - is it really worth the effort :slight_smile:

3

Well that rule above was for a n input field that had rounded sides, (border-radius:10px;)

I was trying to make it look like it was carved out of the page— like an inner bevel.

Did I not do the right normal styling? Because I can’t have a p inside the input, then…

4

You’ll just have to play around with something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.shadow {
	display:inline-block;
	vertical-align:middle;
	width:180px;
	padding:0 10px;
	height:25px;
	line-height:25px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	margin:0;
	border:1px solid #ccc;
	-webkit-box-shadow: inset -2px 2px 2px 1px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset -2px 2px 2px 1px rgba(0, 0, 0, 0.3);
	box-shadow: inset -2px 2px 2px 1px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<!--[if lt IE 9]>
<style type="text/css">
.shadow{
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=-300, Strength=3);
	position:relative;
	zoom:1.0;
}
</style>
<![endif]-->

<body>
<form name="form1" method="post" action="">
				<div>
				<input class="shadow" type="text" name="name" id="name">
				</div> 
</form>
</body>
</html>
5

I tried to look at what you had done and understand why and then mimic it to keep the inset box-shadow in ie with my styles.

Here is a link to an html file where I put the code of the html in post 4 and also the style for the input I am trying to keep in ie. And then attempted to mimic the styles that keep the inset box-shadow in ie in the normal styling and in the ie-conditional styling.

However I viewed this file in IE and neither’s box-shadow, not the one you posted; which i didnt change at all, or mine, is showing at all in ie less than 9.

Any ideas on why its not showing in ie?

6

The shadow is showing in IE6 - 8 ok although its not the same as the real thing.

If you are using IEtester to check then the filters work properly depending on what system you are using so you can’t rely on it.

7

hmm, i dont know why i didn’t see that when I tried another brand of viewing-in-ie. I think it may have been the border that confused me and i didn’t notice the box-shadow after the border.

One more question on the box-shadow part, I’m assuming why you picked the colour as #969696 is because that is what black is at 30% opacity, right?

Do you know what the equivalent colours for black at 0.1 opacity & 0.5 opacity are? And / or how I can figure them out?

8

No, I was just throwing colours at it to see the effect.:slight_smile: The colour of black at different opacity will still be black but with varying levels of transparency.

Just play around with it until it looks right. You can get a better shadow with this:


<!--[if lt IE 9]>
<style type="text/css">
.shadow{
	filter: progid:DXImageTransform.Microsoft.Shad[B]ow(color='#000000',[/B] Direction=-300,[B] Strength=5[/B]);
	position:relative;
	zoom:1.0;
}
</style>
<![endif]-->
9

Okay, so the strength is the opacity of the colour— in terms of the arguments for the progid:DXImageTransform.Microsoft.Shadow() call ?
and then for 0.1 opacity I would do:

<!--[if lt IE 9]>
<style type="text/css">
.shadow{
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=-300, Strength=1);
	position:relative;
	zoom:1.0;
}
</style>
<![endif]-->

hmm because i assumed the strength was the distance of the shadow…
Anyway, then how would I do a replacement for positive values in a box-shadow— such as box-shadow:inset -1px 2px 0 #000 ?

10

There’s an interactive demo here that might help you visualise what the filter does.

http://samples.msdn.microsoft.com/workshop/samples/author/filter/Shadow.htm

You may just have to accept that not all things are possible as the filter was not and does not match the css box shadow in any way.

11

Ah okay. So its just coincidence that they happen to do similar things.

Question does The filter syntax work in non-ie browsers if I put it in the normal and not ie-conditional stylesheet.
because since I have a mac I do not have are ie. So if I put the filter in the normal stylesheets , and no border-radius, will it show in chrome or firefox?

12

Most of the IE filters were created last century for ie4 and then ie5.5 and have therefore been around for years and follow no standard format. They work in different ways and were never part of the css spec. It’s just that since we have css3 box shadow now that people have gone back and looked at the old IE filters to see if they could get something similar to work in older versions of IE. (It won’t be long before we start getting the page wipe and transition effects on page load beloved of “front page” coders - not to mention blinking text.)

The filters are buggy and cause problems with links and slow the page down considerably so the best advice is to avoid their use.

Question does The filter syntax work in non-ie browsers if I put it in the normal and not ie-conditional stylesheet.
because since I have a mac I do not have are ie. So if I put the filter in the normal stylesheets , and no border-radius, will it show in chrome or firefox?

Only IE8 and under understands the filter syntax and theoretically it should not affect other browsers. However the syntax used in the filters does not follow the standards and a parser could possibly be tripped up by the invalid code so its best to put them away in a stylesheet just for IE. Although parsers should ignore valid code you will often notice that if you omit a closing bracket in a ruleset that the following rules all get overlooked so its best not to take the risk.

13

That bloody sucks. lol sorry. I was hoping there was a way I could test the filter syntax and css3 syntax in the same page on the same browser…

Hmm so I guess the option left is testing and fidgeting (with) it, uploading it, and viewing in browserCam ?

14

You really should be testing in a native version of the browsers you want it to work on, I have VM’s with IE6,7,8,9 on them just for testing. But I’ve had some good success with IE Tester as well in the past.
You can’t gauge performance impacts if you’re just looking at screenshots.

–

Because of the reasons that Paul outlined I simply don’t use IE filters or CSS expressions.
box-shadow, text-shadow, rounded corners, gradients are all not required for a page to function.
I only support these features in css3 supported browsers and then you don’t need to worry about it.

15

Oh okay. Well, I have been fidgeting around with the filtre in IE and I think I am understanding it better.

Since I can not do a negative strength on the filtre to replace the inset border-shadow in the first post, I was thinking of just setting a border.
Is there a way I can set a colour to the inset of a border?
Because

border:2px inset #000;

just gives me a border as if the border-style in that short-hand notation was solid. However,

border:2px inset;

gives me a seemingly-transparent border…?

16

The colours of inset and outset vary with the color you choose and vary between browser. You can’t choose what other color the inset or outset is going to be. If you omit the color then it should revert to the text color as the main color.