Internet Explorer Filters are a pure CSS implementation that, when used in conjunction with the HTML5 Boilerplate <html> conditional comments, requires no hacks and (almost) validates perfectly!
Note that this CSS will not validate because filter is invalid. If validation is important to you, this could be served via an IE-only stylesheet.
There are again separate IE filters for IE6/7 and IE8.
In this first example, I show the text-shadow CSS (understood by all modern browsers) and just the DropShadowfilter, which creates a “copy” of the text, offset as specified; it looks a little odd at anything more than 1 pixel offset, unless you play with the color value, as I did here, using the ARGB version of an RGBA… (read more about RGBA/ARGB):
#example1 p {
text-shadow: 2px 2px 2px #8F8F8F; /* Everyone except IE */
}
html.ie #example1 p {
filter: progid:DXImageTransform.Microsoft.DropShadow(color=#3F000000, offx=2, offy=2); /* IE */
zoom: 1; /* 'hasLayout' required for filters */
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
There is also a glow filter that fades the text, but you lack the ability to determine the direction in which it fades (note that I played with the color on the filter again, using an ARGB value):
#example2 p {
text-shadow: 2px 2px 2px #8F8F8F; /* Everyone except IE */
}
html.ie #example2 p {
/* "strength" is essentially the distance the "length" of the glow */
filter: progid:DXImageTransform.Microsoft.Glow(color=#33CCCCCC,strength=2); /* IE */
zoom: 1; /* 'hasLayout' required for filters */
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
However, by combining the two (you can combine multiple filters by simply separating them with spaces), you get something that is a little more palatable (note that I “reduced” the hex color since they will be combined together via the filters):
#example3 p {
text-shadow: 2px 2px 2px #8F8F8F; /* Everyone except IE */
}
html.ie #example3 p {
filter: progid:DXImageTransform.Microsoft.DropShadow(color=#33E2E2E2, offx=4, offy=4)
progid:DXImageTransform.Microsoft.Glow(color=#33BEBEBE, strength=2); /* IE */
zoom: 1; /* 'hasLayout' required for filters */
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Leave a Reply