smooth-shadows
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

smooth-shadows

A library to generate smooth shadows with multiple layers

Install

npm install smooth-shadows

or

yarn add smooth-shadows

Usage

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

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)

Return values

Depends on the value of the output option.

array (default)

[
  [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

[
  {
    "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

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

const shadows = smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], { layers: 8 })

console.log(shadows.length) //=> 8

Decrease layers

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. (But, cannot specify ease*Elastic and ease*Bounce)

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.

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

smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], { output: 'array' })

Return values

Output object

smoothShadows(0, '4px', '16px', 0, [0, 0, 0, 0.08], { output: 'object' })

Return values

Output CSS

smoothShadows(0, '16px', '24px', 0, [0, 0, 0, 0.08], { output: 'css' })

Return values

Author

@p-chan

License

MIT

Package Sidebar

Install

npm i smooth-shadows

Weekly Downloads

2

Version

0.1.0

License

MIT

Unpacked Size

15.4 kB

Total Files

9

Last publish

Collaborators

  • p-chan