Dynamic CSS Box Shadow Generator – zShadows.css

Category: CSS & CSS3 | September 25, 2021
Author:kinseywk
Views Total:240 views
Official Page:Go to website
Last Update:September 25, 2021
License:MIT

Preview:

Dynamic CSS Box Shadow Generator – zShadows.css

Description:

zShadows.css is a CSS library that dynamically applies CSS box shadows to block-level elements based on the position of the light source you specify.

How to use it:

1. Add the zShadows.css stylesheet to the page.

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

2. Add the zBoxShadow class to the element and done.

<div id="card" class="zBoxShadow">
  <h1 id="text" class="zTextShadow">
    Hello, world!
  </h1>
</div>

3. Customize the position of the light source.

:root {
  --light-position-x: 0px;
  --light-position-y: 0px;
}

You Might Be Interested In:


Leave a Reply