Hi. I am trying to make a css gradient fade to a different color gradient. I didn't use a background image because I know you can't fade those, but can you fade a gradient?
Here's a test page to show you what I need to fade: http://www.gchiller.com/gradient-fade
(The gray border is just to show the rollover area, it won't be there in the final product.)
@ChristopherBurton : I tried recreating the size of the gradient using box-shadow, but I can't seem to get the sizes right. Could you please help? The original gradient is 12px wide.
Ok, i totally was misunderstanding what you were wanting, glad these guys could help ya out. And i never really thought about my name with the underscores before, thanks for the heads up
@John, Sorry, I decided to use the box-shadow method. But thanks anyway!
P.S. Not sure if you already know this, but, since your username has underscores on both sides, when I try to @ it, it makes it italicized so I have to just use "@John". No big deal.
Hi. I am trying to make a css gradient fade to a different color gradient. I didn't use a background image because I know you can't fade those, but can you fade a gradient?
Here's a test page to show you what I need to fade: http://www.gchiller.com/gradient-fade (The gray border is just to show the rollover area, it won't be there in the final product.)
I think what you might be looking for is
box-shadow.@NoizyCr1cket, would you want to try a JavaScript way of absolving this problem?
@ChristopherBurton : I'll check that out
@John : Sure, if it works and is relatively simple.
@ChristopherBurton : I tried recreating the size of the gradient using box-shadow, but I can't seem to get the sizes right. Could you please help? The original gradient is 12px wide.
@NoizyCr1cket
http://jsfiddle.net/vhCwj
@NoizyCr1cket,
Is there some kind of event that fires the 'fade' for the gradient (hover, click, mousedown, etc)?
Otherwise Chris got it by adding the box-shadow.
Ok, i totally was misunderstanding what you were wanting, glad these guys could help ya out. And i never really thought about my name with the underscores before, thanks for the heads up
@ChristopherBurton, thanks! I got it working with transitions.
@John, Sorry, I decided to use the box-shadow method. But thanks anyway!
P.S. Not sure if you already know this, but, since your username has underscores on both sides, when I try to @ it, it makes it italicized so I have to just use "@John". No big deal.
Extra markup: http://jsfiddle.net/vhCwj/1/