Web Site Primer

HTML · Web Design · Color Charts · & More!

CSS Styling: Image Engrave Filter ;

Originally Published: 2007-01-31
Updated:
This article delves into how to share the CSS styling for creating an engraved filter effect for image 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 Engrave 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 the engrave filter adds, for the lack of a better descriptive word, an emgraved or depressed relief appearance to an image. It will also take a color image to gray. This is one of the filters that does not use parameters.

How to style Normal to Engrave image links

On a stylesheet:
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:progid:dximagetransform.microsoft.engrave;}

In the HEAD:
<style type="text/css">
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:progid:dximagetransform.microsoft.engrave;}
</style>

Appearance on the Web when hovering, or mousing over, an image link:

Engraved Filter Demonstration Image

How to style Engraved to Normal image links

On a stylesheet:
a:link img {filter:progid:dximagetransform.microsoft.engrave;}
a:visited img {filter:progid:dximagetransform.microsoft.engrave;}
a:hover img {filter:none;}

In the HEAD, for all images in a page:
<style type="text/css">
a:link img {filter:progid:dximagetransform.microsoft.engrave;}
a:visited img {filter:progid:dximagetransform.microsoft.engrave;}
a:hover img {filter:none;}
</style>

Appearance on the Web when hovering, or mousing over, an image link:

Engrave Demonstration #2 Image

Related Articles:


straight to the top