—»     —»   Знакомство с функциями color в LESS
  Раздел: CSS/Style Sheets   Нет комментариев  

Знакомство с функциями color в LESS

Мы уже рассказали вам довольно многое о LESS – от создания привлекательной навигации до советов о более эффективной разработке при помощи LESS, но это еще далеко не все! Сегодня мы хотим рассказать вам о функциях Color в LESS.

Знакомство с функциями color в LESS

Color (цвет) – это один из ключевых аспектов создания сайта, именно цветовая схема может сделать сайт привлекательным. С помощью LESS у нас есть возможность определять и применять цвета более согласованно, используя переменные. Более того, мы также можем использовать функции цветов, чтобы связывать и трансформировать цвета без необходимости использовать палитру.

Функции

LESS представляет несколько функций с довольно описательными названиями, которые мы можем использовать для управления цветом: lighten(), darken(), saturate(), desaturate(), fadein(), fadeout(), fade() spin() и mix().

Давайте опробуем некоторые из этих функций, чтобы увидеть, как это работает. В целях данного поста, мы берем зеленый (#7bab2e) в качестве переменной для данного демо.

@color: #7bab2e;

Затемнение и осветление

Изменять цвета при помощи LESS Color Function довольно просто. На нижеприведенном примере мы затемним @color на 20% от исходного значения;

.box.darken {
background-color: @color;
border: 3px solid darken(@color, 20%);
}

Этот код даст нам следующий результат. Граница, в сравнении с цветом внутри зеленого блока, будет темнее.

Знакомство с функциями color в LESS

Таким же образом мы можем осветлить цвет @color;

.box.lighten {
border: 3px solid lighten(@color, 20%);
}

Обратите внимание, что граница теперь светлее фона.

Знакомство с функциями color в LESS

Кроме того, мы также можем сохранять эти функции внутри переменных, а затем применять их посредством таблиц стилей следующим образом;

@colorDark: darken(@color, 20%);

.box.darken {
background-color: @color;
border: 3px solid @colorDark;
}

Подстройка цветов

Давайте опробуем еще одну функцию – на этот раз мы попробуем изменить цвет @color. Функция spin() в LESS используется для настройки оттенка. Если вы когда-нибудь игрались с настройками Hue/Saturation в Photoshop, то здесь функция довольно схожая.

Давайте рассмотрим следующий код.

.box.hue {
background-color: spin(@color, 123);
}

Максимальное значение для hue составляет 180, но также допускаются и отрицательные значения вроде -123.

Знакомство с функциями color в LESS

В LESS мы не ограничены применением лишь одной функции, можно одновременно применять и две. Давайте рассмотрим пример:

.box.desaturate {
background-color: desaturate(spin(@color, 123), 50%);
}

В данном коде мы сначала подстраиваем @color на 123, а затем немного обесцвечиваем результат на 50%. Вот что у нас получилось.

Знакомство с функциями color в LESS

Смешиваем цвета

Наконец, попробуем смешать цвета при помощи функции mix(). Эта функция позволит нам получить цвет в результате смешивания двух других. Если вы помните о том, как получается зеленый цвет (нужно смешать синий и желтый), то давайте попробуем сделать то же самое в LESS;

.box.mix {
background-color: mix(@blue, @yellow, 50%);
}

Этой функции потребуется три параметра – первые два будут отвечать за комбинируемые цвета, а третий – за вес каждого цвета. Мы здесь выставили 50%. Тем не менее, последний параметр немного странный.

Например, 0% в результате даст нам полное превалирование первого указанного цвета (в данном случае @blue), а 100% даст полную противоположность. Финальный результат, конечно, очевиден, мы получили зеленый, но этот зеленый не совсем то, что мы ожидали увидеть.

Знакомство с функциями color в LESS

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


Подытожим

Функции управления цветом действительно удобны и необходимы. Так как мы можем воспользоваться лишь одним цветом, а потом изменить его так, чтобы получить довольно привлекательную цветовую схему для сайта.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: LESS, CSS
Опубликовал Design FactoRy   Прочитано (раз): 21796   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031