Styled shadows for images. Supports SSR and IE11!
npm i vue-styled-shadows
import Vue from 'vue';
import VueStyledShadows from 'vue-styled-shadows';
Vue.component('VueStyledShadows', VueStyledShadows);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);You can use the library without any props and it will use the default settings (see properties below).
<VueStyledShadows>
<img />
</VueStyledShadows>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>| 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.) |