- var x = Math.round(100*Math.random());
- var y = Math.round(100*Math.random());
.radial.rainbow(style=`--x: ${x}; --y: ${y}; --o: 0; --ov: 0`)
p I'm a box with a dashed radial gradient border.
input(type='range' value=x id='rx0')
label(for='rx0') ox
input(type='range' value=y id='ry0')
label(for='ry0') oy
input(type='checkbox' id='ro0')
label(for='ro0') Show origin point
input(type='checkbox' id='rov0')
label(for='rov0') Show full gradient overlay
- var x = Math.round(100*Math.random());
- var y = Math.round(100*Math.random());
.radial.repeat(style=`--x: ${x}; --y: ${y}; --o: 0; --ov: 0`)
p I'm a box with a dashed repeating radial gradient border.
input(type='range' value=x id='rx1')
label(for='rx1') ox
input(type='range' value=y id='ry1')
label(for='ry1') oy
input(type='checkbox' id='ro1')
label(for='ro1') Show origin point
input(type='checkbox' id='rov1')
label(for='rov1') Show full gradient overlay
- var x = Math.round(100*Math.random());
- var y = Math.round(100*Math.random());
.conic.rainbow(style=`--x: ${x}; --y: ${y}; --o: 0; --ov: 0`)
p I'm a box with a dashed conic gradient border.
input(type='range' value=x id='cx0')
label(for='cx0') ox
input(type='range' value=y id='cy0')
label(for='cy0') oy
input(type='checkbox' id='co0')
label(for='co0') Show origin point
input(type='checkbox' id='cov0')
label(for='cov0') Show full gradient overlay
- var x = Math.round(100*Math.random());
- var y = Math.round(100*Math.random());
.conic.repeat(style=`--x: ${x}; --y: ${y}; --o: 0; --ov: 0`)
p I'm a box with a dashed repeating conic gradient border.
input(type='range' value=x id='cx1')
label(for='cx1') ox
input(type='range' value=y id='cy1')
label(for='cy1') oy
input(type='checkbox' id='co1')
label(for='co1') Show origin point
input(type='checkbox' id='cov1')
label(for='cov1') Show full gradient overlay
View Compiled
@import 'compass/css3';
// saturation and lightness used for our rainbow gradient
$sat: 75%;
$lum: 65%;
$w: 21.5em; // element width
$h: .75*$w; // element height
$d: sqrt(pow($w, 2) + pow($h, 2)); // element diagonal
$bw: .625em; // border-width
$dl: 1.25em; // dash length
$dt: $bw; // dash thickness
$g: .5*$dl; // gap between dashes
// number of dashes (top to bottom and left to right)
$nv: floor(($h + $g)/($dl + $g));
$nh: floor(($w + $g)/($dl + $g));
// actual vertical and horizontal gaps
$gv: ($h - $nv*$dl)/($nv - 1);
$gh: ($w - $nh*$dl)/($nh - 1);
$stops-rep: #da1b60, #ff8a00 calc(1*var(--unit)), #ff8a00 calc(5*var(--unit)), #da1b60 calc(6*var(--unit)), #da1b60 calc(10*var(--unit));
$dot-r: .25em;
$box-d: 1em;
$c: var(--c-sel, var(--c-hl));
$ll: #555;
$hl: purple;
$thumb-d: 1em;
$thumb-r: .5*$thumb-d;
$track-h: .125em;
$track-r: .5*$track-h;
$track-w: .8*$w;
$input-h: $thumb-d;
// generate rainbow stop list
@function stops-rbw($prec: 6 /* precision */, $d0: 0) {
$l: (); // stop list, initially empty
$u: 360deg/$prec; // unit
@for $i from $d0 through $prec {
$c: HSL($i*$u, $sat, $lum);
$l: $l, $c
}
@return $l
}
@mixin track() {
width: $track-w + $thumb-d; height: $track-h;
border-radius: .5*$track-h;
background: radial-gradient(circle at calc(var(--pos) + #{$thumb-r}) 50%,
transparent $thumb-r, $ll 0);
}
@mixin thumb() {
box-sizing: border-box;
width: $thumb-d; height: $thumb-d;
border-radius: 50%;
transform: scale(.7);
background: $ll;
transition: .3s;
}
@mixin thumb-focus() {
transform: scale(1);
background: $hl
}
* {
margin: 0;
padding: 0;
font: inherit
}
body {
display: flex;
flex-wrap: wrap;
background: url(https://images.unsplash.com/photo-1504441487953-4ddc9b5135ca?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) 50%/ cover fixed #b7b7b7;
background-blend-mode: overlay
}
div {
/* essential styles */
--vx: calc(var(--x)*#{.01*$w});
--vy: calc(var(--y)*#{.01*$h});
--vsetup: #{$bw $dl border-box no-repeat};
--hsetup: #{$dl $bw border-box no-repeat};
border: solid $bw transparent;
background:
linear-gradient(rgba(#fff, .6), rgba(#ccc, .65))
padding-box /* cover layer */,
var(--bd) /* gradient border layer */;
/* just to prettify the while thing */
box-sizing: border-box;
display: flex;
flex-direction: column;
position: relative;
margin: 1vmin auto;
padding: .5em;
min-width: $w;
width: $w; height: $h;
font: 600 1.25em segoe script, comic sans ms, cursive;
&:before, &:after {
position: absolute;
pointer-events: none;
content: ''
}
&:before {
top: -$bw; right: -$bw; bottom: -$bw; left: -$bw;
opacity: calc(.5*var(--ov));
}
&:after {
top: calc(var(--vy) - #{$bw});
left: calc(var(--vx) - #{$bw});
margin: -$dot-r;
padding: $dot-r;
border-radius: 50%;
opacity: var(--o);
background: mediumvioletred;
}
}
.rainbow { --slist: #{stops-rbw()} }
.repeat { --slist: #{$stops-rep} }
.radial {
--unit: 1px;
&.rainbow {
--d: #{$d};
$glist: ();
@for $i from 0 to $nv {
$y: $i*($dl + $gv);
$glist: $glist,
Radial-gradient(circle
at var(--vx)
calc(var(--vy) - #{$y}), var(--slist) var(--d))
0 $y/ var(--vsetup),
Radial-gradient(circle
at calc(var(--vx) + #{$dt - $w})
calc(var(--vy) - #{$y}), var(--slist) var(--d))
100% $y/ var(--vsetup)
}
@for $i from 0 to $nh {
$x: $i*($dl + $gh);
$glist: $glist,
Radial-gradient(circle
at calc(var(--vx) - #{$x})
var(--vy), var(--slist) var(--d))
$x 0/ var(--hsetup),
Radial-gradient(circle
at calc(var(--vx) - #{$x})
calc(var(--vy) + #{$dt - $h}), var(--slist) var(--d))
$x 100%/ var(--hsetup)
}
--bd: #{$glist};
&:before {
background: Radial-gradient(circle at var(--vx) var(--vy), var(--slist) $d);
}
}
&.repeat {
$glist: ();
@for $i from 0 to $nv {
$y: $i*($dl + $gv);
$glist: $glist,
Repeating-radial-gradient(circle
at var(--vx)
calc(var(--vy) - #{$y}), var(--slist))
0 $y/ var(--vsetup),
Repeating-radial-gradient(circle
at calc(var(--vx) + #{$dt - $w})
calc(var(--vy) - #{$y}), var(--slist))
100% $y/ var(--vsetup)
}
@for $i from 0 to $nh {
$x: $i*($dl + $gh);
$glist: $glist,
Repeating-radial-gradient(circle
at calc(var(--vx) - #{$x})
var(--vy), var(--slist))
$x 0/ var(--hsetup),
Repeating-radial-gradient(circle
at calc(var(--vx) - #{$x})
calc(var(--vy) + #{$dt - $h}), var(--slist))
$x 100%/ var(--hsetup)
}
--bd: #{$glist};
&:before {
background: Repeating-radial-gradient(circle at var(--vx) var(--vy), $stops-rep);
}
}
}
.conic {
display: none;
@supports (background-image: conic-gradient(red, tan)) {
--unit: 1%;
display: flex;
&.rainbow {
$glist: ();
@for $i from 0 to $nv {
$y: $i*($dl + $gv);
$glist: $glist,
conic-gradient(
at var(--vx)
calc(var(--vy) - #{$y}), var(--slist))
0 $y/ var(--vsetup),
conic-gradient(
at calc(var(--vx) + #{$dt - $w})
calc(var(--vy) - #{$y}), var(--slist))
100% $y/ var(--vsetup)
}
@for $i from 0 to $nh {
$x: $i*($dl + $gh);
$glist: $glist,
conic-gradient(
at calc(var(--vx) - #{$x})
var(--vy), var(--slist))
$x 0/ var(--hsetup),
conic-gradient(
at calc(var(--vx) - #{$x})
calc(var(--vy) + #{$dt - $h}), var(--slist))
$x 100%/ var(--hsetup)
}
--bd: #{$glist};
&:before {
background: conic-gradient(at var(--vx) var(--vy), var(--slist));
}
}
&.repeat {
$glist: ();
@for $i from 0 to $nv {
$y: $i*($dl + $gv);
$glist: $glist,
Repeating-conic-gradient(
at var(--vx)
calc(var(--vy) - #{$y}), var(--slist))
0 $y/ var(--vsetup),
Repeating-conic-gradient(
at calc(var(--vx) + #{$dt - $w})
calc(var(--vy) - #{$y}), var(--slist))
100% $y/ var(--vsetup)
}
@for $i from 0 to $nh {
$x: $i*($dl + $gh);
$glist: $glist,
Repeating-conic-gradient(
at calc(var(--vx) - #{$x})
var(--vy), var(--slist))
$x 0/ var(--hsetup),
Repeating-conic-gradient(
at calc(var(--vx) - #{$x})
calc(var(--vy) + #{$dt - $h}), var(--slist))
$x 100%/ var(--hsetup)
}
--bd: #{$glist};
&:before {
background: repeating-conic-gradient(at var(--vx) var(--vy), $stops-rep);
}
}
}
}
p, input, label { position: relative }
p { margin-bottom: .75em }
input {
&[type='range'] {
&::-webkit-slider-runnable-track,
&::-webkit-slider-thumb, & { -webkit-appearance: none }
--pos: calc(var(--x)*#{.01*$track-w});
display: block;
margin: 0 auto;
border: solid 0 transparent;
padding: 0;
width: $track-w + $thumb-d; height: $input-h;
background: transparent;
font: inherit;
cursor: pointer;
&::-webkit-slider-runnable-track { @include track }
&::-moz-range-track { @include track }
&::-ms-track { @include track }
&::-webkit-slider-thumb {
margin-top: .5*($track-h - $thumb-d);
@include thumb;
}
&::-moz-range-thumb { @include thumb }
&::-ms-thumb {
margin-top: 0;
@include thumb
}
&::-ms-fill-lower,
&::-ms-fill-upper {
background: transparent;
}
&::-ms-tooltip { display: none }
&:focus {
outline: solid 0px transparent;
&::-webkit-slider-thumb { @include thumb-focus }
&::-moz-range-thumb { @include thumb-focus }
&::-ms-thumb { @include thumb-focus }
}
& ~ & { --pos: calc(var(--y)*#{.01*$track-w}) }
+ label {
align-self: center;
margin-bottom: .75em;
text-align: center
}
}
&[type='checkbox'] {
position: absolute;
left: -100vw;
+ label {
display: flex;
align-items: center;
align-self: flex-start;
color: $c;
cursor: pointer;
&:before {
margin-right: .375em;
width: $box-d; height: $box-d;
box-shadow: 0 0 0 2px $c;
text-align: center;
color: var(--c-sel, transparent);
line-height: calc(#{$box-d} + 4px);
content: '✔'
}
}
&:checked + label { --c-sel: $hl }
}
&:focus, &:hover { + label { --c-hl: #000 } }
}
label {
--c-hl: $ll;
color: $c;
}
View Compiled
function update(e) {
const _TG = e.target;
if(_TG.tagName.toLowerCase() === 'input') {
const _WRP = _TG.parentNode;
let val = _TG.type === 'range' ? +_TG.value : (_TG.checked ? 1 : 0);
_WRP.style.setProperty(`--${_TG.id.replace(/r|c|\d+/g, '')}`, val)
}
};
addEventListener('input', update, false);
addEventListener('change', update, false);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.