hello and welcome to red stapler channel in this tutorial we are going to show
you a very useful technique on how to change the image color with pure CSS
in just a few minutes ready let's check it out here is the original image first
I will use quick selection tool to select the sofa
after you finish with the selection click select and mask to refine result
you can use brush tools to add or remove the selection this for take sometimes
when you're satisfied with the result click OK
now I'm going to change the sofa color to white first reduce the saturation to minimum
then increase the exposure and reduce gamma correction
looks good we will use this as a base image on our website next we'll create
an SVG image off the sofa right click the selection and click make work path
then go to layer menu a new fill layer and picked a red color
you will see a new shape layer has been created we will export it as SVG using
export as option in the file menu
select SVG as export type and click export all
also don't forget to save the base image as well
now we all have two images one is the base image for the white sofa and
another is the SVG to browse the SVG code you can open the file in any text
editor we will copy this into our HTML page later
create a new div
and set the background image
I'm going to set the background width to 100%
and height to auto to keep the aspect ratio and resizing
next we are going to place the SVG image over the base image here's the SVG code
I'm going to remove the unnecessary tags as we need the styles and paths only
I will also remove the width and height property this will automatically make
SVG scale to fit the parent if then I will copy it into our HTML
now the SVG is ready and also scale responsively too
next we will set the mix blend mode to multiply to blend the SVG color with the
base image
apparently my photoshop skill is not very good if you still see the white sofa
around the edge you can go back and refine a selection and recreate the SVG
again in Photoshop now I'm going to create a color picker using CSS only
first let's create radio buttons
I will also create a label for each of them
for each level we need to change the display to inline-block
or width and height property will not work
then set the border-radius to 50% to create a circle and also set the cursor
to pointer
next we need to remove the default radio buttons and show only the label also set
the default color of the SVG or the sofa appear as black
first set the default fill to read
then when each label was clicked, changed the fill to the label's color
then hide the default radio buttons
and finally add a small margin between the level and the image
and that's all for this video if you want to see more dev
tips and tutorials subscribe our channel for weekly update thanks for watching
see you next time bye