Vue Styled Shadows

Styled shadows for images. Supports SSR and IE11!

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