...

View Full Version : fade between colours using css?



Badman3k
10-19-2004, 05:12 PM
Is it possible to use CSS to fade the colour of a link and background between to different colours when the user moves their mouse over it?

i.e. the default link will be a dark grey box with orange text and then when moused over it goes to a pale grey box and black text?

Many thanks in advance,

chilipie
10-19-2004, 07:24 PM
a:link, visited {

color: #fc1;

background-color : #666;

}

a:hover {

color: #000;

background-color : #ccc;

}


Hope that helped :) .

Badman3k
10-19-2004, 07:52 PM
Thanks for the reply but I actually want it to fade between the two i.e. have a transition and not a sudden switch, can this be done? or am I gonna have to use flash?

Many thanks,

chilipie
10-19-2004, 07:54 PM
I've never tried fading between different colours, but it might be possible, so I'd Google it - :( sorry I couldn't help.

bradyj
10-19-2004, 09:34 PM
You could do a gif background image, just create the fade, and style your CSS to activate the other gif on rollover -- Safari does not animate gif background images, however -- and your only other bet is then flash.

]|V|[agnus
10-19-2004, 10:14 PM
Or JavaScript..

bradyj
10-19-2004, 10:27 PM
|V|[agnus']Or JavaScript..

Really? I need to learn more javascript - that would be a good alternative I think :)

]|V|[agnus
10-19-2004, 10:33 PM
Yeah. I don't have a script handy, but I figure it would be some combination of manipulating the style object and use of setTimout() to iterate through the fade.

So like on mouse over you would use setTimeout() to call a function that, say, iterates the red value of an RGB set from 0 to 100 or something. You could of course adjust whatever color values you needed, but I think that basic approach would suffice.

Badman3k
10-20-2004, 08:47 AM
Thanks for you help. I did have a feeling I'd have to use Jscript or flash but i just thought I'd check.

Thanks again,



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum