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`.
@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.
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/
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".