vue-styled-shadows
v0.1.8
Published
<h1 align="center">Vue Styled Shadows</h1> <p align="center"> Styled shadows for images. Supports SSR and IE11! </p>
Downloads
12
Maintainers
Readme
Demo
Installation
npm i vue-styled-shadows
Import
import Vue from 'vue';
import VueStyledShadows from 'vue-styled-shadows';
Vue.component('VueStyledShadows', VueStyledShadows);
SSR import (Nuxt for example)
import Vue from 'vue';
import VueStyledShadows from 'vue-styled-shadows/dist/vue-styled-shadows.ssr';
import 'vue-styled-shadows/dist/vue-styled-shadows.ssr.css';
Vue.component('VueStyledShadows', VueStyledShadows);
Usage
You can use the library without any props and it will use the default settings (see properties below).
<VueStyledShadows>
<img />
</VueStyledShadows>
Options
You can also add more props to customize things like type, color and size etc.
<VueStyledShadows type="lines" position="bottomRight" margin="50" patternSize="3">
<img />
</VueStyledShadows>
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.) |