Just a small experiment to visualize how box-shadow
works. My current model is a single box controlled through a single set of attributes. Changing the attributes using a slider seemed like a cool way to visualize how the properties work.
The demo provides range controls to change box-shadow attributes.
NOTE: There already exists quite a nice box-shadow generator here.
TODO:
- change default box color to gray
- add controls for adjusting color and inset
- JavaScript: Use delegation. Instead of event listeners on each range control, maybe use delegation and a single event listener that can correctly target using
this
. Refer to my Vanilla JS Todo's app.js - maybe add a reset button?