Могу ли я изменить один параметр цвета в CSS?

Когда я создаю что-то в Adobe Illustrator, мне нравится выбирать цвет, а затем играть с его яркостью или насыщенностью, чтобы сделать себя похожим цветом «того же семейства».

В CSS вы можете определять цвета с такими значениями: RGB, RGBA, HSL... Так как вы можете определить все три параметра одновременно, я давно задавался вопросом: есть ли способ изменить единственный параметр те?

Например, предположим, что я определяю три ссылки как имеющие очень «красивые» цвета #FF0000, #00FF00 и #0000FF. Можно ли создать единое правило CSS, которое гласило бы: «При наведении на все ссылки, независимо от их цвета, уменьшайте их яркость/яркость на 10 %»?

Я бы очень хотел сделать то же самое и с альфа-параметрами цветов RGBA. Единственный известный мне общий способ воздействия на все цвета без разбора — это свойство непрозрачности, но это превращается в проблему, если я просто хочу воздействовать на фон.

Такая вещь (влияющая только на H, S или L) звучит довольно просто: если вы можете переопределить весь цвет, не можете ли вы просто снова взять тот же цвет и изменить одно из его значений? Но вопрос в том, кто-то думал о том, чтобы сделать это?


person Ariane    schedule 22.04.2013    source источник
comment
CSS не может сделать это изначально, но SASS и некоторые другие препроцессоры CSS могут. sass-lang.com/docs/yardoc/Sass/ Скрипт/   -  person Explosion Pills    schedule 22.04.2013
comment
^Почему это не ответ? Это кажется более адекватным и более кратким, чем что-либо ниже.   -  person Ariane    schedule 22.04.2013


Ответы (2)


Вы можете получить аналогичный эффект, используя значения rgba и регулируя непрозрачность. Например:

color: rgba(0, 0, 0, 1.0);

Это означает чистый черный цвет. Последние цифры в скобках влияют на прозрачность. Вы можете настроить его от 1.0 до 0.5, чтобы получить более светлый цвет (при условии, что за текстом находится светлый фон).

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

person Mark Ryan Sallee    schedule 22.04.2013
comment
Но если я сделаю цвет: #FF0000; а потом я делаю color: rgba(0,0,0,0.5); Я не получаю светло-красный, не так ли? Я серею. И если я использую непрозрачность: 0,5; тогда цвет фона или изображение также станут прозрачными. - person Ariane; 22.04.2013
comment
Вы правы. Чтобы сделать то, что я предлагаю, вы должны начать с color: rgba(255, 0, 0, 1.0); — ваши более поздние стили для :hover или чего-то еще будут color: rgba(255, 0, 0, 0.5); и т. д. - person Mark Ryan Sallee; 22.04.2013
comment
Это не то, что я ищу. Я ищу что-то, что может повлиять как на зеленый, так и на красный элемент и сделать их обоих темнее. - person Ariane; 22.04.2013
comment
Думаю, я попал. Возможно, это не совсем то, что вы ищете, но фильтры CSS могут сработать. Попробуйте раскомментировать некоторые строки в этой скрипте. jsfiddle.net/MRSallee/zTtEd/1 - person Mark Ryan Sallee; 22.04.2013
comment
Это в некоторой степени так, даже если вы не можете указать строго фоновый цвет или цвет с ним. Звучит довольно полезно. Хотя на данный момент не очень широко поддерживается ~. Забавно, что фильтры CSS доступны только для Chrome, а фильтры SVG — только для Firefox. - person Ariane; 22.04.2013

Я предлагаю изучить SASS и LESS, которые могут сделать это для вас и многое, многое другое.

http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

Или вы можете использовать jQuery для этого, как указано в этом вопросе:

Увеличить цвет яркости CSS при нажатии с помощью jquery/javascript?

person Michael Rader    schedule 22.04.2013
comment
Вы не должны просто ссылаться на статьи. Вы должны объяснить свои ответы - person Cody Guldner; 22.04.2013