box-shadow playground

by bc_rikko

HTML

<div id="app">
  <div class="container">
    <main>
      <div class="box" :style="boxshadow"></div>
    </main>
    <aside>
      <div class="field">
        <label><input type="checkbox" v-model="inset">inset</label>
      </div>  
      <div class="field">
        <label>offset-x {{ offsetX }}px</label>
        <input type="range" v-model="offsetX" min=-200 max=200 step="5">
      </div>
      <div class="field">
        <label>offset-y {{ offsetY }}px</label>
        <input type="range" v-model="offsetY" min=-200 max=200 step="5">
      </div>
      <div class="field">
        <label>blur-radius {{ blurRadius }}px</label>
        <input type="range" v-model="blurRadius" min=0 max=200 step="5">
      </div>
      <div class="field">
        <label>spread-radius {{ spreadRadius }}px</label>
        <input type="range" v-model="spreadRadius" min=-100 max=200 step="5">
      </div>
    </aside>
  </div>
</div>

CSS

.container {
  height: 80vh;
  display: flex;
}

main {
  width: 70%;
  height: 100%;
  
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  width: 200px;
  height: 200px;
  background-color: #4986E7;
}

aside {
  width: 30%;
  height: 100%;
}
.field > label {
  display: block;
}

JavaScript

new Vue({
  el: "#app",
  data () {
    return {
      inset: false,
      offsetX: 0,
      offsetY: 0,
      blurRadius: 0,
      spreadRadius: 0
    }
  },
  computed: {
    boxshadow () {
      return {
        boxShadow: `${this.inset ? 'inset' : ''} ${this.offsetX}px ${this.offsetY}px ${this.blurRadius}px ${this.spreadRadius}px rgba(0,0,0,.5)`
      }
    }
  }
})