Topic: CSS Transparent Rollovers

've seen tons of nifty flash rollovers that use partial transparency to highlight a link or button while still showing the background. Since I can't fit my head around flash, I decided to see if I couldn't do the same thing with CSS. I've come up with an excellent, compliant solution that works in IE, Mozilla, and Opera. How often does that happen? The secret lies in the image. At first I tried using a PNG-24 image with 50% transparency. IE didn't like that, but I ran into an interesting glitch some browsers have with .pngs. Instead of making them transparent, they dither them.

So this is what I did. I went into photoshop and set myself up and new image 2x2 px. I zoomed in to 1600% and snatched my pencil tool. Set the size to 1 px and drew myself a black diagnol line.

--Example-- X is a black pixel and O is a white.
XO
OX
-----------

I saved this as a pattern and fired up another new image. Jumped into the channels pallete and made an alpha channel. Filled it with my new pattern and selected it. Then I just added it as a mask to the white background and viola! A 50% transparent image. Then I saved the badboy as a .gif and set up my css like this:

a:link {
color: black;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: none;
}

a:hover {
background: url("trans.gif") top left no-repeat;
color: black;
text-decoration: none;
}

a:active {
background: url(trans.gif) top left no-repeat;
color: black;
text-decoration: none;
}


This is what came out:

http://infevo.no-ip.info/exp/rollover.html

(Edited by austizmo on 05-01-2004 18:56)

Nice

In case you didn't know; it is possible to get png transperancy support in IE, but you have to use some special IE only CSS filters to enable it. It will ruin CSS compilance with IE, but you'll get full png support.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio - Vim Tutorial -

*nods* I know a little bit about the 'filters' that IE supports. I don't know enough about them to use them in this fashion though. Besides, like you said, it ruins compliance. Which isn't a huge deal, but since you can be compliant and acheive the effect, why not? Thanks for the compliment. I was pretty proud of this little tech.

Otherwise you could use a bit of server side code to filter the userAgents and provide a PNG for the standard compliant browsers and a dithered GIF for the others. To do so you could either generated a CSS depending of the browser, or simply put your server side script in the background-image attribute.

Yep. I think I could write a bit of PHP to do just that. Thats a great idea if the transparency was more complex, the dithering stops looking so great on a gradient. I could serve up a nice .png image to those using a halfass browser and stick the IE people with a dithered gif. But the gif works great for this. And it's only 36 bytes so the download is near instantaneous.

The cons of the dithered .GIF is that it can make the text above it really hard to read. You could try to use an animated dithered image ( 87 bytes ) to slightly enhance the effect.

Animated how? Just alternate the transparent and non-transparent pixels? And wouldn't that trick your eye into seeing a solid white block? In anycase I'll have to try it. Thanks!

Yep, animated that way. The goal is to trick a little the eye by quickly changing the solid/transparent pixels. That trick was used on 8bits computers to artificially increase the number of shades.