Real Shadow

Realshadow adds a real time based shadow for any HTML Element. It works with the current time calculating each 1 second the shadow based on the current hour. You can see the below image for more details.

Demo

See this codepen: https://codepen.io/bregydoc/pen/RwoXPVJ.

How to use

Only need to add this line at the end of your body tag:

<script src="https://unpkg.com/@minskylab/realshadow/umd/index.min.js" type="text/javascript"></script>

Now, you can apply the real shadow only adding the data-rs-kind data tag with options drop|box|text|both:

Basic Example

<div data-rs-kind="box" />
<span data-rs-kind="text"> HELLO WORLD </span>

Options

You can configure the behavior of your realshadow using the below data tags.

data-rs-kind="box" # Shadow kind

data-rs-from-hour="06" # Sunset hour

data-rs-to-hour="18" # Sunrise hour

data-rs-distance="10" # Shadow distance

data-rs-color="#0d1117" # Shadow color

data-rs-blur-radius="2" # Shadow blur radius (in pixels)

data-rs-hour="10:00" # Forced static hour

Shadow kind

The shadow kind: drop|box|text|both.

box-shadow: Official Documentation. text-shadow: Official Documentation. drop (filter): Official Documentation.

Contribute

I need to complete this documentation, if you want to help only make an issue or pull request. Thanks.