ZED
ZED stands for Z-Elevation based Drop-shadows. (It's also the correct way to pronounce the last letter in the alphabet 🇨🇦)
ZED creates more realistic-looking overlapping drop-shadows. The way drop-shadows are drawn by default in CSS doesn't take other elements into account. ZED draws shadows that get cast on other elevated elements, creating a more realistic effect.
Installation
To install ZED, install it from NPM
npm i zed-shadow
Usage
Initialization
// Initialize Zed with a DOM element, or a selector string const Z = '#shadow-container'// or const Z = document
Add the zed
attribute to the DOM elements you want to elevate
This div has a level 2 shadow This div has a level 4 shadow
Include Zed styles in your main/global css file
;
Modifying the default shadow distance
If you want to change the definition of 1 zed
unit, modify it with
let x = 2 // any number ZZ // Need to redraw the shadows
Updating shadows
To update the zed
attribute of an element, this still needs to be done manually
Z
See the current vue
example.
Live updating should be coming soon!
Examples
See the demo directory to see examples in some common frameworks.