Могу ли я рассчитать монохромные значения цвета с помощью SASS или CSS3?
-6
0
Я хотел бы иметь возможность указать базовый цвет, например:
$basecolor: #ff0000;
и вычислять другие (более темные) цвета на основе этого. например:
$backgroundcolor: ($basecolor + rgba(0, 0, 0, .25));
$disabledcolor: ($basecolor + rgba(0, 0, 0, .5));
/* etc */
Это возможно?
Я делаю это сейчас, создавая оверлей, но для этого требуется добавить дополнительный html и чувствовать себя грязным. например:
.overlay25 {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, .25);
}
Затем опускание:
<div class="elementIWantToMakeDarker">
<div class="overlay25">
<p>content</p>
</div>
</div>
Каков наилучший способ сделать это?
спросил(а)
2015-04-23T18:21:00+03:00
5 лет, 10 месяцев назад
добавить комментарий
пожаловаться
61
Самый простой способ сделать это - использовать функции darken()
и lighten()
Sass:
$color: #123465;
$color_dark: darken($color, 50%);
$color_light: lighten($color, 50%);
Вы также можете использовать функцию mix()
, которая позволяет комбинировать два цвета с относительным весом:
$color: #123465;
$color_dark: mix($color, black, 50%);
$color_light: mix($color, white, 50%);
ответил(а)
2015-04-23T18:23:00+03:00
5 лет, 10 месяцев назад
добавить комментарий
пожаловаться
Ваш ответ