CSS Transparent Rollovers — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

CSS Transparent Rollovers

This page's ID: 21630

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	'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 [small](Edited by [internallink=21535]austizmo[/internallink] on 05-01-2004 18:56)[/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu