Results 1 to 9 of 9

Thread: fading colors

  1. #1
    Join Date
    Nov 2007
    Posts
    151
    Thanks
    67
    Thanked 0 Times in 0 Posts

    Default fading colors

    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
    Last edited by d-machine; 07-05-2008 at 10:11 PM.

  2. #2
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    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
    Last edited by magicyte; 07-08-2008 at 05:35 PM. Reason: error

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 07-09-2008 at 02:48 AM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    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).
    Last edited by jscheuer1; 07-08-2008 at 06:30 PM. Reason: Merged posts that belong together

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by magicyte View Post
    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

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

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Nile View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •