Interactive CSS Box Shadow Library – Dropper UI

Category: CSS & CSS3 | January 22, 2021
Author: menashe-bouhadana
Views Total: 158 views
Official Page: Go to website
Last Update: January 22, 2021
License: MIT

Preview:

Interactive CSS Box Shadow Library – Dropper UI

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>

You Might Be Interested In:


Leave a Reply