fading colors

**d-machine** · 07-05-2008, 09:49 PM

hi
I have a list of links with blue backgrounds,
Is it possible to use css in order to have a fadeout colours in the background of the links onMouseOut?

thanks

*A solution in js will be good as well

**magicyte** · 07-08-2008, 05:21 PM

Yeah. Here is an example.

Code:

<head>
<style type="text/css">
</style>
<script type="text/javascript">
var out = false;
var i = 0;
var colors = new Array(10);
colors[0] = "000000";
colors[1] = "111111";
colors[2] = "222222";
colors[3] = "333333";
colors[4] = "444444";
colors[5] = "555555";
colors[6] = "666666";
colors[7] = "777777";
colors[8] = "888888";
colors[9] = "999999";

function fade_up()
{
document.getElementById('fader').style.background=colors[i];
i++;
if(!out && i < 9)
{
setTimeout('fade_up()', 100);
}
}

function fade_down()
{
document.getElementById('fader').style.background=colors[i];
i--;
if(out && i > 0)
{
setTimeout('fade_down()', 100);
}
}
</script>
</head>
<body>
<a href="someplace.html" id="fader" onmouseover="fade_up();out=false;" onmouseout="fade_down();out=true;" style="background:black;color:white;cursor:hand;">Link</a>
</body>

Basically you want some colors to fade with hexidecimal numbering to make the links look elaborate. Please thank me if I helped.

-magicyte

**jscheuer1** · 07-08-2008, 05:38 PM

Here's a cross browser script I had laying around for that:

http://home.comcast.net/~jscheuer1/side/fade_text/

I never put it up before, because I haven't gotten around to documenting its advanced 'stringer' and 'looper' functions. But you won't need them for what you want, you can just do like the 'HTML for first example' shows, only use an anchor link tag instead of a span tag, and add the 5th 'background' parameter.

**magicyte** · 07-08-2008, 05:43 PM

Hey, jscheuer1, how is it possible to make text get into opacity and fade? I tried it, but it didn't work.

-magicyte

- By the way, nice script.

-magicyte

But as to do it with CSS, you would need to use a behavior: url(some.htc).

**jscheuer1** · 07-08-2008, 06:35 PM

No opacity is involved, it is the color and/or background color and/or border color that is changed incrementally.

Thanks for your compliment on the script!

css behaviors depend upon both IE and javascript, so are neither true css solutions, nor cross browser. There is no way (as far as I know) to do this with css alone, not even in IE.

**magicyte** · 07-08-2008, 06:37 PM

Yeah, I know that, but is there any possible way to make text go away with opacity? I tried it before, never worked. It only works with images (I think...).

-magicyte

**jscheuer1** · 07-09-2008, 02:32 AM

Originally Posted by magicyte

Yeah, I know that, but is there any possible way to make text go away with opacity? I tried it before, never worked. It only works with images (I think...)

It depends upon the browser. In IE, the element must have 'layout'* for the filter to even apply. In all others that do some type of style opacity, this is not the case. However, in IE 7 and in recent Opera, opacity effects applied to text cause it to lose its anti-aliasing quality. In IE 6 this could be fixed by adding background to the element containing the text. In IE 5.5, it was a non-issue. Before that in IE, filters didn't really work at all, or at least not much.

The bottom line though is, if you want to add opacity effects to text, and do it cross browser in the current environment which includes IE 7 and Opera, as well as better behaved (in this regard) browsers, like Safari and FF - you are better off creating a blank overlay with background that can be faded in to obscure the text, and faded out to reveal it.

Or, if my script linked to earlier in this thread will work out, use that. It doesn't depend upon filters or opacity, so avoids a lot of potential problems.

* http://msdn.microsoft.com/en-us/libr...81(VS.85).aspx

**Nile** · 07-09-2008, 02:39 AM

A little off topic, sorry. But jscheuer1 how long did it take to code that!? Thats really neat.

**jscheuer1** · 07-09-2008, 03:04 AM

Originally Posted by Nile

A little off topic, sorry. But jscheuer1 how long did it take to code that!? Thats really neat.

This particular script isn't entirely finished, as I still envision perfecting the interface and documentation for its 'looper' and 'stringer' functions. However, for everything documented in detail on the demo page, it's in fine shape. The total number of actual hours development time would be in the range of days most likely, although its the sort of project that I get back to from time to time and that had two major periods of development several months to a year apart.

Thread: fading colors

Thread Tools

Search Thread

fading colors

Bookmarks

Bookmarks

Posting Permissions