$u: 1.25;
$d: 12.5rem;
$s0: .5rem;
$s1: 2*$s0;
$b: 2rem;
$l: 6px;
$t0: .25s;
$t1: 2*$t0;
$easeOutCubic: cubic-bezier(.32, 1, .68, 1);
$easeOutBack: cubic-bezier(.35, 1.57, .65, 1);
* { box-sizing: inherit; margin: 0 }
html {
font: 100 #{$u*1em}/ 1.25 handlee,
z003, segoe script, comic sans ms, cursive
}
body {
box-sizing: border-box;
display: grid;
grid-gap: $s1;
grid-template-columns:
repeat(auto-fit, minmax($d, 1fr));
overflow-x: hidden;
padding: $s1;
height: 100vh;
background:
linear-gradient(var(--ang, 185deg),
#fff calc(50% - .5px), #000 calc(50% + .5px));
@media (min-width: $u*(2*$d + 3*$s1)) { --ang: 95deg }
}
article {
--i: 0;
--not-i: calc(1 - var(--i));
place-self: center;
overflow: hidden;
position: relative;
padding: $s0;
width: $d; height: $d;
background: hsl(0, 0%, calc(var(--i)*100%));
color: hsl(0, 0%, calc(var(--not-i)*100%));
clip-path: inset(1px round $s0);
mix-blend-mode: difference;
&:nth-child(2) { --i: 1 }
&:after {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: currentcolor;
clip-path: inset(0 0 $d $d round 0 $s0);
transition: clip-path $t0 $easeOutBack;
content: ''
}
&.hl::after {
clip-path: inset(0 0 $d - $b $d - $b round 0 $s0)
}
&.cl {
--a: 0;
&::after {
clip-path: inset(0 round 0 $s0);
transition: clip-path $t1 $easeOutCubic
}
}
}
h3 {
font-size: 1.25em;
font-weight: 700;
line-height: 1.75
}
button {
position: absolute;
z-index: 2;
top: 0; right: 0;
border: none;
width: $b; height: $b;
background: transparent;
color: transparent;
font-size: 1px;
mix-blend-mode: difference;
cursor: pointer;
&::before, &::after {
--j: 0;
position: absolute;
top: calc(50% - .5*#{$l});
left: calc(50% - .5*#{$b});
width: $b; height: $l;
border-radius: $l;
transform:
rotate(calc((2*var(--j) - 1)*45deg))
scale(.65);
background: rgba(#fff, var(--a, 1));
transition: background-color $t0 $easeOutCubic;
content: ''
}
&::after { --j: 1 }
&:focus { outline: none }
}
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!
*/
const _BODY = document.body;
function state(e, act = 'add', cls = 'hl') {
const _T = e.target;
if(_T.tagName.toLowerCase() === 'button')
_T.parentNode.classList[act](cls)
}
_BODY.addEventListener('focus', state, true);
_BODY.addEventListener('mouseover', state);
_BODY.addEventListener('blur', e => state(e, 'remove'), true);
_BODY.addEventListener('mouseout', e => state(e, 'remove'));
_BODY.addEventListener('click', e => state(e, 'add', 'cl'));
View Compiled