Динамическое затенение градиента в css

Question

У меня есть страница cshtml с некоторыми элементами Div. Эти элементы div окрашены градиентом, как указано в классах стилей. Я также добавил класс зависания, который превращает цвет div чуть светлее, фактически имитируя эффект кнопки и зависающую над ней. В конечном итоге divs используются для хранения текста, полученного от контроллера MVC.

Что бы я хотел сделать, это каким-то образом в jquery, возможно, для динамического изменения затенения набора div. Я укажу, что набор будет красным (# FF0000), но остальные части div в наборе должны затем загореться. Что-то похожее на блок «Оттенки» выбора цвета W3 http://www.w3schools.com/tags/ref_colorpicker.asp

Вот jsfiddle, с чем мне более или менее нужно заниматься.

https://jsfiddle.net/ezxkf3qL/1/

Вы заметите, что у меня есть 2 CSS классы, определяющие цветовые градиенты, 'RED1' и 'RED2'. Если у меня есть 6 разделов в 3 наборах, это означает, что мне нужно построить 18 разных классов цвета и их соответствующие методы наведения.

В идеале я хотел бы иметь один класс класса цветов и один класс метода наведения для каждого набора. Затем jquery примет цвет и динамически изменит цвета градиента «красного» класса для каждого элемента, чтобы получить тот же эффект, что и в моем примере.

Я пытался что-то вроде этого также:

var list = $("div.col").find(".get"); 

var step = 100; 

list.each(function(i, e) { 
    var shade = i * step; 
    $(this).css("background-color", "rgb(255, " + shade + "," + shade + ")"); 
}); 

Это изменение затенение, но с 6 элементами это своего рода становится слишком легким или не различает различные затенения достаточно. Также это не решает мою проблему с градиентом.

Этот же принцип применим к окраске кнопок или любого другого элемента. Возможно, есть jquery, который мог бы решить все это одновременно, о чем я не знаю. Любая помощь будет оценена.

Answer 1

Я сделал снимок, и вот my fiddle.

Я предположил, что вы сделаете это только для «красного» (# ff0000) оттенка, а спектр будет от красного до светло-красного. В приведенной выше скрипте используется синтаксис webkit, вы можете изменить код в соответствии с вашими потребностями.

var base= 0; 
var others=0; 
var otherbase = 100; 
var step= 15; 
list.each(function(i, e) { 
    $(this).css("background", "linear-gradient(to bottom, rgb("+ base +","+others+","+others+") 0%,#FF0000 100%) "); 

    if(base<60) 
     base=base+30; 
    else if(base<200) 
     base= base + 15; 
    else{ 
    base= base + 25; 
     others=otherbase + step; 

     otherbase=others; 
    } 
}); 

UPDATE:

Я установил fiddle, вы должны быть в состоянии проверить это сейчас, сожалею об этом.

Что делает код, так это то, что он подсчитывает, сколько .get divs есть и применяет спектр градиента, начиная от черного до красного до белого. Отклонение оттенков зависит от количества .get divs (чем меньше, тем больше разница).

Для зависания я предположил, что вы только хотели осветлить оттенок завихренного div. Так что я создал псевдо-элемент, который появляется только при наведении курсора мыши и выступать в качестве полупрозрачный белой накладки, смотрите код CSS ниже:

.get:hover:before { 
    content:""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background: rgba(255, 255, 255, 0.2); 
} 

Это требует JQuery, кстати.

Answer 2

Я попробовал то, что вы хотите, увидеть скрипку "https://jsfiddle.net/ezxkf3qL/2/" и скриншот:

Здесь я допрашивал изменения цвета с помощью W3schools. Таким образом, я использовал следующий алгоритм для достижения результата, код JS:

var list = $ ("div.col"). Find (". Get");

var base= 0; 
var others=0; 
var otherbase = 100; 
var step= 15; 
list.each(function(i, e) { 
    $(this).css("background-color", "rgb("+ base +","+others+","+others+")"); 
    if(base<60) 
     base=base+30; 
    else if(base<200) 
     base= base + 15; 
    else{ 
    base= base + 25; 
     others=otherbase + step; 

     otherbase=others; 
    } 
}); 

HTML-код:

<div class="col"> 
    <div class="get mydiv1"></div> 
    <div class="get mydiv2"></div> 
    <div class="get mydiv3"></div> 
    <div class="get mydiv4"></div> 
    <div class="get mydiv5"></div> 
    <div class="get mydiv6"></div> 
    <div class="get mydiv7"></div> 
    <div class="get mydiv8"></div> 
    <div class="get mydiv9"></div> 
    <div class="get mydiv10"></div> 
    <div class="get mydiv11"></div> 
    <div class="get mydiv12"></div> 
    <div class="get mydiv13"></div> 
    <div class="get mydiv14"></div> 
    <div class="get mydiv15"></div> 
    <div class="get mydiv16"></div> 
    <div class="get mydiv17"></div> 
    <div class="get mydiv18"></div> 
</div> 

Объяснение:

Чтобы получить более темные оттенки, сохранить изменения R(RED) значения и держать других в 0. Затем после Red пересекает 200, начинают увеличиваться с другой G и B значения за базовым значением говорят 100. Продолжайте использовать это, и вы получите следующий результат, как показано на скрипке и изображении.

Чтобы сделать дрейф эффект использование JQuery .hover() как:

(".get").hover(function(){ 
// change background here 
});