Как создать цветовой фон

Оцените материал
(0 голосов)

Проблема

Добавление цветового тона к изображению в оттенках серого (или к изображению, преобразованному в оттенки серого) — популярный и элегантный способ придания визуального единообразия группе фотографий, выполненных в совершенно непохожих стилях. Часто этот эффект применяется статически и убирается по событию  :hover и/или при других вариантах взаимодействия с изображением. Традиционно мы создаем две версии изображения в графическом редакторе и добавляем немного простого CSS-кода, задача которого — подменять одну версию другой. Этот подход работает, но он раздувает исходный код и требует дополнительных HTTP-запросов, а сопровождать такой веб-сайт — это настоящая головная боль. Представьте, что было принято решение изменить цвет, использующийся для создания этого эффекта. Вам придется перебрать все изображения и создать для каждого новую монохромную версию! Другие подходы включают наложение полупрозрачного цвета поверх изображения или изменение степени непрозрачности изображения и наложение его на подложку сплошного цвета. Однако это не настоящий тон: в таком решении не только цвета изображения не преобразуются в оттенки целевого цвета, но и существенно снижается контрастность.

Этот эффект используется для оформления фотографий лекторов. Полноцветное изображение оказывается при наведении указателя мыши и переводе фокуса на выбранный элемент
Также существуют сценарии, превращающие изображения в элемент  <canvas> и применяющие тон средствами JavaScript. При этом действительно получается реальное тонированное изображение, но решение работает очень медленно и накладывает множество ограничений. Согласитесь, было бы намного проще и удобнее применять цветовые тона к изображениям прямо в коде CSS?

 

Решение на основе фильтров

Так как не существует единой функции фильтрации, разработанной специально для данного эффекта, нам придется проявить фантазию и скомбинировать несколько фильтров (о фильтрах можно почитать здесь). Первым мы применим фильтр  sepia() , придающий изображению ненасыщенный оранжевожелтый оттенок, при котором тон большинства пикселов находится на уровне 35–40. Если нам требовался именно этот цвет, то работа завершена.

Но в большинстве случаев мы ставим себе целью добиться несколько иного результата. Если желаемый цвет насыщеннее, то увеличить насыщенность каждого пиксела можно с помощью фильтра saturate() . Предположим, что мы хотим придать изображению тон  hsl(335 ,  100% ,  50%) . Насыщенность нужно повысить совсем немного, поэтому мы используем параметр  4. Точное значение зависит от каждого конкретного случая, поэтому ориентируйтесь на визуальный результат. Как демонстрирует этот комбинированный фильтр придает нашему изображению теплый золотой тон.


Как бы мило ни выглядело наше изображение, мы не планировали делать его ярким оранжево-желтым. Нам требуется глубокий ярко-розовый. Следовательно, необходимо также применить фильтр  hue-rotate() для смещения тона каждого пиксела на указанный угол в градусах. Чтобы создать тон 335 из тона, приблизительно равного 40, необходимо добавить примерно 295 (335 – 40):
filter: sepia() saturate(4) hue-rotate(295deg);
Итак, мы придали тон нашему изображению, и готовый результат вы можете увидеть на рисунке. Если этот эффект должен переключаться по наведению указателя мыши ( :hover ) или в зависимости от других состояний, то к нему можно также применить переходы CSS:


img {
transition: .5s filter;
filter: sepia() saturate(4) hue-
rotate(295deg);
}
img:hover,
img:focus {
filter: none;
}
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/color-tint-filter

Решение на основе режимов смешивания

Решение с фильтрами работает, но вы, вероятно, заметили, что результат немного отличается от того, который мы бы получили в графическом редакторе. Хотя мы пытаемся для создания тона использовать очень яркий цвет, результат все равно выглядит немного полинявшим. Если мы попытаемся увеличить значение параметра фильтра  saturate() , то получим другой, чрезмерно стилизованный эффект. К счастью, существует гораздо лучший подход: режимы смешивания! Если вам когда-либо доводилось использовать графические редакторы, например Adobe Photoshop, то, вероятно, вы уже знакомы с режимами смешивания. Когда два элемента накладываются друг на друга, режимы смешивания управляют тем, как цвета верхнего элемента смешиваются с цветами всего, что находится под ним. Что касается придания цветового тона изображениям, для этого используется режим смешивания  luminosity . Режим смешивания luminosity сохраняет HSL-светлоту верхнего элемента, в то же время учитывая тон и насыщенность его подложки. Если подложкой служит наш цвет, а элемент с этим режимом смешивания применяется к нашему изображению, то не означает ли это, что мы нашли ключ к созданию требуемого цветового тона? Для применения режима смешивания к элементу служат два свойства:  mix-blend-mode применяет режимы смешивания к элементам целиком, а  background-blend-mode применяет режимы смешивания к каждому фоновому слою в отдельности. Из этого следует, что использовать данный метод на изображении можно двумя способами, каждый из которых, к сожалению, не идеален: ‰ обернуть наше изображение в контейнер с желаемым фоновым цветом; ‰ использовать  <div> вместо изображения, выбрав изображение, которому придается тон, в свойстве  background-image и добавив внизу второй фоновый слой с желаемым цветом.
В зависимости от конкретного варианта использования можно прибегнуть к любому из этих подходов. Например, если нам нужно применить эффект к элементу  <img> , то его необходимо обернуть другим элементом. Однако если у нас уже есть другой элемент, такой как  <a> , то можно использовать его:

HTML
<a href="#something">
<img src="/tiger.jpg" alt="Rawrrr!" />
</a>
И тогда для применения эффекта понадобятся только два объявления:
a {
background: hsl(335, 100%, 50%);
}
img {
mix-blend-mode: luminosity;
}
Так же как и фильтры CSS, режимы смешивания обеспечивают изящные обходные пути: если они не поддерживаются, то никакие эффекты не применяются и изображение выводится в исходном виде. Важно помнить, что в то время как фильтры поддерживают анимацию, режимы смешивания анимировать невозможно. Мы уже знаем, как создать анимационный эффект плавного перевода изображения в монохромный режим с помощью простого перехода CSS на свойстве  filter . Реализовать это для режимов смешивания не получится. Но не беспокойтесь, это не означает, что вопрос анимации полностью отпадает. Просто нам придется применить нестандартное решение. Как уже говорилось выше,  mix-blend-mode смешивает элемент целиком со всем тем, что находится под ним. Следовательно, если мы применим режим смешивания  luminosity посредством этого свойства, то изображение всегда будет смешиваться с чем-то. В то же время  background-blend-mode смешивает каждый слой фонового изображения со слоями, находящимися ниже, и совершенно не в курсе происходящего за пределами элемента. Что произойдет, если мы создадим только одно фоновое изображение и прозрачный ( transparent ) фоновый цвет? Правильно: никакого смешивания не будет! Воспользуемся этим наблюдением и применим свойство  background-blend-mode с нашим эффектом. HTML-код немного изменится:
HTML
<div class="tinted-image"
style="background-image: url(/tiger.jpg)">
</div>
Теперь осталось лишь применить стилизацию CSS к этому единственному  <div>, ведь данная техника не требует дополнительных элементов:
.tinted-image {
width: 640px; height: 440px;
background-size: cover;
background-color: hsl(335, 100%, 50%);
background-blend-mode: luminosity;
transition: .5s background-color;
}
.tinted-image:hover {
background-color: transparent;
}
Однако, как упоминалось выше, ни одна из двух техник не идеальна. Главные проблемы, возникающие при использовании данного подхода: ‰ габаритные размеры изображения необходимо жестко фиксировать в CSS-коде; ‰ семантически это не изображение, и программы чтения экрана не будут распознавать в нем изображение. Как часто бывает в жизни, для этой задачи не существует безупречного решения, но в данном разделе мы изучили три разных пути создания желаемого эффекта, каждый со своими преимуществами и  недостатками. Какой вы выберете — зависит от конкретных требований вашего проекта.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/color-tint

Десерт на сегодня – как вам такой тюнинг мотоцикла?

Прочитано 398 раз Последнее изменение Суббота, 18 марта 2017 14:49
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+