Interactive CSS Box Shadow Library – Dropper UI

Category: CSS & CSS3 | January 22, 2021
Views Total:899 views
Official Page:Go to website
Last Update:January 22, 2021


Interactive CSS Box Shadow Library – Dropper UI


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.

<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>
<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>
<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>
<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>

You Might Be Interested In:

Leave a Reply