Как сделать картинку темнее css

Как сделать темную тему с помощью CSS

Evgeny Vladimirovich

На днях я баловался с темной версией в новой версии MacOS Mojave. Мои глаза не на 100% рады, но это особенно полезно, когда залипаешь в экран ночью при тусклом освещении.

Сегодня, темная тема в тренде. Большинство reader-приложений уже снабжены им (Medium App, Twitter …). Темная тема — это не просто инверсия всех цветов, это целое направление в современном дизайне.

Ещё не везде стемнело (пока)

Когда работаешь в ночной теме, вспышки света, при открытии документа с белым фоном, немного шокируют. В этом посте мы разберёмся, как применять темную тему в Интернете и пропишем для этого CSS.

Разберёмся с пользовательскими настройками ночного режима.

Было бы пр и ятно, если бы, документы и сайты соответствовали текущей теме, не так ли?

Автоматическое преобразование цвета?

Safari и Firefox уже имеют «режим чтения» с поддержкой светлого текста на тёмном фоне. В этом случае, контент в теге <article>, отображается с использованием специальных стилей, которые улучшают читаемость и удаляют лишнее. А также, есть настройка для инвертирования цветов. Более того, браузеры, могут автоматически инвертировать сайты, с помощью смарт-стилей. Звучит жутковато! Впрочем, Apple Mail уже так делает. Он даже инвертирует цвета для HTML писем.

«Умное-инвертирование» цвета может стать отличным решением, а может и нет. Что ещё?

Медиа запросы в помощь.

Я не один. В настоящее время (Август 2018) ведутся дискуссии по поводу ночной темы в «CSS Working Group Editor Drafts». Идея в том, чтобы использовать для этого медиа-запросы. Кое-что уже реализовано в Safari (обсуждение), и ещё здесь.

Так что, в теории, можно сделать так:

Давайте подождём, пока все браузеры будут готовы к этому. Я думаю, что есть возможность прийти к определенной стандартизации. Производителям ОС также нужно будет прийти к определенным соглашениям.

Инверсия, это ещё не темная тема.

А вы знали, что, уже есть фича в медиа-запросах для «inverted-colors», в Media Queries Level 4. Это, и темная тема― не одно и тоже. Что-то вроде темной темы существовало и ранее. Например, в Windows уже есть режим High Contrast. Есть и другие примеры.

И всё же, было бы действительно круто, если авторы сайтов смогут сами решать, что делать, когда пользователь включил темную тему в браузере. Так что, у дизайнера будет полный контроль, над внешним видом сайта с «выключенным светом». Думаете, тут много роботы? Нет, это просто. Читайте дальше.

Инкогнито — это не темная тема

Когда открываешь окно в режиме Инкогнито, для приватного просмотра, многие браузеры предоставляют тёмную версию, чтобы подчеркнуть разницу. Но, это все равно не темная тема.

Используем CSS переменные для создания темной темы

Благодаря «CSS custom properties» (также известные как «CSS Vars») теперь, мы можем проще, чем когда-либо, создавать темы, используя CSS. Самый простой способ инвертировать тему:

Немного рекламы: мой новый (крутой) CSS фреймворк ― Teutonic CSS, уже умеет делать подобную инверсию:

Веб-сайты меняют браузер chrome.

Эта статья о том, как настройки пользователя могут изменить внешний вид сайта. Однако, это работает и в обратную сторону: веб-сайт может изменить внешний вид браузера. Существуют проприетарные мета-теги, доступные до сих пор только для мобильных браузеров:

Заключение

В стандартах хорошо то, что у вас всегда есть выбор.

В то время как «ночной режим», безусловно, тренд — существует целое множество его вариаций. Не молчите, говорите об этом, чтобы в итоге был создан единый веб-стандарт. Продвигайте свой CSS, чтобы поддержать эту идею и избежать хаоса в будущем.

Динамически изменить цвет на светлый или темный в процентах CSS (Javascript)

У нас есть большое приложение на сайте, и у нас есть несколько ссылок, которые, скажем, синего цвета, как синие ссылки на этом сайте. Теперь я хочу сделать несколько других ссылок, но с более светлым цветом. Очевидно, что я могу просто сделать это путем добавления шестнадцатеричного кода в файл CSS, но наш сайт позволяет пользователю решать, какие цвета они хотят для своего индивидуального профиля / сайта (например, Twitter).

Итак, мой вопрос: можем ли мы уменьшить цвет в процентах?

Допустим, следующий код CSS:

Есть ли способ уменьшить цвет на процент?

Если вы используете стек, который позволяет использовать SASS , вы можете использовать lighten функцию:

Вы можете сделать это с помощью CSS-фильтров во всех современных браузерах (см. Таблицу совместимости caniuse ).

Вот еще чтение CSS Tricks о различных фильтрах, которые вы можете использовать: https://css-tricks.com/almanac/properties/f/filter/

Есть "непрозрачность", которая заставит фон просвечивать:

но я не уверен, что это то, что вы имеете в виду. Определите «уменьшить цвет»: сделать прозрачным? Или добавить белый?

Цвета HSL дают ответ, значение цвета HSL задается с помощью: hsl (оттенок [0,255],% насыщенности,% яркости).

HSL поддерживается в IE9 +, Firefox, Chrome, Safari и в Opera 10+

На момент написания статьи, я нашел лучшую реализацию CSS для манипулирования цветом:

Используйте переменные CSS, чтобы определить ваши цвета в HSL вместо формата HEX / RGB, затем используйте calc() для управления ими.

Вот основной пример:

Я также создал структуру CSS (все еще на ранней стадии), чтобы обеспечить базовую поддержку переменных CSS, называемых корневыми переменными .

В LESS вы бы использовали следующие переменные:

Это возьмет 1-ую переменную и уменьшит ее на 20% (или любой другой процент). В этом примере вы бы получили более светлый цвет: #ccc

Если вы хотите более темный цвет, вы можете использовать rgba черный с низкой непрозрачностью:

Для зажигалки используйте белый цвет:

Насколько я знаю, вы не можете сделать это в CSS.

Но я думаю, что небольшая логика на стороне сервера может легко сделать, как вы предлагаете. Таблицы стилей CSS обычно являются статическими ресурсами, но нет причин, по которым они не могли бы динамически генерироваться серверным кодом. Ваш серверный скрипт будет:

  1. Проверьте параметр URL, чтобы определить пользователя и, следовательно, выбранный пользователем цвет. Используйте параметр URL, а не переменную сеанса, чтобы вы все еще могли кэшировать CSS.
  2. Разбейте цвет на его красные, зеленые и синие компоненты
  3. Увеличьте каждый из трех компонентов на установленную величину. Поэкспериментируйте с этим, чтобы получить желаемые результаты.
  4. Генерация CSS с использованием нового цвета

Ссылки на эту CSS-генерирующую страницу будут выглядеть примерно так:

Если вы не используете расширение .css, убедитесь, что вы правильно установили MIME-тип, чтобы браузер мог интерпретировать файл как CSS.

(Обратите внимание, что для того, чтобы сделать цвета светлее, необходимо повысить каждое из значений RGB)

если вы решите использовать http://compass-style.org/ , основанную на sass фреймворк css, он предоставляет очень полезные darken() и lighten() sass функции для динамического генерирования css. это очень чисто

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

Идея основана на использовании:

  • Цвета RGB, поэтому у вас есть отдельные значения для красного, зеленого и синего;
  • Переменные CSS, для хранения значений цвета и темноты; и
  • calc Функция, чтобы применить изменения.

По умолчанию темнота будет 1 (для 100%, обычный цвет), и если вы умножите число от 0 до 1, вы сделаете цвет темнее. Например, если вы умножите на 0,85 каждое из значений, вы сделаете цвета на 15% темнее (100% — 15% = 85% = 0,85).

Вот пример, я создал три класса: .dark , .darker и .darkest что будет делать первоначальный цвет 25%, 50% и 75% соответственно темнее:

Используйте filter чистое свойство CSS. для полного описания filter функций свойства прочитайте эту удивительную статью .

У меня была такая же проблема, как у вас, и я исправил ее, используя brightness функцию filter свойства:

Вы можете использовать небольшой JavaScript для вычисления более темного и светлого цвета с помощью rgb ().

Скрипка : Не очень хорошо, но это только для иллюстрации.

По сути, он устанавливает цвет и выбирает 20 цветов с одинаковым количеством (по сравнению друг с другом) rgb только с 10-ю.

Если вам нужно всего лишь изменить background цвет, это отличный подход, который ориентирован на будущее — Используйте linear-gradient метод на background изображении!

Проверьте пример ниже:

Не напрямую, нет. Но вы можете использовать сайт, такой как colorschemedesigner.com , который даст вам ваш основной цвет, а затем даст вам шестнадцатеричные и rgb коды для различных диапазонов вашего основного цвета.

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

Некоторые другие генераторы цветовой схемы включают в себя:

Вы можете использовать RGBa («a» — альфа-прозрачность), но пока он не поддерживается широко. Это будет , однако, так что вы можете использовать его сейчас и добавить запасной вариант:

Я добавляю ответ, используя сырые CSS3 и SVG, не требуя LESS или SASS.

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

По какой-то неизвестной мне причине SVG не позволяет мне вводить шестнадцатеричное значение в атрибут «fill», но «white» и «black» удовлетворяют мою потребность.

Пища для размышления: если вы не возражаете против использования изображений, просто используйте 50% прозрачный PNG в качестве фонового изображения. Если вы хотите проявить фантазию, назовите PHP-скрипт в качестве фонового изображения и передайте ему значения HEX и OPACITY, и пусть он выплевывает код SVG выше.

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

Пример (цвет: # a9dbb4):

введите описание изображения здесь

Один устаревший простой ответ (в 2013 году) заключался в использовании 50% прозрачного белого PNG поверх цвета:

Где lighten.png — это PNG белого цвета с прозрачностью 50%.

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

Собрав все воедино, табличное решение, выполненное исключительно с помощью DIV и CSS, попробуйте;) Хотя браузер должен поддерживать цвета RGBA .

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

Смотрите мой комментарий на ответ Ctford.

Я думаю, что простой способ осветить цвет — это взять каждый из компонентов RGB, добавить к 0xff и разделить на 2. Если это не дает желаемых результатов, возьмите 0xff минус текущее значение, умноженное на некоторую константу и затем добавьте обратно к текущему значению. Например, если вы хотите сместить 1/3 пути к белому, возьмите (0xff — current) / 3 + current.

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

Тем не менее, я думаю, что преодоление доли расстояния до белого является более перспективным, чем фиксированное количество шагов.

Я нашел класс PHP, который позволил мне сделать это на стороне сервера. Я просто вывожу встроенный цветовой стиль CSS для всего, что мне нужно, чтобы он был светлее / темнее. Прекрасно работает.

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

Я превратил его в статический класс со статическими методами, чтобы я мог вызывать функции «светлее» и «темнее» напрямую, не создавая новый объект.

Пример использования:

Вы можете использовать библиотеку JavaScript, такую ​​как JXtension, которая дает пользователю возможность сделать цвет светлее или темнее. Если вы хотите найти документацию для этой новой библиотеки, нажмите здесь . Вы также можете использовать JXtension, чтобы объединить один цвет с другим.

Динамическое изменение цвета на более светлый или темный в процентах CSS (Javascript)

У нас есть большое приложение на сайте, и у нас есть несколько ссылок, которые, скажем, синий цвет, как синие ссылки на этом сайте. Теперь я хочу сделать некоторые другие ссылки, но с более светлым цветом. Очевидно, что я могу просто добавить шестнадцатеричный код в файл CSS, но наш сайт позволяет пользователю решить, какие цвета они хотят для своего настроенного профиля/сайта (например, Twitter).

Итак, мой вопрос: Можем ли мы уменьшить цвет на процент?

допустим следующий код CSS:

есть ли способ уменьшить цвет на процент?

21 ответов:

Если вы используете стек, который позволяет использовать Сасс можно использовать lighten функция:

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

вот некоторые чтения о различных фильтрах, которые вы можете использовать:http://code.tutsplus.com/tutorials/say-hello-to-webkit-filters—net-23318

обновление

Это, кажется, становится все больше и больше голосов в качестве фильтров сделайте свой путь в мейнстрим. Вот текущая совместимость:http://caniuse.com/#feat=css-filters

есть "непрозрачность" фон будет просвечивать:

но я не уверен, что это то, что вы имеете в виду. Определите "уменьшить цвет": сделать прозрачным? Или добавить белый?

цвета HSL обеспечивают ответ, значение цвета HSL задается с помощью: hsl (hue [0,255], saturation %, lightness %).

HSL поддерживается в IE9+, Firefox, Chrome, Safari и Opera 10+

в LESS, вы бы использовали следующие переменные:

это займет 1-ю переменную и облегчит ее на 20% (или любой другой процент). В этом примере вы закончите тем, что ваш более светлый цвет будет: #ccc

Если вы хотите более темный цвет, вы можете использовать rgba черного цвета с низкой непрозрачностью:

для более светлого белизны пользы:

  1. Проверьте параметр URL, чтобы определить пользователя и, следовательно, выбранный пользователем цвет. Используйте параметр URL, а не переменную сеанса, чтобы вы могли все еще кэшируйте CSS.
  2. разбить цвета на красный, зеленый и синий компоненты
  3. увеличьте каждый из трех компонентов на заданную величину. Поэкспериментируйте с этим, чтобы получить результаты, которые вы ищете.
  4. создать CSS, включающий новый цвет

если вы решите использовать http://compass-style.org/, основанная на sass структура css, она обеспечивает очень полезный darken() и lighten() функции sass для динамического создания css. это очень чисто:

создает

вы можете использовать немного javascript для вычисления более темного и светлого цвета с помощью rgb().

Скрипка : не очень приятно, но это просто для иллюстрации.

что он по существу делает, это устанавливает цвет и выбирает 20 цветов с одинаковым количеством (по сравнению друг с другом) rgb только с 10 друг от друга.

один простой ответ заключается в использовании 50% прозрачного белого PNG над цветом:

где светлее.png-это PNG белой заливки с прозрачностью 50%.

вы можете использовать RGBa (‘a’ — Альфа-прозрачность), но он еще не получил широкой поддержки. Это будет быть, хотя, так что вы можете использовать его сейчас и добавить запасной вариант:

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

ручки:

см. мой комментарий к ответу Ctford.

Я думаю, что простой способ осветлить цвет — это взять каждый из компонентов RGB, добавить к 0xff и разделить на 2. Если это не дает точных результатов, которые вы хотите, возьмите 0xff минус текущее значение, умноженное на некоторую константу, а затем добавьте обратно к текущему значению. Например, если вы хотите сдвинуть 1/3 пути к белому, возьмите (0xff — current)/3+current.

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

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

вы можете использовать библиотеку JavaScript, такую как JXtension, которая дает пользователю возможность сделать цвет светлее или темнее. Если вы хотите найти документацию для этой новой библиотеки,нажмите здесь. Вы также можете использовать JXtension для объединения одного цвета с другим.

похоже на jPaq (http://jpaq.org/) является заменой для JXtension. Преимущество использования jPaq заключается в том, что вы можете скачать только то, что вам нужно, а не полную библиотеку JavaScript. Вот ссылка на страницу загрузки только для класса цвета:http://jpaq.org/download/1.0.0.1008.

Я нашел PHP класс, который позволяет мне сделать это на стороне сервера. Я просто вывожу встроенный стиль цвета CSS для того, что мне нужно, чтобы быть светлее/темнее. Отлично работает.

http://www.barelyfitz.com/projects/csscolor/

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

Я превратил его в статический класс со статическими методами, так что я можно вызвать функции" lighten "и" darken " напрямую без создания нового объекта.

пример использования:

Я написал плагин для jquery, который имел эту же проблему. Я беру цвет как свойство или заданный цвет свойства css, которое они хотят, и запускаю его через некоторые вычисления. Hex в RGB, затем умножьте процент смещения, а затем верните новое значение. Дайте мне знать, если вы хотите пример.

собирая все это вместе, табличное решение, выполненное исключительно с помощью DIV и CSS, попробуйте;) браузер должен поддерживать цвета RGBA.

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

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