https://github.com/nishantapps/shadowizard
Shadowizard is an open-source library for generating customizable box shadows using CSS. It allows developers to quickly and easily create visually appealing box shadows by providing a simple syntax for specifying the parameters of the shadow. With Shadowizard, developers can generate a wide variety of box shadows, including inset shadows.
https://github.com/nishantapps/shadowizard
box-shadows cross-browser-compatibility css customizable developerso github inset-shadows library lightweight multiple-shadows open-source text-shadows ui-design visual-design web-development
Last synced: 7 days ago
JSON representation
Shadowizard is an open-source library for generating customizable box shadows using CSS. It allows developers to quickly and easily create visually appealing box shadows by providing a simple syntax for specifying the parameters of the shadow. With Shadowizard, developers can generate a wide variety of box shadows, including inset shadows.
- Host: GitHub
- URL: https://github.com/nishantapps/shadowizard
- Owner: nishantapps
- License: apache-2.0
- Created: 2023-02-17T11:20:53.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-01T16:48:14.000Z (over 1 year ago)
- Last Synced: 2025-04-26T11:03:23.477Z (24 days ago)
- Topics: box-shadows, cross-browser-compatibility, css, customizable, developerso, github, inset-shadows, library, lightweight, multiple-shadows, open-source, text-shadows, ui-design, visual-design, web-development
- Language: JavaScript
- Homepage: http://shadowizard.apsa-developers.software/
- Size: 80.1 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Shadowizard
Shadowizard is a simple, customizable, and lightweight package that allows you to add beautiful and customizable box-shadow effects to your HTML elements. It's easy to use and can be installed via the Node Package Manager (NPM).
# Installation
We can using:
• NPM
• CDN
> To install Shadowizard using NPM, open your terminal and run the following command:
```
npm install @developerso/shadowizard
```
> To use using cdn:
For development version:
```
```
For production version:
```
```
# Usage
> Using NPM
1. Import the Shadowizard package into your JavaScript file.
```
import shadowizard from '@developerso/shadowizard';
```
2. Call the shadowizard function and pass in the target HTML element and any customization options you want to use.
```
shadowizard({
shadow_type: 'soft',
padding: false
});
```
> Using CDN
Add Following script in body tag.
REMEMBER to add the cdn. [See the documentation](https://github.com/developerso/shadowizard/wiki#installation)
```
shadowizard({
shadow_type: 'soft',
padding: false
});
```
# Options
`Shadowizard` provides you with several options that you can use to customize the box-shadow effect:
• `shadow_type` `(string)`: This option determines the type of shadow effect you want to use. You can choose from two types: hard and soft. The default is hard.
• `padding` `(boolean)`: This option determines whether or not to include padding in the shadow effect. If set to true, the shadow will be applied to the padding as well as the content of the HTML element. If set to false, the shadow will only be applied to the content. The default is false.
• `shadow_color` `(string)`: This option determines the color of the shadow effect. You can use any valid CSS color value. The default is rgba(0,0,0,0.2).
• `shadow_distance` `(string)`: This option determines the distance between the HTML element and the shadow. You can use any valid CSS length value. The default is 10px.
▪︎ `shadow_blur` `(string)`: This option determines the blur radius of the shadow. You can use any valid CSS length value. The default is 10px.
# Example
```
// Example 1 - Using the default options
shadowizard();
// Example 2 - Applying a soft shadow effect
shadowizard({
shadow_type: 'soft'
});
// Example 3 - Applying a blue shadow effect
shadowizard({
shadow_color: 'blue'
});
// Example 4 - Applying a shadow effect with padding
shadowizard({
padding: true
});
// Example 5 - Applying a shadow effect with a distance of 20px and a blur radius of 15px
shadowizard({
shadow_distance: '20px',
shadow_blur: '15px'
});
```
# Conclusion
Shadowizard is a simple and customizable package that makes it easy to add beautiful box-shadow effects to your HTML elements. With its easy-to-use API and customizable options, you can quickly and easily create stunning visual effects that enhance the design of your website or application.
# Tags
