Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juliandreas/vue-styled-shadows
Styled shadows for images
https://github.com/juliandreas/vue-styled-shadows
Last synced: about 1 month ago
JSON representation
Styled shadows for images
- Host: GitHub
- URL: https://github.com/juliandreas/vue-styled-shadows
- Owner: juliandreas
- Created: 2020-08-26T07:14:26.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-09-04T11:55:13.000Z (over 2 years ago)
- Last Synced: 2024-01-02T23:38:28.572Z (5 months ago)
- Language: Vue
- Homepage:
- Size: 1.47 MB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Lists
- awesome-vue - vue-styled-shadows - Component based styled shadow patterns for images. (Components & Libraries / UI Utilities)
- awesome-vue - vue-styled-shadows - Component based styled shadow patterns for images. (Components & Libraries / UI Utilities)
- awesome-vue - vue-styled-shadows - Component based styled shadow patterns for images. (Components & Libraries / UI Utilities)
- awesome-vue - vue-styled-shadows - Component based styled shadow patterns for images. (Components & Libraries / UI Utilities)
- awesome-vue - vue-styled-shadows - Component based styled shadow patterns for images. (Components & Libraries / UI Utilities)
- awesome-vue - vue-styled-shadows - Component based styled shadow patterns for images. (Components & Libraries / UI Utilities)
- awesome-vue - vue-styled-shadows - Component based styled shadow patterns for images. (Components & Libraries / UI Utilities)
README
Vue Styled Shadows
Styled shadows for images. Supports SSR and IE11!
## Demo
- [Demo](https://vue-styled-shadows.netlify.app/)
## Installation
```
npm i vue-styled-shadows
```
### Import
```javascript
import Vue from 'vue';
import VueStyledShadows from 'vue-styled-shadows';
Vue.component('VueStyledShadows', VueStyledShadows);
```
### SSR import (Nuxt for example)
```javascript
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).
```html
![]()
```
## Options
You can also add more props to customize things like type, color and size etc.
```html
![]()
```
## 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](http://opensource.org/licenses/MIT)