Определение цветовой палитры

demosourse

Сегодня мы бы хотели поделиться с вами интересным скриптом, который подбирает цветовую палитру в зависимости от фотографии. Мы используем Vibrant.js от Jari Zwarts для извлечения основных цветов, и CSS фильтры для преобразования изображения. Так же в рамках примера используется слайдер с специальным эффектом.

Заметка: в примере используются некоторые CSS свойства, которые поддерживаются не всеми версиями браузерами (CSS анимация, CSS фильтры).

Как известно, IE 10+ не поддерживает CSS фильтры (если не говорить о Edge). Именно поэтому мы добавили специальный фолбэк с использованием SVG фильтров.

Фоновое изображение тоже будет преобразовано, а в специальных областях отобразятся hex-значения цвета.

Надеемся, что данный пример вдохновил вас!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2015/06/04/color-extraction-effect/
Перевел: Станислав Протасевич
Урок создан: 15 Июня 2015
Просмотров: 8030
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^