Веб-новинки: 9 января 2015

О режимах наложения слоев и поддержке браузерами.

На "Демосфене" появился любопытный материал "Using CSS mix-blend-mode for Better Product Photos" ("Использование CSS-свойства mix-blend-mode для усовершенствования фотографий товаров").

Статья предваряется фотографией "Модный пинстрайп" (специально для невежественных мужчин: пинстрайп – это такая ткань в очень узкую полоску и соответственно костюм из этой ткани), кнопками можно переключать цветовые модели. Как это сделать с помощью css и svg, и описывается в статье.

Пользователи свежего Firefox'a могут любоваться эффектом без каких-либо затруднений (экспериментальная поддержка mix-blend-mode была была включена еще в 27-м Фоксе).

В Chrome, как всегда, надо пилить на страницу chrome://flags, там искать, чертыхаясь, "Включить экспериментальные функции веб-платформы", включить их, да еще и перезапустить Хромого. Без этого манипуляции кнопками будут выводить поверх фото svg-заливки соответствующих цветов.

А вот как выглядит картинка в Опере 12.16, я так и не узнал. Упала Опера. Вот за такие штуки я прозвал ее когда-то капризной красоткой. Увы, я уже не в том возрасте, когда волнуют девичьи капризы, пусть с ними разбирается кто помоложе.

Для подготовки графики автор использовал Photoshop и Illustrator, однако мне думается, что и Gimp (который тоже вполне себе работает с контурами) в связке с Inkscape с такой задачей справятся.

Что касается самогó свойства mix-blend-mode, то оно весьма оживленно обсуждалось в только что прошедшем году, в том числе и в рунете, так что найти материалы для знакомства с ним не составит труда. Вот лишь несколько, для затравки:

Режимы наложения слоёв в Web на Хабре
Режимы наложения CSS на devacademy.ru
Передовые возможности CSS, доступные уже сегодня на webformyself.com