- 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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.