Demo

• 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.) |

License

MIT