https://github.com/p-chan/smooth-shadows
A library to generate smooth shadows with multiple layers
https://github.com/p-chan/smooth-shadows
shadow shadows smooth-shadows
Last synced: 5 months ago
JSON representation
A library to generate smooth shadows with multiple layers
- Host: GitHub
- URL: https://github.com/p-chan/smooth-shadows
- Owner: p-chan
- Created: 2021-08-04T17:48:24.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-12-08T18:22:26.000Z (about 1 year ago)
- Last Synced: 2024-12-12T19:53:36.945Z (about 1 year ago)
- Topics: shadow, shadows, smooth-shadows
- Language: TypeScript
- Homepage: https://npm.im/smooth-shadows
- Size: 671 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# smooth-shadows
> A library to generate smooth shadows with multiple layers
## Install
```sh
npm install smooth-shadows
```
or
```sh
yarn add smooth-shadows
```
## Usage
```ts
import { smoothShadows } from 'smooth-shadows'
const shadows = smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08])
console.log(shadows)
/*
[
[ 0, '0.216px', '1.361px', 0, [ 0, 0, 0, 0.027 ] ],
[ 0, '0.622px', '3.197px', 0, [ 0, 0, 0, 0.039 ] ],
[ 0, '1.447px', '6.325px', 0, [ 0, 0, 0, 0.049 ] ],
[ 0, '4px', '16px', 0, [ 0, 0, 0, 0.08 ] ]
]
*/
```
## API
```ts
smoothShadows(x, y, blur, spread, color, options)
```
### Parameters
- `x`: offset x
- Type: `string | 0`
- `y`: offset y
- Type: `string | 0`
- `blur`: blur radius
- Type: `string | 0`
- `spread`: spread radius
- Type: `string | 0`
- `color`: rgba
- Type: `[number, number, number, number]`
- `options` (optional)
- `layers` (optional): number of layers
- Type: `number`
- Default: `4`
- `easings` (optional):
- `offset` (optional): easing of `x` and `y`, specify [easing functions](https://easings.net/) or [cubic-bezier](https://cubic-bezier.com/)
- Type: `string | [number, number, number, number]`
- Default: [`[0.65, 0.1, 0.9, 0.4]`](https://cubic-bezier.com/#.65,.1,.9,.4)
- `blur` (optional): easing of blur, specify [easing functions](https://easings.net/) or [cubic-bezier](https://cubic-bezier.com/)
- Type: `string | [number, number, number, number]`
- Default: [`[0.65, 0.2, 0.9, 0.4]`](https://cubic-bezier.com/#.65,.2,.9,.4)
- `alpha` (optional): easing of alpha, specify [easing functions](https://easings.net/) or [cubic-bezier](https://cubic-bezier.com/)
- Type: `string | [number, number, number, number]`
- Default: [`[0.2, 0.6, 0.9, 0.4]`](https://cubic-bezier.com/#.2,.6,.9,.4)
- `output` (optional): return values
- Type: `'array' | 'object' | 'css'`
- Default: `'array'`
### Return values
Depends on the value of the output option.
array (default)
```json
[
[0, "0.216px", "1.361px", 0, [0, 0, 0, 0.027]],
[0, "0.622px", "3.197px", 0, [0, 0, 0, 0.039]],
[0, "1.447px", "6.325px", 0, [0, 0, 0, 0.049]],
[0, "4px", "16px", 0, [0, 0, 0, 0.08]]
]
```
object
```json
[
{
"x": 0,
"y": "0.216px",
"blur": "1.361px",
"spread": 0,
"color": { "red": 0, "green": 0, "blue": 0, "alpha": 0.027 }
},
{
"x": 0,
"y": "0.622px",
"blur": "3.197px",
"spread": 0,
"color": { "red": 0, "green": 0, "blue": 0, "alpha": 0.039 }
},
{
"x": 0,
"y": "1.447px",
"blur": "6.325px",
"spread": 0,
"color": { "red": 0, "green": 0, "blue": 0, "alpha": 0.049 }
},
{
"x": 0,
"y": "4px",
"blur": "16px",
"spread": 0,
"color": { "red": 0, "green": 0, "blue": 0, "alpha": 0.08 }
}
]
```
css
```txt
0 0.216px 1.361px rgba(0, 0, 0, 0.027), 0 0.622px 3.197px rgba(0, 0, 0, 0.039), 0 1.447px 6.325px rgba(0, 0, 0, 0.049), 0 4px 16px rgba(0, 0, 0, 0.08)
```
## Examples
### Increase layers
```ts
const shadows = smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], { layers: 8 })
console.log(shadows.length) //=> 8
```
### Decrease layers
```ts
const shadows = smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], { layers: 2 })
console.log(shadows.length) //=> 2
```
### Specify easing with easing functions
Can be specify the easing function of [easings.net](https://easings.net/). (But, cannot specify `ease*Elastic` and `ease*Bounce`)
```ts
smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], {
easings: { offset: 'easeInExpo', blur: 'easeInQuart', alpha: 'easeInOutCirc' },
})
```
### Specify easing with cubic-bezier
Can be specify cubic-bezier, which was created by [cubic-bezier.com](https://cubic-bezier.com/).
```ts
smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], {
easings: { offset: [0.65, 0.1, 0.9, 0.4], blur: [0.65, 0.2, 0.9, 0.4], alpha: [0.2, 0.6, 0.9, 0.4] },
})
```
### Output array
```ts
smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], { output: 'array' })
```
[Return values](#api-return-values-array)
### Output object
```ts
smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], { output: 'object' })
```
[Return values](#api-return-values-object)
### Output CSS
```ts
smoothShadows(0, '16px', '24px', 0, [0, 0, 0, 0.08], { output: 'css' })
```
[Return values](#api-return-values-css)
## Author
[@p-chan](https://github.com/p-chan)
## License
MIT