Icon Mock Background

JADE
.back .center .pair label H input.slider#hue( type="range" min="0" max="360" value="360") .pair label S input.slider#sat( type="range" min="0" max="100" value="65") .pair label L input.slider#lig( type="range" min="0" max="100" value="75") .pair label B input.slider#border( type="range" min="0" max="300" value="150") a#hide-controls Hide the controls and let me take a screenshot
SCSS
$main: hsl(0,0%,100%); $sans: 'Open Sans', sans-serif; $serif: 'Merriweather', serif; body{ font-family: $sans; max-height: 100vh; max-width: 100vw; overflow: hidden; } .back{ content: ''; position: absolute; width: 100%; height: 100%; //background: linear-gradient( 35deg, darken( adjust-hue( $main, -5% ), 10% ), darken( adjust-hue($main,5%),5%)); z-index: -1; } .center{ position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); width: 60vh; height: 60vh; box-shadow: 0px 1vh 5vh rgba(darken(adjust-hue($main,-20%),45%),0.2); border-radius: 10vh; display: flex; flex-direction: column; align-items: center; text-align: center; background-color: lighten($main,2%); background-position: center; background-size: cover; padding: 10vh 10vh 8vh; box-sizing: border-box; &.faded{ cursor: pointer; &:after{ content: 'Click here when you are done to bring them back'; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); color: white; font-family: $sans; width: 50%; font-size: 4vh; line-height: 1.5; font-weight: 100; opacity: 0; @keyframes fadeinout{ 0%{ opacity: 0;} 20%{ opacity: 1;} 80%{ opacity: 1;} 100%{ opacity: 0;} } animation-name: fadeinout; animation-duration: 2s; animation-delay: 300ms; animation-fill-mode: forwards; } } } .pair{ margin: auto; width: 100%; } label{ display: inline-block; width: 10%; color: rgba(white,1); text-align: left; font-size: 4vh; margin-bottom: 1vh; font-weight: 100; } .slider{ display: inline-block; width: 80%; margin-left: 5%; } #hide-controls{ width: 40vh; text-align: center; margin: auto; font-size: 2vh; padding: 2vh; color: white; cursor: pointer; position: absolute; bottom: 1vh; left: 50%; transform: translateX(-50%); opacity: 0.3; font-weight: 100; &:hover{ opacity: 1; } } .sig{ position: fixed; bottom: 8px; right: 8px; text-decoration: none; font-size: 12px; font-weight: 100; font-family: sans-serif; color: rgba(0,0,0,0.4); letter-spacing: 2px; } //sliders input[type=range] { -webkit-appearance: none; background: transparent; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { height: 1.5vh; cursor: pointer; animate: 0.2s; box-shadow: inset 0 0.15vh 0.4vh rgba(0,0,0,0.3); background: white; border-radius: 1.5vh; border: none; } input[type=range]::-webkit-slider-thumb { box-shadow: 0 0.2vh 0.5vh rgba(0,0,0,0.2); border: none; height: 4vh; width: 4vh; border-radius: 4vh; background: #FFFFFF; cursor: pointer; -webkit-appearance: none; margin-top: -1.5vh; } input[type=range]::-moz-range-track { height: 1.5vh; cursor: pointer; animate: 0.2s; box-shadow: inset 0 0.15vh 0.4vh rgba(0,0,0,0.3); background: white; border-radius: 5px; border: none; } input[type=range]::-moz-range-thumb { box-shadow: 0 0.2vh 0.5vh rgba(0,0,0,0.2); border: none; height: 4vh; width: 4vh; border-radius: 4vh; background: #FFFFFF; cursor: pointer; -webkit-appearance: none; margin-top: -1.5vh; }
JAVASCRIPT
var clr = { h: Number($('#hue').val()), s: Number($('#sat').val()), l: Number($('#lig').val()), } br = String( Number($('#border').val() / 10 ) ) + 'vh'; function updateUI(){ var centerColor = 'hsl('+clr.h+','+clr.s+'%,'+clr.l+'%)'; var centerShadow = '0px 1vh 3vh hsla('+(clr.h-30)+','+(clr.s*0.7)+'%,'+(clr.l*0.5)+'%, 0.3)'; $('.center').css('background-color', centerColor); $('.center').css('box-shadow', centerShadow); $('.center').css('border-radius', br); var backDark = 'hsl('+(clr.h-30)+','+(clr.s*0.8)+'%,'+(clr.l*0.9)+'%)'; var backLight = 'hsl('+(clr.h+30)+','+(clr.s*1.2)+'%,'+(clr.l*1.1)+'%)'; var backGrad = 'linear-gradient( 35deg, '+backDark+', '+backLight+' )'; $('.back').css('background', backGrad); } $('#hue').on('mousemove change', function(){ clr.h = Number($('#hue').val()); updateUI(); }) $('#sat').on('mousemove change', function(){ clr.s = Number($('#sat').val()); updateUI(); }) $('#lig').on('mousemove change', function(){ clr.l = Number($('#lig').val()); updateUI(); }) $('#border').on('mousemove change', function(){ br = String( Number($('#border').val() / 10 ) ) + 'vh'; updateUI(); }) $('#hide-controls').on('click', function(){ $('.pair, #hide-controls').fadeOut(); $('.center').addClass('faded'); }) $('.center').on('click', function(){ $('.pair, #hide-controls').fadeIn(); $('.center').removeClass('faded'); }) $(document).ready(function(){ var direction = -1; var ease = 1.01; var testSlide = setInterval(function(){ clr.h += direction; direction *= ease; direction $('#hue').val( clr.h ); if (clr.h <= 180){ ease = 0.99; } if (clr.h <= 0){ clearInterval(testSlide); } updateUI(); },20); })
Expand for more options Login