Lighten css: Sass darken, lighten как правильно использовать? — Хабр Q&A

background-blend-mode | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Песочница
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

Определяет режим наложения фонового изображения на фоновый цвет или другие фоновые изображения. Допустимо указывать несколько значений через запятую, при этом они будут применяться к фоновым изображениям, перечисленных в background-image, в том же порядке.

Значение по умолчаниюnormal
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис

background-blend-mode: normal | multiply | screen | overlay | darken | lighten 
  | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue 
  | saturation | color | luminosity

Обозначения

Описание
Пример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным. inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

Значения, в целом, совпадают с режимами графических редакторов. Ниже описания взяты из руководства Adobe Photoshop.

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

  • Основной цвет — исходный цвет в изображении.
  • Совмещённый цвет — цвет накладываемого изображения.
  • Результирующий цвет — цвет, полученный в результате наложения.
normal
Обычный. Не используется смешивание цветов. Режим по умолчанию.
multiply
Умножение. В этом режиме значение основного цвета умножается на значение совмещённого цвета. Результирующий цвет всегда представляет собой более тёмный цвет. В результате умножения значения любого цвета на значение чёрного цвета вырабатывается чёрный цвет. В результате умножения значения любого цвета на значение белого цвета цвет остаётся неизменным.
screen
Осветление. В этом режиме перемножаются обратные значения основного и совмещённого цвета. В качестве результирующего цвета всегда применяется более светлый цвет. При осветлении с применением чёрного цвета, цвет остаётся неизменным. При перекрытии с применением белого цвета, цвет становится белым. Полученный эффект аналогичен наложению друг на друга изображений многочисленных фотографических слайдов с помощью проектора.
overlay
Перекрытие. В этом режиме цвета умножаются или осветляются в зависимости от основного цвета. Узоры или цвета перекрывают существующие пиксели, оставляя неизменными светлые и тёмные участки основного цвета. Базовый цвет не заменяется, а смешивается с совмещённым цветом, что позволяет отразить наличие светлых или тёмных участков первоначального цвета.
darken
Замена тёмным. В качестве результирующего выбирается основной или совмещённый цвет, в зависимости от того, какой из них темнее. Пиксели с цветом, более светлым по сравнению с совмещённым, заменяются, а пиксели с цветом, более тёмным по сравнению с совмещённым, остаются неизменными.
lighten
Замена светлым. В качестве результирующего цвета выбирается основной или совмещённый цвет, в зависимости от того, какой из них светлее. Пиксели с более тёмным цветом по сравнению с совмещённым цветом заменяются, а пиксели с более светлым цветом по сравнению с совмещённым цветом остаются неизменными.
color-dodge
Осветление основы. Основной цвет заменяется более ярким для отражения совмещённого цвета в результате уменьшения контраста между двумя цветами. Смешивание с чёрным цветом не приводит к появлению каких-либо изменений.
color-burn
Затемнение основы. Основной цвет заменяется более тёмным для отражения совмещённого цвета в результате увеличения контраста между двумя цветами. Смешивание с белым цветом не приводит к появлению каких-либо изменений.
hard-light
Направленный свет. В этом режиме цвета умножаются или осветляются в зависимости от совмещённого цвета. Полученный эффект аналогичен освещению изображения резким светом прожектора. Если совмещённый цвет (источник света) является более светлым, чем 50% серого, то изображение становится светлее, как после осветления. Этот эффект может применяться для добавления светлых участков к изображению. Если совмещённый цвет (источник света) является более тёмным, чем 50% серого, то изображение становится темнее, как после умножения. Этот эффект может применяться для добавления тёмных участков к изображению. Наложение чисто-чёрного или чисто-белого цвета приводит к получению чисто-чёрного или чисто-белого цвета.
soft-light
Рассеянный свет. В этом режиме цвета становятся более тёмными или более светлыми в зависимости от совмещённого цвета. Полученный эффект аналогичен освещению изображения расплывчатым светом прожектора. Если совмещённый цвет (источник света) является более светлым, чем 50% серого, то изображение становится светлее, как после осветления. Если совмещённый цвет является более тёмным, чем 50% серого, изображение становится темнее, как после затемнения. Наложение чисто-чёрного или чисто-белого цвета создаёт отчётливые, более тёмные или более светлые зоны, но чистого чёрного или белого цвета не получится.
difference
Разница. В этом режиме вычитается либо совмещённый цвет из основного цвета, либо основной цвет из совмещённого цвета в зависимости от того, какой цвет имеет большее значение яркости. Смешивание с белым цветом приводит к инвертированию значений основного цвета, смешивание с чёрным цветом не влечёт за собой каких-либо изменений.
exclusion
Исключение. В этом режиме создается эффект, аналогичный создаваемому в режиме «Разница», но характеризующийся более низким контрастом. Смешивание с белым цветом приводит к инвертированию значений основного цвета. Смешивание с чёрным цветом не приводит к появлению каких-либо изменений.
hue
Тон. В этом режиме создаётся результирующий цвет с яркостью и насыщенностью основного цвета и цветовым тоном совмещённого цвета.
saturation
Насыщенность. В этом режиме создаётся результирующий цвет с яркостью и цветовым тоном основного цвета и насыщенностью совмещённого цвета.
color
Цвет. Создаётся результирующий цвет с яркостью основного цвета и с цветовым тоном и насыщенностью совмещённого цвета. Этот режим сохраняет уровни серого в изображении и может применяться для раскрашивания монохромных изображений и добавления оттенков к цветным изображениям.
luminosity
Яркость. В этом режиме создаётся результирующий цвет с цветовым тоном и насыщенностью основного цвета и яркостью совмещённого цвета. Этот режим создаёт эффект инверсии цвета.

Песочница

normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity

div {
  min-height: 300px;
  background: 
    url(image/animate-bg2.png) 400px center no-repeat,
    url(image/animate-bg1.
jpg) 0 -200px no-repeat; background-blend-mode: {{ playgroundValue }}; }

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background-blend-mode</title> <style> body { background: /* Параметры фонового изображения */ url(/example/image/aquaria.jpg) center / cover no-repeat fixed, linear-gradient(#00A8DE, #FFF) fixed; /* Градиент */ background-blend-mode: luminosity; /* Режим наложения */ } </style> </head> <body> </body> </html>

В данном примере к <body> добавляется фоновое изображение, растянутое на всё окно браузера, плюс вертикальный линейный градиент от голубого до белого цвета. В результате смешивания фонового изображения и градиента получается однотонное изображение, которое постепенно становится чёрно-белым. Результат примера продемонстрирован на рис. 1.

Рис. 1. Вид фона

Объектная модель

Объект. style.backgroundBlendMode

Примечание

Safari до версии 10 и iOS Safari до версии 10.3 не поддерживают значения hue, saturation, color и luminosity.

Спецификация

СпецификацияСтатус
Compositing and Blending Level 1Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

35227.110.130
62810.3

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Цвет и фон

См. также

  • mix-blend-mode

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.02.2020

Редакторы: Влад Мержевич

blend-mode | HTML и CSS с примерами кода

normalmultiplyscreenoverlaydarkenlightencolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusionhuesaturationcolorluminosity

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

Конечный цвет — результат умножения верхнего и нижнего цветов. Черный слой приводит к черному окончательному слою, а белый слой не приводит к изменению. Эффект подобен двум изображениям, нанесенным на прозрачную пленку.

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

Конечный цвет — результат multiply, если нижний цвет темнее или screen, если нижний цвет светлее. Этот режим смешивания эквивалентен hard-light, но со слоем обмена.

Конечный цвет состоит из самых темных значений каждого цветового канала.

Конечный цвет состоит из самых светлых значений каждого цветового канала.

Конечный цвет — результат деления нижнего цвета на обратный верхний цвет. Черный передний план не приводит к изменению. Передний план с обратным цветом фона приводит к полностью освещенному цвету.

Этот режим смешивания похож на screen, но передняя часть должна быть только такой же cdtnkjq, как обратная сторона фона, чтобы создать полностью освещенный цвет.

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

Этот режим смешивания аналогичен multiply, но переднего плана нужно только быть темным, как обратное к фону, чтобы сделать окончательное изображение черным.

Конечный цвет — результат multiply, если верхний цвет темнее или screen, если верхний цвет светлее. Этот режим смешивания эквивалентен overlay, но со слоем обмена. Эффект подобен сиянию сурового прожектора на заднем плане.

Конечный цвет похож на hard-light, но мягче. Этот режим смешивания ведет себя аналогично hard-light. Эффект подобен сиянию рассеянного прожектора на заднем плане.

Конечный цвет — результат вычитания более темного из двух цветов из более светлого. Черный слой не действует, а белый слой инвертирует цвет другого слоя.

Конечный цвет похож на difference, но с меньшим контрастом. Как и difference, черный слой не действует, а белый слой инвертирует цвет другого слоя.

Конечный цвет имеет оттенок верхнего цвета, используя насыщенность и светимость нижнего цвета.

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

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

Конечный цвет имеет яркость верхнего цвета, используя оттенок и насыщенность нижнего цвета. Этот режим смешивания эквивалентен color, но при этом слои меняются местами.

blackness and lightness vs sass darken lighten

Lightrun Answers был разработан, чтобы уменьшить постоянное гугление, связанное с отладкой сторонних библиотек. Он собирает ссылки на все места, на которые вы могли бы обратить внимание, выискивая опасную ошибку.

И, если вы все еще застряли в конце, мы будем рады ответить на звонок, чтобы узнать, как мы можем помочь.

См. исходную проблему GitHub

Описание проблемы

Я пытаюсь воспроизвести результаты sass затемнить и осветлить функции, используя функцию цвета css, однако я не получаю аналогичных результатов:

 /* функция цвета */
цвет(#B6FFD4 чернота(30%)) /* #b3b3b3 */
/* дерзкое затемнение */
затемнить(#B6FFD4, 30%) /* #1dff7a */
 

По сути, мне нужен более сильный зеленый цвет, который я получаю, используя sass darken, но я не могу понять, как воспроизвести эти результаты. Спасибо!

Аналитика проблем

Ничего не найдено

Лучшие результаты из Интернета

sass:color

Увеличивает или уменьшает одно или несколько свойств $color на фиксированную величину. … Аргументы $saturation , $lightness , $whiteness и $blackness…

Подробнее >

Sass lighten() и darken() vs mix() с использованием черного и белого

В Sass есть функция цвета для осветлять и затемнять цвета, но они не всегда ведут себя так, как можно было бы ожидать. Использование mix() с черным…

Подробнее >

Использование lighten() и darken() в SASS — Falkus.co

Как следует из названий, при заданном цвете и процентном соотношении эти функции будут возвращать цвет соответственно светлее или темнее.

Управление цветом с помощью цветовых функций Sass — Thoughtbot

Darken & Lighten​​ Эти две функции регулируют яркость значений HSL цвета. Sass проанализирует нашу шестнадцатеричную переменную цвета в hsl, затем…

Подробнее >

Разработчики — чернота и светлота vs sass darken lighten —

чернота и светлота vs sass darken lighten. postcss. 15 июня 2016 г. Автор: perrin4869. Я пытаюсь воспроизвести результаты…

Читать далее >

Топ связанных сообщений в СМИ

Результатов не найдено

Топ связанных вопросов StackOverflow

Результатов не найдено

Устранение неполадок Live Code

Lightrun позволяет разработчикам добавляйте журналы, метрики и моментальные снимки в работающий код — перезапуск или повторное развертывание не требуются.

Начать бесплатно

Самая популярная тема Reddit

Ничего не найдено0010

Результатов не найдено

Топ связанных твитов

Результатов не найдено

Топ связанных Dev.to Post

Результатов не найдено

Топ связанных сообщений Hashnode

Результатов не найдено

Lighten and Darken function in SASS. | by Oyekunle Oyewusi

Каскадные таблицы стилей ( CSS ) определяют внешний вид веб-приложения. CSS — это язык таблицы стилей, используемый для описания представления документа, написанного на языке разметки, таком как HTML. CSS является краеугольным камнем технологии World Wide Web, наряду с HTML и JavaScript (Википедия). CSS считается одним из самых простых и одним из самых сложных языков для веб-разработчика. Усложняется осмысленная организация CSS для больших проектов. Бэкенд-разработчики путаются, когда дело доходит до вложенного синтаксиса CSS.

Синтаксис CSS

Хорошая новость заключается в том, что язык препроцессоров (Sass) делает CSS проще, читаемее и удобнее для разработчиков. В Sass есть много интересных функций, наиболее полезной из которых является объявление переменных, которые можно повторно использовать в любой части вашего кода. В последнее время большинство людей, работающих с Sass, определяли все переменные в отдельном файле (общая практика). Sass 3 имеет новый синтаксис с фигурными скобками, который более удобочитаем для разработчика (Sassy-CSS = SCSS). Вы используете Node.js, вы также можете установить Sass с помощью npm, запустив. Если у вас есть проект, вы хотите добавить SASS,

Шаг 1

откройте каталог проекта в интерфейсе командной строки и выполните следующую команду:

npm init

Приведенная выше команда потребует предоставить сведения о вашем проекте, а затем сгенерировать файл package. json в ваш проект. .

Шаг 2

вы можете установить sass с помощью приведенной ниже команды.

npm install node-sass --save-dev

Шаг 3

Перейдите к package.json в вашем редакторе, добавьте SASS Compile. Синтаксис: «compile-sass» : «node-sass node-sass style.scss style.css

Фрагмент кода ниже:

“scripts” : {

“compile-sass”: “node-sass style.scss

style.cs10s”

}

Или вы можете добавить к команде отслеживание: это будет автоматически искать изменения при каждом сохранении файла SCSS.

«скрипты»: {

«компиляция-sass»: «node-sass style.scss style.css -w»

}

Шаг 4

Вы можете преобразовать файл SCSS в обычный файл CSS с помощью CLI. В терминале запустите следующую команду:

npm run compile:sass

Начать работу с SASS несложно, подробнее об этом можно прочитать: Sass-guide.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *