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)
