Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post

    fade between colours using css?

    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,
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #2
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    a:link, visited {
    
    color: #fc1;
    
    background-color : #666;
    
    }
    
    a:hover {
    
    color: #000;
    
    background-color : #ccc;
    
    }
    Hope that helped .

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    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,
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #4
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've never tried fading between different colours, but it might be possible, so I'd Google it - sorry I couldn't help.

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or JavaScript..

  • #7
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ]|V|[agnus
    Or JavaScript..
    Really? I need to learn more javascript - that would be a good alternative I think
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    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,
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."


  •  

    Posting Permissions

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