Our t-shirt is white, if we were changing a sofa material or the cladding on the side of house, the material and cladding needs to be white. Second, the part of the photo you’re changing needs to be white. My example is 1920x1280px and it’s a dimension we should take note of when we set this up. This part is important: you want to know the dimensions of your photo, and it should ideally be something customized to your website’s needs (a square photo at 1000x1000px for instance). Let’s Get Startedĭownload this photo if you’d like to follow along. You simply change the fill color of your path element, and use the CSS property mix-blend-mode: multiply to stain that color onto the image. It’s an SVG element with an image behind it, and a vector shape ( path element) drawn over the part(s) you want the color to change. So what’s happening here? What magic is this? With just a small to moderate amount of setup, you can take one photo of your product and let your web page dynamically change the color of a t-shirt, hat, sunglasses and pants to any color you throw at it, in fact, if you wanted to you can change all of these items independently on the same image, on the same web page, without it reloading. The reason for the preamble is to be clear about why the solution you’re about to learn is so valuable. You’ve seen this often happen online, and the solution is almost always a picture of one color, and little dots that represent the rest of the options.Īnd for good reason too, nobody wants to spend the time or money photographing someone wearing over 125 items, so like the masses before you, you get your friend to model one color of each and let your potential customer use their imagination to determine what the others look like based on a dotted color. Now all you need to do is upload some photos of your merchandise! Problem is, 25 colors per item? Thats 125 different options, how do you approach this? Your supplier for t-shirts, pants, hats and $2 sunglasses is exactly what you’ve been looking for, they supply 25 colors per item and you couldn’t be happier that your website has finally been signed off.
Imagine this for a second: You’ve finally done it, over the summer, you and a buddy are about to launch your screen printing start up out of your shared house, it’s not much, but you have a working setup and a few local bands and non-profits have already shown interest. You can see another example of this in the demo Color this sofa! where you can change the color of a sofa and its background gradient. Give it a go, change the shirt from yellow to blue by using the color picker in the bottom right corner:ĭynamic Colour Picking – Part 4 by Kyle Wetton ( CodePen. I’ve written about generating shades of color using CSS variables, which details how you can create dynamic colors using custom properties and the alpha channel of a supporting color function.To better explain that title right off the bat, here’s what we’re about to learn, and it’s easier than you think. I was reading Dave’s post “Alpha Painlet” when I first learned about CSS relative colors.ĬSS relative colors enable the dynamic color manipulation I’ve always wanted in vanilla CSS since Sass’ color functions first came on the scene ( darken(), lighten(), etc.).Īllow me to explain a bit more about why I’m so excited.
0 kommentar(er)
