Dynamic CSS Box Shadow Generator – zShadows.css


Author: kinseywk
Views Total: 89 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;
}

See also  Realistic iOS Screen Mockup In Pure CSS

Leave a Reply

Your email address will not be published. Required fields are marked *