bk111 / picture-shadow

Creates shadows (glowing effect) for your images. Shadows will be created based on the color of your image.

Preview

Introduction

It helps you add appropriate shade to your images.

Incorporate Into Your Project.

Include the JavaScript file inside the head tags.

<script src="picture-shadow.js"></script>

Add the picture-shadow class to your image tags.

<img src="https://picsum.photos/300" class="picture-shadow" />

If you use it this way, the shadow is created with the default properties.

Customize

There are a few customization options for the shadow.

border radius, how far from the top it will be, how far from the left it will be, how blurry it will be. How big will it be.

We will add these properties to our tag, it will be data-[option]="[value]".

data-radius - How round will the border be?

<img
    src="https://picsum.photos/300"
    class="picture-shadow"
    data-radius="30px"
/>

data-left - how far from the left?

<img src="https://picsum.photos/300" class="picture-shadow" data-left="10px" />

data-top - how far from the top?

<img src="https://picsum.photos/300" class="picture-shadow" data-top="10px" />

data-blur - how blurry it will be?

<img src="https://picsum.photos/300" class="picture-shadow" data-blur="10px" />

data-scale - Resizes the shadow.

< 1: makes the image smaller than its size.

1: full size.

> 1: makes the image larger than its size.

<img
    src="https://picsum.photos/300"
    class="picture-shadow"
    data-resize="1.03"
/>

One or more options can be selected.

There is nothing else you need to do, the shadow will be created automatically when your page is ready.

How does it work

This section is for information.

First, let's say you have an image tag like this.

<img src="https://picsum.photos/300" class="picture-shadow my-custom-class" />

When your page is ready we will first wrap it with a div. Then we will create another one from the picture inside. We use the second image we created as a shadow.

The state of your page after it is ready.

<div class="picture-shadow-wrapper">
    <img
        src="https://picsum.photos/300"
        class="picture-shadow my-custom-class"
    />
    <img
        src="https://picsum.photos/300"
        class="picture-shadow my-custom-clas"
    />
</div>