HTML and CSS XSLT JavaScript Images Soft Etc

Internet Explorer is required to view this example.

	Task:	to create a nice shadow under text and glow for pictures in IE.

Sometimes you need to create a shadow under text. In many modern browsers it can be easily done with text-shadow CSS property. However, in the case of IE we have to find workarounds since it still does not support this property (at least as of IE9 beta).

Internet Explorer has a whole bunch of filters for various effects. Unfortunately, the Shadow filter created specifically for making shadows gives an incredibly poor result. But there is a trick we can use here: filter effects can be overlayed on top of each other.

Note

To make it work, the filter CSS property needs to be written like this:
filter: progid: DXImageTransform.Microsoft.[filter 1]()
progid: DXImageTransform.Microsoft.[filter 2]().

According to the new Microsoft specification, the format should be this:
-ms-filter: "progid: DXImageTransform.Microsoft.[filter 1]()". However, the beta version of Internet Explorer 9 still does not display this page correctly unless IE7 emulation is enabled.

Simply writing filter: [filter&nsbp;1]() [filter 2]() will lead to only one filter being applied.

Solution

In the article (Almost) Cross Browser Text-Shadow by Kilian Valkhof the author explains how to create a more or less passable shadow in IE using Glow and Blur filters. The idea is that first we use Glow to create a halo around the text and then blur it with Blur. The resulting shadow is then placed under the text using absolute positioning. The result is acceptable but slightly rough especially if the shadow is moved relative to the text (IE is required to view this and following examples):

A quick brown foxA quick brown fox

This is what CSS code would look like:

.shadowed .shadow-1
{
	left: -7px;
	top: -7px;
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)
	progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');
	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";
}

.shadowed .shadow-2
{
	left:-5px;
	top:-5px;
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)
	progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');
	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";
}

Turns out, the Glow filter is at fault here. To make it nice, let’s turn its strength down to 1, change the color to black (the alternative is to replace Glow by dropShadow which has more understandable parameters) and add another filter, Alpha. Here is the result (Glow on the left, dropShadow on the right, the differences are negligible to the naked eye and can be brought down to zero with further tweaking):

A quick brown foxA quick brown fox

Here is the CSS code for this case:

.shadowed .shadow-3
{
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)
	progid:DXImageTransform.Microsoft.Alpha(opacity=25)
	progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true');
	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)"
	"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true')";
	color: #111111;
	top: -2px;
	left: -2px;
}

.shadowed .shadow-4
{
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1)
	progid:DXImageTransform.Microsoft.Alpha(opacity=25)
	progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true');
	-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1)"
	"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true')";
	color: #111111;
	top: -2px;
	left: -2px;
}

In the same way we can create glow around the text. The live example can be seen in the menu on Mriya website. Funnily enough, this could be done in IE5 when text-shadow didn’t even exist.

A quick brown foxA quick brown fox

Bonus track

The method described above has one other interesting application: making images glow.

Here is how it can be achieved:

We start by placing a copy of the original image under the original and move it up and left to the value of Blur filter’s pixelradius property (or their sum if several filters are used).
If the background is dark, the first filter we apply is Wave(freq=100, lightStrength=100, strength=0, add=1). Basically, it will make the image two times brighter.
Next we blur to our liking.
To smooth glow angles we add another filter, Alpha(opacity=100, finishopacity=30, style=2). The style parameter with a value of 2 means that opacity will change from the center (opacity) to the edge of the image (finishopacity). You can read more about this and other filters on this website dedicated to JavaScript.

CSS code for the example above:

.ambient-image
{
	position: relative;
	width: 320px;
	height: 240px;
	margin: 30px auto;
}

.ambient-image img
{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.ambient-image img.blurred,
.ambient-image img.blurred-light
{
	display: block;
	position: absolute;
	width: 116%;
	height: 112%;
	top: -6%;
	left: -8%;
	margin-top: -30px;
	margin-left: -30px;
	z-index: -1;
	zoom: 1;
}

.ambient-image img.blurred
{
	filter: progid:DXImageTransform.Microsoft.Wave(freq=100, lightStrength=100, strength=0, add=1)
	progid:DXImageTransform.Microsoft.Blur(pixelradius=20, enabled='true')
	progid:DXImageTransform.Microsoft.Blur(pixelradius=10, enabled='true')
	progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=30, style=2);
	-ms-filter: "progid:DXImageTransform.Microsoft.Wave(freq=100, lightStrength=100, strength=0, add=1)"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=20, enabled='true')"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=10, enabled='true')"
	"progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=30, style=2)";
}

.ambient-image img.blurred-light
{
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=20, style=2)
	progid:DXImageTransform.Microsoft.Blur(pixelradius=30, enabled='true');
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=20, style=2)"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=30, enabled='true')";
}

In case with pictures there are three substantial drawbacks. First, the speed: a large enough image with glow will slow down the browser even on a more powerful computer. Second, glow is displayed differently on different graphics cards (the filter uses DirectX). Finally and probably most importantly, there is no universal solution for other browsers yet.

Order a design...

Using filters in IE November 11, 2010

Solution

A quick brown foxA quick brown fox