CSS3 HSL - Saturation Value (only)
I have a class called "button", I just use it for all hover elements. Most of my buttons are black (background color) and .button: hover changes the background value of the background to gray.
However, some of my buttons have random colors, so they lose their effect when their background color is changed to light gray. for this reason I want to change the "satauration" value of the hover instead of changing the entire color. Thus, the hover effect will be based on the base color.
I was thinking ... if I can change the "saturation" value (only) of the background color so that my hover effect is still useful for random colors.
source to share
Using filter currently only works for webkit based browsers.
-webkit-filter: saturate(3);
filter: saturate(3);
Saturation filter matching with luminance appears to have the greatest effect, with blacks being noticeably reflected
-webkit-filter: brightness(0.2) saturate(3);
filter: brightness(0.2) saturate(3);
Additional demo: http://html5-demos.appspot.com/static/css/filters/index.html
source to share
There are two solutions for this problem:
First use a transparent png with a gradient from white to transparent. On OnHover apply the image by the button. I haven't tried it, but it looks promising.
Second, use the css inset dropshadow. If the parameters are set correctly, you can easily control the gradient effect.
You can also use rgba (r, g, b, a) to make changes to the main color of the button. But remember that the text value of the button will also be affected, giving you usability issues.
source to share