067 607 57 84
МЕНЮ

Змінюємо колір на фото в чистому 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 є те, що не можна брати чорний і білий колір. Ви можете змінити фільтр на будь-який інший і вибрати варіант, який вам підійде найбільше.