- let url = 'https://assets.codepen.io/2017/blend_me_kreator_painless.jpg';
- let val = 100;

body(style=`--inv: ${val}; --img: url(${url})`)
	form
		label(for='inv') inversion progress
		input#inv(type='range' value=val)
		output.token--perc(for='inv')
	section
		pre.common
			span.token--decl
				span.token--prop background
				span.token--punc :
				|  
				span.token--val
					span.token--func url
					span.token--punc (
					span.token--arg: span.token--str painless.jpg
					span.token--punc )
					|  
					span.token--perc 50
					span.token--sep /
					|  
					span.token--keyw cover
					|  
					span.token--func hsl
					span.token--punc (
					span.token--args
						span.token--arg: span.token--num 0
						|  
						span.token--arg: span.token--perc 0
						| 
						span.token--arg: span.token--perc 100
						|  
						span.token--sep /
						| 
						span.token--arg: output.token--perc(for='inv')
					span.token--punc )
		article
			pre
				span.token--decl
					span.token--prop filter
					span.token--punc :
					|  
					span.token--val
						span.token--func invert
						span.token--punc (
						span.token--arg: output.token--perc(for='inv')
						span.token--punc )
			.card
		article
			pre
				span.token--decl
					span.token--prop background-blend-mode
					span.token--punc :
					|  
					span.token--val.token--keyw exclusion
			.card
View Compiled
$c: #00908a #41024f #f60c61 #ff6a00 #ffb231;
$t: .3s;

$track-h: .25em;
$track-r: .5*$track-h;

$thumb-d: 1em;
$thumb-r: .5*$thumb-d;

$arrow-a: 70deg;
$arrow-b: .25em;
$arrow-r: .25em;

$card-f: 1.8;

@mixin track() {
	border: none;
	width: 100%; height: $track-h;
	border-radius: $track-r;
	background: 
		radial-gradient(circle at var(--pos), 
			transparent calc(#{$thumb-r} - 2px), 
			#ccc calc(#{$thumb-r} - 1px))
}

@mixin thumb($f: 0) {
	margin-top: $f*($track-r - $thumb-r);
	border: none;
	width: $thumb-d; height: $thumb-d;
	border-radius: 50%;
	transform: scale(calc(.5*(1 + var(--focus))));
	background: currentcolor;
	transition: transform $t
}

* {
	margin: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	font: inherit
}

body {
	--i: var(--narr, 1);
	--not-i: calc(1 - var(--i));
	--j: var(--wide, 1);
	--not-j: calc(1 - var(--j));
	--prc: calc(var(--inv)*1%);
	--dec: calc(var(--inv)/100);
	--c: #{nth($c, 5)};
	overflow-x: hidden;
	background: #ddd;
	font: 1.25em/ 1.25 raleway, trebuchet ms, verdana, arial, sans-serif;
	
	@media (max-width: 670px) { --wide: 0 }
	@media (min-width: 490px) { --narr: 0 }
	@media (max-width: 350px), (max-height: 520px) { font-size: 1em }
}

form, pre {
	background: #100e17;
	color: #efefef
}

pre, output { font: 1em/ 1.25 ubuntu mono, consolas, monaco, monospace }

form {
	--focus: 0;
	--not-focus: calc(1 - var(--focus));
	--input-w: clamp(200px, 90vw, 20em);
	--pos: calc(#{$thumb-r} + var(--dec)*(var(--input-w) - #{$thumb-d}));
	display: grid;
	grid-gap: 3px .375em;
	place-content: center;
	padding: .25em;
	filter: grayScale(var(--not-focus));
	transition: filter $t;
	
	html:not(.js) { display: none }
	
	&:focus-within { --focus: 1 }
}

label {
	place-self: var(--wide, center end);
	
	&::after { content: ':' }
}

input[type='range'] {
	&, &::-webkit-slider-thumb, 
	&::-webkit-slider-runnable-track { -webkit-appearance: none }
	
	grid-area: 
		calc(1 + var(--not-j))/ 
		calc(1 + var(--j));
	place-self: center start;
	width: var(--input-w); height: $thumb-d;
	color: var(--c);
	cursor: pointer;
	
	&::-webkit-slider-runnable-track { @include track() }
	
	&::-moz-range-track { @include track() }
	
	&::-webkit-slider-thumb { @include thumb(1) }
	
	&::-moz-range-thumb { @include thumb() }
	
	&:focus { outline: solid 0 transparent }
}

output {
	display: grid;
	grid-auto-flow: column;
	place-content: center;
	padding: 0 $arrow-r;
	width: 4ch;
	border-radius: $arrow-r;
	background: var(--c);
	counter-reset: num var(--inv);
	
	form & {
		grid-area: 
			calc(1 + var(--not-j) + var(--i))/ 
			calc(2 + var(--j) - var(--i));
		place-self: start;
		transform: translate(calc(var(--i)*(var(--pos) - 50%)));
		
		@supports (background: conic-gradient(red, tan)) {
			--xy: calc(var(--i)*50%) calc(var(--not-i)*50%);
			margin: calc(var(--not-i)*#{-$arrow-b}) 0;
			border: solid $arrow-b transparent;
			border-radius: $arrow-b + $arrow-r;
			--mask: 
				linear-gradient(red, red) padding-box, 
				conic-gradient(from calc(90deg - .5*#{$arrow-a} + var(--i)*90deg) at var(--xy), 
						red #{$arrow-a}, transparent 0%) 
					var(--xy)/ 50% 50% no-repeat border-box;
			-webkit-mask: var(--mask);
							mask: var(--mask)
		}
	}
	
	&.token--perc { color: #222 }

	&::before { content: counter(num) }
}

section {
	--card-w: Max(200px, Min(calc(100vw - 1.5rem), 25em, calc(80vh/#{$card-f})));
	display: grid;
	grid-gap: .75em .25em;
	grid-template-columns: repeat(auto-fit, var(--card-w));
	place-content: center;
	margin: 0 auto;
	max-width: calc(2*var(--card-w) + .75em);
	padding: 1em 0;
	
	> * {
		place-self: center;
		border-radius: .5rem;
		box-shadow: 4px 4px 13px rgba(#000, .685)
	}
}

pre {
	padding: 0 .375em;
	line-height: 2;
}

.common {
	grid-column: 1/ -1;
	
	@media (max-width: 670px) {
		.token--func { &::before { content: '\A   ' } }
	}
	
	@media (max-width: 280px) {
		.token--arg + .token--punc:not(:last-child) { &::after { content: '\A    ' } }
	}
}

.token {
	&--prop { color: mix(nth($c, 3), #fff, 65%) }
	&--func { color: mix(nth($c, 4), #fff, 65%) }
	&--perc, &--num { color: mix(nth($c, 5), #fff, 65%) }
	&--keyw { color: mix(nth($c, 1), #fff, 65%) }
	&--str { color: mix(nth($c, 2), #fff, 65%) }
	&--arg { display: inline-flex }
	&--perc { &::after { content: '%' } }
}

article {
	display: grid;
	overflow: hidden;
	width: var(--card-w);
	
	@media (max-width: 290px) {
		&:nth-of-type(2) .token--val::before { content: '\A   ' }
	}
	
	@media (max-height: 760px) {
		.token--val::before { content: '\A   ' }
	}
}

.card {
	--card-h: calc(#{$card-f}*var(--card-w));
	place-self: center start;
	width: var(--card-w); height: var(--card-h);
	background: var(--img) 50%/ cover rgba(#fff, var(--dec));
	
	:nth-of-type(1) > & { filter: Invert(var(--prc)) }
	:nth-of-type(2) > & { background-blend-mode: exclusion }
}
View Compiled
/*

Created for my Taming Blend Modes: `difference` and `exclusion` (https://css-tricks.com/taming-blend-modes-difference-and-exclusion/) article on CSS-Tricks - check it out for context!
*/

document.documentElement.classList.add('js');

addEventListener('input', e => {
	let _t = e.target;
	document.body.style.setProperty(`--${_t.id}`, + _t.value)
}, false);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.