Изменяем цвет на фото на чистом CSS при помощи input type color

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

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

Например нам необходимо на сайте сделать выбор цвета автомобиля. Мы будем использовать blend-mode на CSS.

Возьмем такой код HTML:

<input type="color" value="#0000ff">

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

body {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/9284591662_38b0438418_h.jpg) 25%/cover;  
    height: 100vh;
    margin: 0;
}

input { 
    padding: 0;
    border: none; 
    position: absolute;
    width: 100%; 
    height: 100%;
    mix-blend-mode: hue; 
    cursor: pointer;
}


::-webkit-color-swatch {
    border: none;
}

::-webkit-color-swatch-wrapper {
    padding: 0;
}

::-moz-color-swatch,
::-moz-focus-inner {
    border: none;
}

::-moz-focus-inner {
    padding: 0;
}

Живой пример (для изменения цвета достаточно кликнуть на машину):

Трудно представить себе современный сайт http://astronavt.com/site-vizitka/, который не использует современные технологии. Единственным минусом blend-mode является то, что нельзя брать черный и белый цвет. Вы можете изменить фильтр на любой другой и выбрать вариант, который вам подойдет больше всего.