Vue Styled Shadows
Styled shadows for images. Supports SSR and IE11!
Demo
Installation
npm i vue-styled-shadows
Import
;; Vue;
SSR import (Nuxt for example)
;;; Vue;
Usage
You can use the library without any props and it will use the default settings (see properties below).
Options
You can also add more props to customize things like type, color and size etc.
Properties
Name | Type | Default | Description |
---|---|---|---|
type | String | dots |
Type of pattern [dots, lines, diagonal] |
position | String | bottomLeft |
Shadow position [bottomLeft, bottomRight, topLeft, topRight] |
margin | [String, Number] | 50 |
Margin between image and shadow |
bgSize | [String, Number] | 40 |
Background size |
patternSize | [String, Number] | 3 |
Pattern size |
color1 | String | #504D2E |
Main color of pattern |
color2 | String | transparent |
Secondary color of pattern (Only valid for dots and lines) |
bgColor | String | transparent |
Background color |
degree | [String, Number] | 45 |
Degree (Only valid for diagonal) |
reverse | Boolean | false |
Reverse z-index between pattern and image |
vssid | String | null |
Sets an id-attribute on the shadow (Useful for animations i.e.) |
vssclass | String | null |
Sets a class-attribute on the shadow (Useful for animations i.e.) |