<div class="wrapper">
<!-- <div class="color-bg"></div>-->
<div class="layers">
<div class="color-base">
<div class="image-base"></div>
</div>
<div class="image-mids"></div>
<div class="image-highlights"></div>
</div>
</div>
<div class="inputs">
<label for="baseColor">base:</label>
<input type="color" id="baseColor" name="baseColor" value="#7B1FA2">
<select id="baseBlendMode" name="baseBlendMode" value="screen">
<option value="normal">normal</option>
<option value="multiply">multiply</option>
<option value="screen">screen</option>
<option value="overlay">overlay</option>
<option value="darken">darken</option>
<option value="lighten">lighten</option>
<option value="color-dodge">color-dodge</option>
<option value="color-burn">color-burn</option>
<option value="hard-light">hard-light</option>
<option value="soft-light">soft-light</option>
<option value="difference">difference</option>
<option value="exclusion">exclusion</option>
<option value="hue">hue</option>
<option value="saturation">saturation</option>
<option selected value="color">color</option>
<option value="luminosity">luminosity</option>
</select>
<br/>
<label for="midsColor">mids:</label>
<input type="color" id="midsColor" name="midsColor" value="#EC407A">
<select id="midsBlendMode" name="midsBlendMode" value="screen">
<option value="normal">normal</option>
<option value="multiply">multiply</option>
<option selected value="screen">screen</option>
<option value="overlay">overlay</option>
<option value="darken">darken</option>
<option value="lighten">lighten</option>
<option value="color-dodge">color-dodge</option>
<option value="color-burn">color-burn</option>
<option value="hard-light">hard-light</option>
<option value="soft-light">soft-light</option>
<option value="difference">difference</option>
<option value="exclusion">exclusion</option>
<option value="hue">hue</option>
<option value="saturation">saturation</option>
<option value="color">color</option>
<option value="luminosity">luminosity</option>
</select>
<br/>
<label for="highlightsColor">highlights:</label>
<input type="color" id="highlightsColor" name="highlightsColor" value="#FFFB00">
<select id="highlightsBlendMode" name="highlightsBlendMode" value="screen">
<option value="normal">normal</option>
<option value="multiply">multiply</option>
<option value="screen">screen</option>
<option value="overlay">overlay</option>
<option value="darken">darken</option>
<option value="lighten">lighten</option>
<option selected value="color-dodge">color-dodge</option>
<option value="color-burn">color-burn</option>
<option value="hard-light">hard-light</option>
<option value="soft-light">soft-light</option>
<option value="difference">difference</option>
<option value="exclusion">exclusion</option>
<option value="hue">hue</option>
<option value="saturation">saturation</option>
<option value="color">color</option>
<option value="luminosity">luminosity</option>
</select>
<br/>
<label for="blurHighlights">blurry:</label>
<input type="checkbox" id="blurHighlights" name="blurHighlights" />
<br/>
<h3>original:</h3>
<img class="original" width="300" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/Riven.png" />
</div>$imageW: 666px;
$imageH: 717px;
$imageSrc: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/Riven.png');
$baseColor: #7B1FA2;
$midsColor: #EC407A;
$highlightsColor: #FFFB00;
$bgColor: #232323;
.wrapper {
float: left;
position: relative;
width: $imageW;
height: $imageH;
}
%size-and-position {
position: absolute;
left: 0;
top: 0;
width: $imageW;
height: $imageH;
}
.color-base {
z-index: 3;
@extend %size-and-position;
background: black;
}
.layers {
@extend %size-and-position;
background: $bgColor;
}
.color-base {
z-index: 2;
@extend %size-and-position;
background: $baseColor;
mix-blend-mode: color;
}
.image-base {
&:after {
content: " ";
z-index: 4;
@extend %size-and-position;
filter: brightness(0) invert(1);
background: $imageSrc;
}
z-index: 2;
@extend %size-and-position;
background: black;
mix-blend-mode: multiply;
}
.image-mids {
&:after {
content: " ";
z-index: 6;
@extend %size-and-position;
filter: brightness(0.94) grayscale(1) contrast(9001%);
background: $imageSrc, black;
mix-blend-mode: multiply;
}
&.blurry {
&:after {
filter: brightness(0.94) grayscale(1) contrast(9001%) blur(1px);
}
}
z-index: 5;
@extend %size-and-position;
background: $midsColor;
mix-blend-mode: screen;
}
.image-highlights {
&:after {
content: " ";
z-index: 8;
@extend %size-and-position;
filter: brightness(0.70) grayscale(1) contrast(9001%);
background: $imageSrc, black;
mix-blend-mode: multiply;
}
&.blurry {
&:after {
filter: brightness(0.70) grayscale(1) contrast(9001%) blur(1px);
}
}
z-index: 7;
@extend %size-and-position;
background: $highlightsColor;
mix-blend-mode: color-dodge;
}
//misc/UI
html, body {
min-height: 100%;
}
body {
position: relative;
background: radial-gradient(ellipse at top left, rgba(24,28,35,1) 12%,rgba(0,0,0,1) 90%);
color: white;
}
.inputs {
float: left;
padding: 50px;
font-size: 36px;
label {
display: inline-block;
min-width: 200px;
font-weight: 300;
line-height: 1.5;
}
input {
height: 30px;
}
select {
font-size: 20px;
height: 30px;
color: #000000;
}
.original {
border: 1px solid white;
}
}//color pickers
$('#baseColor').on('change', function(evt) {
$('.color-base').css('background', $('#baseColor').val());
});
$('#midsColor').on('change', function(evt) {
$('.image-mids').css('background', $('#midsColor').val());
});
$('#highlightsColor').on('change', function(evt) {
$('.image-highlights').css('background', $('#highlightsColor').val());
});
//blend modes
$('#baseBlendMode').on('change', function(evt) {
$('.color-base').css('mix-blend-mode', $('#baseBlendMode').val());
});
$('#midsBlendMode').on('change', function(evt) {
$('.image-mids').css('mix-blend-mode', $('#midsBlendMode').val());
});
$('#highlightsBlendMode').on('change', function(evt) {
$('.image-highlights').css('mix-blend-mode', $('#highlightsBlendMode').val());
});
//sharpen checkbox
$('#blurHighlights').on('change', function(evt) {
if ($('#blurHighlights').is(':checked')) {
$('.image-highlights,.image-mids').addClass('blurry');
} else {
$('.image-highlights,.image-mids').removeClass('blurry');
}
})
External CSS
This Pen doesn't use any external CSS resources.