Interactive CSS Box Shadow Library – Dropper UI

Preview:

Description:

Just another box shadow CSS library that adds interactive shadows to block-level elements in an easy way.

How to use it:

1. Import the Dropper UI.

@import './src/dropper.scss';

2. Or insert the complied CSS dropper.css into the document.

$ sass dropper.scss dropper.css

<link rel="stylesheet" href="./dropper.css" />

3. Add light, semi, bold, or regular shadows to the elements.

<h2>Light</h2>
<div class="dropper-light-close">Hover Me</div>
<div class="dropper-light-medium">Hover Me</div>
<div class="dropper-light-far">Hover Me</div>
<div class="dropper-light-far2x">Hover Me</div>
<h2>Regular:</h2>
<div class="dropper-regular-close">Hover Me</div>
<div class="dropper-regular-medium">Hover Me</div>
<div class="dropper-regular-far">Hover Me</div>
<div class="dropper-regular-far2x">Hover Me</div>
<h2>Semi:</h2>
<div class="dropper-semi-close">Hover Me</div>
<div class="dropper-semi-medium">Hover Me</div>
<div class="dropper-semi-far">Hover Me</div>
<div class="dropper-semi-far2x">Hover Me</div>
<h2>Bold:</h2>
<div class="dropper-bold-close">Hover Me</div>
<div class="dropper-bold-medium">Hover Me</div>
<div class="dropper-bold-far">Hover Me</div>
<div class="dropper-bold-far2x">Hover Me</div>