A Color Picker for Product Images
Publikováno: 17.9.2019
Sounds kind of like a hard problem doesn't it? We often don't have product shots in thousands of colors, such that we can flip out the <img src="product-red.jpg" alt="red product"> with <img src="product-blue.jpg" alt="blue product">. Nor do we typically have products in a vector format such that we can apply SVG fills to them and such.
There is a clever way to do it though, even when your product shots are bitmap graphic files, like JPG or PNG. … Read article
The post A Color Picker for Product Images appeared first on CSS-Tricks.
Sounds kind of like a hard problem doesn't it? We often don't have product shots in thousands of colors, such that we can flip out the <img src="product-red.jpg" alt="red product"> with <img src="product-blue.jpg" alt="blue product">. Nor do we typically have products in a vector format such that we can apply SVG fills to them and such.
There is a clever way to do it though, even when your product shots are bitmap graphic files, like JPG or PNG. Kyle Wetton demonstrates, and it's essentially:
- Make a vector path that covers the area on the JPG that should change color (probably in Photoshop with the Pen Tool and exporting the vector).
- Place that solid vector area exactly on top of the product JPG.
mix-blend-mode: multiply;the SVG.- Change the fill color on the SVG as desired.
Here's the super cool demo I think it originated from:
See the Pen
Color this sofa! – SVG + Blend Mode trick by Kyle Wetton (@kylewetton)
on CodePen.
And the demo from the article:
See the Pen
Dynamic Colour Picking - Part 3
on CodePen.
The post A Color Picker for Product Images appeared first on CSS-Tricks.