Как добавить нарастающую прозрачность(насыщенность цвета) средствами css?

Question

[zeni1agent]

у меня есть вот такой код

.block{
 display:flex;
 flex-direction: row-reverse;
 justify-content: center; 
}
.block input{
 display:none;
}
.block input[type="radio"]:checked ~ label{
 background-color: #0027ff; 
}

<div class="block">
<input type="radio" name="test" id="id_test_5" value="5" /> 
<label for="id_test_5"></label> 
<input type="radio" name="test" id="id_test_4" value="4" /> 
<label for="id_test_4"></label> 
<input type="radio" name="test" id="id_test_3" value="3" /> 
<label for="id_test_3"></label> 
<input type="radio" name="test" id="id_test_2" value="2" /> 
<label for="id_test_2"></label> 
<input type="radio" name="test" id="id_test_1" value="1" /> 
<label for="id_test_1"></label> 
</div>

И меня интересует вопрос можно ли при активаций каждый последующий цвет был все более и более насыщенным?

Comments

[Lord_Dantes]

Можно при клике добавлять к CSS свойству которое делает насыщенней картинку 0.1 как вариант

[Ankhena]

На js вы можете получать текущий цвет и изменять по какому угодно принципу.

И почитайте https://css-tricks.com/switch-font-color-for-diffe...

[zeni1agent]

Ankhena,
Мне кажется постоянно получать и приплюсовывать меняя цвет

:root {
  --red: 200;
}
.block input[type="radio"]:checked ~ .test1 {
background: rgb(calc(var(--red) * 0.1), 100, 100);
}
.block input[type="radio"]:checked ~ .test2 {
background: rgb(calc(var(--red) * 0.2), 100, 100);
}
.block input[type="radio"]:checked ~ .test3 {
background: rgb(calc(var(--red) * 0.3), 100, 100);
}
.block input[type="radio"]:checked ~ .test4 {
background: rgb(calc(var(--red) * 0.4), 100, 100);
}
.block input[type="radio"]:checked ~ .test5 {
background: rgb(calc(var(--red) * 0.5), 100, 100);
}

не очень то продуктивно.

[Ankhena]

zeni1agent, мое предложение в основном было про js.
Статья лишь для демонстрации работы с цветом.

[zeni1agent]

Ankhena,
Все равно даже если сделать с помощью js код получается весьма длинным

$('#test_1').on('click', function(e){
var rer = $('.test1').css('background');
$('.test1').css('background' rer+1);
}
$('#test_2').on('click', function(e){
var rer = $('.test1').css('background');
$('.test1').css('background' rer+1);
$('.test2').css('background' rer+2);
}
$('#test_3').on('click', function(e){
var rer = $('.test1').css('background');
$('.test1').css('background' rer+1);
$('.test2').css('background' rer+2);
$('.test3').css('background' rer+3);
}

[Ankhena]

zeni1agent, используйте this и prev. Зачем 3 раза одно и тоже писать?

[zeni1agent]

Ankhena,
Потому что по другому он у меня не работает так как надо
Мне нужно что бы и каждый предыдущий элемент тоже активировался
А не только тот на который я нажимаю

$('#test_1').on('click', function(e){
var rer = $('.test1').css('background');
$('.test1').css('background' rer+1);
}
$('#test_2').on('click', function(e){
var rer = $('.test1').css('background');
$('.test1').css('background' rer+1);
$('.test1').prev().css('background' rer+2);
}
$('#test_3').on('click', function(e){
var rer = $('.test1').css('background');
$('.test1').css('background' rer+1);
$('.test1').prev().css('background' rer+2);
$('.test1').prev().prev().css('background' rer+3);
}

[Ankhena]

zeni1agent, я плохо понимаю, что значит прибавить к фону единицу.
$('.test1').css('background') выдаст что-то типа

rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box

. Единица к этому очень плохо прибавляется.

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

Напишите для этого отдельную функцию.

Дальше $('label').on('click', function(e) { .. }) Кстати, зачем инпуты с лейблами?

Внутри меняете цвет для кликнутого элемента (вызываете вашу функцию).

И

$(this).prevAll('label').css('border', '3px solid red');

для предыдущих лейблов. Я для примера написала задать границу для предыдущих.

Дальше для набора этих элементов с помощью .each вызывать ту функцию, которая получает и изменяет цвет.

Еще у вас с какой-то целью блоки выводятся в обратной последовательности. Если что, есть симметричный nextAll

[zeni1agent]

Ankhena, Я писал слегка абстрактно что бы не вдаваться в подробности и заострить внимание на том что код получается весьма длинным так и так.
Извиняюсь если слегка запутал.
Ну я смог сделать то что хотел но проблема в том что
scss не доступен на обычном css
https://codepen.io/zeni-agentt/pen/mgwgvj
А писать каждый цвет отдельно тоже как по мне плохая идея
https://codepen.io/zeni-agentt/pen/gyxPmv

Напишите для этого отдельную функцию.

Дальше $('label').on('click', function(e) { .. }) Кстати, зачем инпуты с лейблами?

Внутри меняете цвет для кликнутого элемента (вызываете вашу функцию).

И
$(this).prevAll('label').css('border', '3px solid red');
для предыдущих лейблов. Я для примера написала задать границу для предыдущих.

Ну я сделал то что ты предложил только вот у меня получилось оно слегка криво и я до сих пор не понимаю
как увеличить(уменьшить) каждое последующее значение на n+-.
https://codepen.io/zeni-agentt/pen/KYvvvE

[Ankhena]

zeni1agent, Теперь опишите задачу нормально.
Что должно случиться при повторном клике на этот же лейбл и или при клике на другой?
Или что это за композиция из tmp?

[Ankhena]

zeni1agent, Если я правильно поняла, то при повторном клике на кликнутый первый раз label, насыщенность должна уменьшиться. А если на другой, то увеличиться.
Так?

Тогда false и true недостаточно. Нужно сохранять номер кликнутого в предыдущий раз. И сравнивать с номером кликнутого сейчас. Номер можно получать, например, из дата-атрибута, чтобы не заморачиваться с массивами.

Еще, если вы это делаете на js, то перепишите просто на div или ul li. Тогда не нужен огород с инпуто-лейблами.

[zeni1agent]

Ankhena, Мне нужно добиться точно то кого же эффекта
только короткой командой на js
https://codepen.io/zeni-agentt/pen/gyxPmv

Или что это за композиция из tmp?

tmp это переключатель который я обычно использую для кнопки
Здесь я его использовал потому что в противном случае он бы не переключался а просто красил цвет пока не перезагрузишь
Но как оказалось можно было обойтись и без него
https://codepen.io/zeni-agentt/pen/KYvvvE
https://codepen.io/zeni-agentt/pen/jRLGbO

[Ankhena]

zeni1agent,

Мне нужно добиться точно то кого же эффекта
только короткой командой на js

Тогда осталось разобраться только с функцией для цвета.
Варианты я писала выше.

[zeni1agent]

Ankhena,
Спасибо я вроде как уже разобрался как мне это сделать
https://codepen.io/zeni-agentt/pen/ROZLxv

Answer 1

[zeni1agent]

Вот то что удалось построить мне на js

.block{
 display:flex;
 flex-direction: row-reverse;
 justify-content: center; 
}
.block input{
 display:none;
}

label{
  width:100px;
  height:100px;
   background-color:#878787;
  margin:10px;
}

<div class="block">
<input type="radio" name="test" id="id_test_5" value="5" /> 
<label for="id_test_5"></label> 
<input type="radio" name="test" id="id_test_4" value="4" /> 
<label for="id_test_4"></label> 
<input type="radio" name="test" id="id_test_3" value="3" /> 
<label for="id_test_3"></label> 
<input type="radio" name="test" id="id_test_2" value="2" /> 
<label for="id_test_2"></label> 
<input type="radio" name="test" id="id_test_1" value="1" /> 
<label for="id_test_1"></label> 
</div>

//Функция перевода c rgb в hsv
function rgb2hsv (r, g, b) {
    let rabs, gabs, babs, rr, gg, bb, h, s, v, diff, diffc, percentRoundFn;
    rabs = r / 255;
    gabs = g / 255;
    babs = b / 255;
    v = Math.max(rabs, gabs, babs),
    diff = v - Math.min(rabs, gabs, babs);
    diffc = c => (v - c) / 6 / diff + 1 / 2;
    percentRoundFn = num => Math.round(num * 100) / 100;
    if (diff == 0) {
        h = s = 0;
    } else {
        s = diff / v;
        rr = diffc(rabs);
        gg = diffc(gabs);
        bb = diffc(babs);

        if (rabs === v) {
            h = bb - gg;
        } else if (gabs === v) {
            h = (1 / 3) + rr - bb;
        } else if (babs === v) {
            h = (2 / 3) + gg - rr;
        }
        if (h < 0) {
            h += 1;
        }else if (h > 1) {
            h -= 1;
        }
    }
    return {
        h: Math.round(h * 360),
        s: percentRoundFn(s * 100),
        v: percentRoundFn(v * 100)
    };
}

var color_full = $("label").css("background-color");
var newstr = color_full.match(/(\d+), (\d+), (\d+)/);  var hsv_color =  rgb2hsv (newstr[1], newstr[2], newstr[3]);

$("input").change(function() {
  if(this.checked) {    
var ryt = $(this).nextAll('label').length;  
   
for (var i = 0; i <= ryt; i++) {
 $('label:eq('+-i+')').css('background-color', 'hsl('+hsv_color.h+','+i*20+'%,'+hsv_color.v+'%)');     
}  
  
$(this).prevAll('label').css('background-color', ''); 
     }  
});