adsPlace_1

Войти или Зарегистрироваться

adsPlace_3

Изменяем цвет на фото при помощи 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;
}

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

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

Последние из рубрики

Комментарии(0)

  • Комментариев еще нет. Будь первым!

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению