Put CSS Filters To Work
With a combination of CSS filters like Glow and Shadow, you can get some really nice effects. I had alot of trouble getting CSS filters to work, though, and this post may save you (and me) some time in the future trying to figure it out.
See SSI Developer and Fred's samples for some samples of filters usage. I found nice Shadow filter tutorials on Mandarin Design and A List Apart, two of my favorite design blogs. Filters should work on img, span, div and font tags. If they don't work immediately, don't be surprised. These filters only work for IE users, and only then if you get it just right. Use of the filters is a bonus, as many users may not see them at all. But the effects can be quite nice (see some shadow and css samples in this post below), especially if you're in a controlled browser environment (intranet apps). Here's a checklist I found I had to use to get it working. My test browser is Internet Explorer 6.0 running on Windows XP sp2. 1 Check Your DOCTYPE The DOCTYPE specified for your page has to be right or they will not work (for more information, read the W3C DOCTYPE guidelines). If you have specified a DOCTYPE for HTML 4.1 or XHTML 1.0/1.1, the filters will not work. The HTML 2.0 and HTML 3.2 doc types worked well for me. Try one of these DOCTYPES or remove the DOCTYPE altogether if you can. I also had success with listing multiple DOCTYPE tags, as long as I listed one of these first.
<!-- Use the HTML 3.2 DocType -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!-- OR the HTML 2.0 DocType -->
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!-- OR the HTML 2.0 DocType -->
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
2 Size Your Tag Use a tag with a defined size. I was using a SPAN tag, and could not get it to work. When I added a size to the tag, it started working. You can set the size to zero px and let the browser stretch it out to fit the content, and that seems to work. You only need to use one dimension for it to work. Wierd!
3 Use The Full ProgID You may need to use the full progId to define the filter. Many web sites don't and it seems to work fine, sometimes. When in doubt, use the full progID of the filter, like so...
<!-- Use the full progid if filters aren't showing up -->
<span style="height:0; filter: progid:DXImageTransform.Microsoft.Glow(Color=blue, Strength=2), progid:DXImageTransform.Microsoft.Shadow(color:red, direction:135, strength=5);">Born on the 4th Of July</span>
<span style="height:0; filter: progid:DXImageTransform.Microsoft.Glow(Color=blue, Strength=2), progid:DXImageTransform.Microsoft.Shadow(color:red, direction:135, strength=5);">Born on the 4th Of July</span>
No comments:
Post a Comment