-- Paul Tedesco Online Market For Writers
JASC PaintShop Pro 8.0 A graphic program, for the casual user or professional, priced around US$100
If you enjoy WebSite Primer please recommend this site to your friends!
CSS Styling: Text Drop Shadow Filter ;
Originally Published: 2007-01-31
Updated:
This article delves into how to share the CSS styling for creating a drop shadow filter effect on text links.
I will remind in advance that many of the CSS filters work in Internet Explorer only since they are a Microsoft creation. It is not known if these effects, or filters, will become supported by other browsers or if they will come out with supported-variants.
At the time of posting this article I tested this page in Firefox and Opera browsers. The Drop Shadow Filter did not work in either regardless of what I had read on a couple of other sites, aimed at MySpace users, that erroneously claimed this effect worked in all browsers. It just goes to show you can't believe everything one reads, huh?
Therefore one should take into careful consideration about how much dependence a Web site's contents will rely on limited browser support (e.g. filters or any other touches) as browser-preference styles, or HTML, may affect or force away part of the targetted audience attracted to the site.
Do not rely solely on browser stats for a site in making such decisions as that not always a reliable source of information. For example, I may show up on your site's stats as using 800 x 600 resolution but that would not be correct as I typically visit sites with the browser window set smaller than my desktop's resolution. I can also show up as using IE when actually using Opera or Firefox.
That being said Drop Shadow filter adds an edging, or a glow, around the text enclosed within the effect. There are three parameters you can set to tweak the Drop Shadow Filter's appearance.
-
COLOR parametersets the shade of the Drop Shadow. -
STRENGTH parameteradjusts radius of the Shadow's effect. Values are 0 through 10. -
HEIGHT parameterlets you tweak the height of the Drop Shadow.
How to style Normal to Drop Shadow image links
In this example I used a Named Color for the Drop Shadow and set the Strength to 3.
- On a stylesheet:
a:link {filter:none;}
a:visited {filter:none;}
a:hover {filter:DropShadow(color=gray,strength=3);height:0ex;}
- In the HEAD:
<style type="text/css">
a:link {filter:none;}
a:visited {filter:none;}
a:hover {filter:DropShadow(color=gray,strength=3);height:0ex;}
</style>
Appearance on the Web when hovering, or mousing over, Anchor Text:
How to style Drop Shadow to Normal text links
Here I used Hex Decimal color codes, for shades of gray, and set the Strength to 10.
- On a stylesheet:
a:link img {filter:DropShadow(color=#cdcdcd,strength=10);height:0ex;}
a:visited img {filter:DropShadow(color=#cecece,strength=10);height:0ex;}
a:hover img {filter:none;}
- In the HEAD:
<style type="text/css">
a:link img {filter:DropShadow(color=#cdcdcd,strength=10);height:0ex;}
a:visited img {filter:DropShadow(color=#cecece,strength=10);height:0ex;}
a:hover img {filter:none;}
</style>
Appearance on the Web when hovering, or mousing over, Anchor Text:
How to style Normal to Drop Shadow image links; HEIGHT increased
In this example I used a shade of gray for the Glow and set the Strength to 5. However, this time, I will also increase the height by one increment to 1ex.
- On a stylesheet:
a:link {filter:none;}
a:visited {filter:none;}
a:hover {filter:DropShadow(color=#cdcdcd,strength=5);height:1ex;}
- In the HEAD:
<style type="text/css">
a:link {filter:none;}
a:visited {filter:none;}
a:hover {filter:Glow(color=#cdcdcd,strength=5);height:1ex;}
</style>
Appearance on the Web when hovering, or mousing over, Anchor Text: