Coloring Graphics Using Filters and Overlays
Copper Canyon
Chihuahua, Mexico
by Bill, 1996
Author's Note: The "Gray" and "Alpha" filter calls used in this tutorial are in the original Internet Explorer 4 call format. They will also work under the new filter call format instituted by Internet Explorer 5.5. Be sure to check out the Microsoft documentation available on their web site.
There is only one photo in this post - the colored one at the bottom. The center one was created using the grayscale filter, and the top using a simple HTML <DIV> overlay with an alpha (opacity) filter. In a few short paragraphs, I'll show you how it's done.
A simple <IMG> element is all that's required to generate the colored photo:
You'll notice the image is positioned "absolutely" by the style parameter "position:absolute". This places it on the page at a fixed position at 0 pixels from the left edge of the window and 0 pixels from the top. You may position your own image where ever you'd like. Also notice we have specified the image's WIDTH and HEIGHT. Our overlay will be set to the same position, width, and height. Now, let's turn the image into a grayscale (black and white) as shown in the middle photo:
By simply adding the filter:gray parameter as a style attribute, we turn the image to grayscale.
Now we'll code a <DIV> element which will serve as our colored overlay, making the photo appear as if it's old:
The <DIV> element defines a box exactly the same size as our photo image. We have positioned it exactly the same as the photo too: 0 pixels from the left edge of the window and 0 pixels from the top. We have set the overlay box's background color to #fff8b0, kind of a dingy-yellow color. To make the photo show through the overlay, we must make the <DIV> somewhat transparent. We do this with an alpha filter. I've set the opacity of the layer to 35% here. Ranges between 25% to 50% seem to be about right for the aged look. You may want to experiment with the <DIV>'s background color as well.
There is only one photo in this post - the colored one at the bottom. The center one was created using the grayscale filter, and the top using a simple HTML <DIV> overlay with an alpha (opacity) filter. In a few short paragraphs, I'll show you how it's done.
A simple <IMG> element is all that's required to generate the colored photo:
<IMG src="tarahumaraMotherSon.jpg" style="width:185px; height:188px; position:absolute; left:0px; top:0px">
You'll notice the image is positioned "absolutely" by the style parameter "position:absolute". This places it on the page at a fixed position at 0 pixels from the left edge of the window and 0 pixels from the top. You may position your own image where ever you'd like. Also notice we have specified the image's WIDTH and HEIGHT. Our overlay will be set to the same position, width, and height. Now, let's turn the image into a grayscale (black and white) as shown in the middle photo:
<IMG src="tarahumaraMotherSon.jpg" style="width:185px; height:188px; position:absolute; left:0px; top:0px; filter:gray">
By simply adding the filter:gray parameter as a style attribute, we turn the image to grayscale.
Now we'll code a <DIV> element which will serve as our colored overlay, making the photo appear as if it's old:
<IMG src="tarahumaraMotherSon.jpg" style="width:185px; height:188px; position:absolute; left:0px; top:0px; filter:gray">
<DIV style="width:185px; height:188px; position:absolute; left:0px; top:0px; filter:alpha(opacity=35); background-color:#fff8b0"> </DIV>
<DIV style="width:185px; height:188px; position:absolute; left:0px; top:0px; filter:alpha(opacity=35); background-color:#fff8b0"> </DIV>
The <DIV> element defines a box exactly the same size as our photo image. We have positioned it exactly the same as the photo too: 0 pixels from the left edge of the window and 0 pixels from the top. We have set the overlay box's background color to #fff8b0, kind of a dingy-yellow color. To make the photo show through the overlay, we must make the <DIV> somewhat transparent. We do this with an alpha filter. I've set the opacity of the layer to 35% here. Ranges between 25% to 50% seem to be about right for the aged look. You may want to experiment with the <DIV>'s background color as well.