CSS Glowing Volume Dial

HTML
<div class="face"> <div class="bubble"></div> </div>
SASS
%pos-abs position: absolute %cont-disp-blk content: "" display: block %bef-aft @extend %pos-abs @extend %cont-disp-blk %bor-rad border-radius: 50% =dims($h, $w: null) height: $h width: if($w == null, $h, $w) =circ($dim) +dims($dim) @extend %bor-rad *, *::before, *::after box-sizing: border-box html font-size: 100% min-height: 100% body // Background background-color: hsl(0,0,16%) // Fallback background: radial-gradient(circle at top,hsla(0,0,24%,0.99),hsla(0,0,0%,1)) .face +circ(8em) // Positioning position: relative margin: 4em auto // Theme background: hsl(0,0,15%) box-shadow: inset 0 1px 0 hsla(0,0,100%,0.15) &::after // Create circle +circ(10em) @extend %bef-aft // Positioning top: -1em left: -1em z-index: -1 // Send to middle // Theme box-shadow: inset 0 -3px 6px hsla(150,50,50%,0.1),0 2px 12px hsla(150,50,50%,0.7) background: linear-gradient(to bottom, hsl(0,0,25%), hsl(0,0,1%)) &::before // Create circle +circ(12em) @extend %bef-aft // Positioning top: -2em left: -2em z-index: -2 //Send to Back // Theme background: linear-gradient(to bottom, hsl(0,0,3%), hsl(0,0,15%)) box-shadow: inset 0 -1px 0 hsla(0,0,100%,0.1) .bubble // Create circle +circ(1.4em) // Positioning @extend %pos-abs top: 5.25em left: 5.25em // Theme background: hsl(0,0,8%) // fallback background: radial-gradient(circle at 5% top, hsla(0,0,25%,0.5), hsla(0,0,0%,1)) box-shadow: inset 0 2px 4px black, 0 1px 0 transparentize(white, 0.9)
JAVASCRIPT
Expand for more options Login