Removes chrome from color input swatch and overlays over an image, using blend modes to colorize. Voila! Color changing without JS.
Chrome and Firefox only right now.
<!-- CLICK TO CHANGE COLOR --> | |
<input type="color" value="#0000ff"> | |
<!-- Image Credit --> | |
<a href="https://www.flickr.com/photos/betabit/9284591662/" target="_blank">Photo by Jackson Faddis</a> |
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{ | |
/* removes default styling from input color element */ | |
padding: 0; | |
border: none; | |
/* makes input (color swatch) 100% size of container */ | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
/* mix blend mode makes the color of the swatch alter the image behind it. */ | |
mix-blend-mode: hue; | |
cursor: pointer; | |
} | |
/* removes default styling from input color element */ | |
::-webkit-color-swatch { | |
border: none; | |
} | |
::-webkit-color-swatch-wrapper { | |
padding: 0; | |
} | |
::-moz-color-swatch, | |
::-moz-focus-inner { | |
border: none; | |
} | |
::-moz-focus-inner { | |
padding: 0; | |
} | |
/* Image Credit */ | |
a { | |
position: absolute; | |
bottom: 10px; | |
right: 10px; | |
color: skyblue; | |
background: black; | |
display: block; | |
padding: 3px 8px; | |
font-size: 18px; | |
text-decoration: none; | |
} |