JQuery и расчет цвета

Question

В настоящее время у меня есть тег H1, настроенный на цвет # 8c0000 (темно-красный).

Используя jQuery, я хотел бы получить цвет H1, а затем выполнить расчет на основецвет h1, чтобы определить, каким будет шестнадцатеричное значение нового цвета, если бы я хотел, чтобы он был на несколько оттенков темнее.

Причина этого в том, что я хочу использовать новое свойство text-shadow в CSS3 для создания «рельефного»"эффект путем создания" вставной "тени для текста.

Чтобы получить цвет элементов H1, я полагаю, можно сделать с помощью:

('H1').css('color');

Но что мне делать с этим значениемвычислить более темный оттенок?

PS - видя, как цвет H1 будет установлен динамически, я не могу просто жестко кодировать в фиксированной тени текста, поэтому мне нужны вычисления ...

Любая помощь будет принята с благодарностью.Заранее спасибо

Answer 1

Простейшим методом (без преобразования между цветовыми пространствами) было бы просто проанализировать результат $('h1').css('color') и вычесть определенное количество из каждого из R, G и B. Основная проблема заключается в том, что jQuery не нормализует значение вернулся сюда, поэтому нам придется немного разобраться с самим собой.

Получив функцию getRGB() из jQuery Color Plugin и убрав первую и последнюю проверку работоспособности для экономии места, теперь мы можем получить значение RGB, необходимое для этого. (Возможно, вы захотите сохранить последнюю проверку и большой массив именованных цветов, если вы работаете с ними)

Остальная часть задачи тривиальна - просто создайте новый цвет, исключив определенное количество из каждого отдельного значения цвета, а затем снова соедините их вместе, чтобы сформировать действительное значение rgb:

$('h1').css('text-shadow', function(){
    var rgb = getRGB($(this).css('color'));

    for(var i = 0; i < rgb.length; i++){
        rgb[i] = Math.max(0, rgb[i] - 40);
    }

    var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
    return '0 3px 3px ' + newColor;
});

Смотрите простую демонстрацию здесь: http://jsfiddle.net/yijiang/pxqkH/4/

Answer 2

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

Установите текстовую тень на цвет самого текста,и другую текстовую тень с полупрозрачным, более темным цветом над ним, оба немного выше исходного текста.Полупрозрачная тень будет наложена на клонированный цвет, создавая эффект, который вам нужен:

var $h1 = $('h1');

$h1.css('text-shadow', function() {
    return 'rgba(0,0,0,0.7) 0 -1px, '+$h1.css('color')+' 0 -1px';
});

Живая скрипка здесь .

Примечание:Я не знаю, почему сначала нужно объявить наложенную тень (возможно, это связано с чтением CSS от R до L), но, похоже, это так.

Answer 3

Один из способов сделать это - получить значение цвета RGB, преобразовать его в HSV - уменьшить значение V, преобразовать его обратно в RGB и затем использовать это значение.

HSV - это другое цветовое пространство, где значение H представляет оттенок (цвет), S представляет насыщенность (насыщенность), а V представляет значения (яркость). Для более темного оттенка уменьшите V. После уменьшения значения V преобразуйте его обратно в RGB. Затем установите это как новое значение цвета.

Вот страница, описывающая, как выполнить преобразование RGB в HSV: Почему не работает этот код Javascript RGB в HSL?