сделать более яркий цвет градиента

Question

Скажем, у меня есть кнопка, которая стилизовано следующим CSS:

background-image: linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%); 
background-image: -o-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%); 
background-image: -moz-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%); 
background-image: -webkit-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%); 
background-image: -ms-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%); 
background-image: -webkit-gradient(
linear, 
left bottom, 
left top, 
color-stop(0.41, rgb(112,166,30)), 
color-stop(0.71, rgb(150,222,42)) 
); 

Что простой способ сохранить имеющие те же цвета, но показать им ярче? В основном это изменение стиля при зависании входного элемента.

Answer 1

Используя CSS3, вы можете использовать более интересную цветовую модель: HSL, в которой L - это свет. Это хорошая модель, когда вы хотите изменить яркость вашего цвета. Если вы хотите сделать, если более яркие (не более бледные, как с помощью белого слоя над ним), это путь.

Если вы не хотите менять свой css, вам нужно будет ввести код. Например, вы можете читать и анализировать цвет css (используя jquery css function) и динамически устанавливать его при другом значении компонента света при наведении объекта на объект.

Но лучшее решение, если у вас есть много цветов и градиентов, вероятно, будет использовать динамическую таблицу стилей, например less, в которой вы могли бы просто определить 2 (или более) значения яркости, которые будут включены в ваши правила css.

Answer 2

Вы облака имеют элемент белого фона (оберните свой текущий код в div или что-то еще) за свой элемент градиента, а затем измените непрозрачность ваших цветов при наведении. В противном случае вам понадобится другой цвет.

Надеюсь, что это поможет. :)

Answer 3

Используйте два класса:

.button { 
... your existing css 
} 

Затем используйте отдельный набор цветов для: парить

.button:hover { 
... your existing css with different colours 
} 

Вы на самом деле установить различные значения цвета с помощью CSS.

Вот удобный инструмент: http://www.colorzilla.com/gradient-editor/