- let k = 0;
- let o = ['separated', 'overlapped'];
- let no = o.length;
body.grid(style=`--k: ${k}`)
form.grid
- for(let i = 0; i < no; i++)
input(type='radio' name='o' id=`o${i}` style=`--i: ${i}` checked=i === k)
label(for=`o${i}` style=`--i: ${i}`) #{o[i]}
section.grid
.fill.grid
.lyr
.lyr
.lyr
.wire.grid
.lyr.grid
.lyr.grid
.lyr.grid
View Compiled
$c-dark: #333;
$c-nght: #040404;
$c-lght: #c7c7c7;
$c-main: #319197;
$c-secd: #ff6fff;
$togl-d: 1em;
$togl-p: 3px;
$togl-b: 3px;
$togl-g: $togl-p + $togl-b;
$line-w: 4px;
$tl: 1s;
* { margin: 0; padding: 0; font: inherit }
*, :not(label)::before, :not(label)::after {
--not-i: calc(1 - var(--i));
--sgn-i: calc(2*var(--i) - 1);
}
.grid { display: grid }
body {
--not-k: calc(1 - var(--k));
grid-template-rows: max-content 1fr;
min-height: 100vh;
background: $c-dark;
color: $c-lght;
font: 1.25em/ 1.5 ubuntu, trebuchet ms, sans-serif
}
form {
grid-gap: $togl-g;
place-content: center;
padding: .5em;
&::before, &::after {
--i: 0;
grid-area: 1/ 2;
z-index: 0;
border: solid $togl-b rgba($c-lght, var(--i));
padding: $togl-p;
border-radius: $togl-d;
width: calc((1 + var(--i))*#{$togl-d});
height: $togl-d;
transform:
translate(calc(var(--k)*var(--not-i)*#{$togl-d}));
background: rgba($c-main, var(--not-i)) content-box;
transition: transform .3s;
content: ''
}
&::after { --i: 1 }
> * {
grid-area: 1/ calc(2*var(--i) + 1);
place-self: center;
cursor: pointer
}
}
input[type='radio'] { opacity: 0 }
label {
--not-sel: max(var(--i) - var(--k), var(--k) - var(--i));
--sel: calc(1 - var(--not-sel));
position: relative;
z-index: calc(var(--not-sel) + 1);
color: $c-main;
filter:
Brightness(var(--sel))
Invert(var(--not-sel))
Brightness(calc(1 - .22*var(--not-sel)));
&::before, &::after {
position: absolute;
content: ''
}
&::before {
left: calc(var(--not-i)*100%);
padding: $togl-b + $togl-p $togl-g + $togl-b + $togl-p;
width: 2*$togl-d; height: $togl-d;
transform: translate(calc(var(--i)*-100%))
}
}
section {
box-shadow: inset 0 7px 7px -7px $c-nght;
background: inherit;
}
div { grid-area: 1/ 1 }
.fill {
--j: 0;
mix-blend-mode: lighten
}
.wire { --j: 1 }
.lyr {
--i: 0;
--h: clamp(8em, 35vh, 25em);
--r: calc(.375*var(--h));
--b: calc(.5*var(--r));
--sgn: calc(1 - var(--i));
--f: max(0, -1*var(--sgn));
--not-f: calc(1 - var(--f));
box-sizing: border-box;
place-self: center;
border: solid var(--b) transparent;
width: clamp(9em, 50vw, 32em);
height: calc(var(--h) + var(--j)*#{$line-w});
border-radius: var(--r);
transform:
translatey(calc(var(--not-k)*var(--sgn)*(80% - var(--j)*#{$line-w})))
perspective(25em)
rotatex(calc(var(--not-k)*45deg));
transition:
transform $tl
calc((var(--k)*var(--f) + var(--not-k)*var(--not-f))*#{$tl});
.fill & {
background: $c-main;
mix-blend-mode: difference;
&:nth-child(2) { background-clip: padding-box }
&:nth-child(3) {
display: grid;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
&::after {
place-self: center;
font-size: var(--r);
font-weight: 900;
content: 'BOO!'
}
}
}
.wire & {
border: dashed $line-w #ff7a18;
filter: drop-shadow(1px 1px 2px $c-nght);
&::before {
margin: calc(var(--b) - #{$line-w});
border: dashed $line-w #af002d;
border-radius: var(--b);
content: ''
}
}
&:nth-child(2) { --i: 1 }
&:nth-child(3) { --i: 2 }
}
View Compiled
addEventListener('change', e => {
let _t = e.target;
document.body.style.setProperty('--k', +_t.id.substring(1))
})
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.