Create Realistic Shadow For Images – vue-image-shadow

Description:

A Vue.js component that applies a configurable, realistic, interactive shadow effect to the image.

How to use it:

1. Import and register the component.

import ImageShadow from 'vue-image-shadow'
Vue.component('image-shadow', ImageShadow)

2. Add the image shadow component to the app and define the path to the image as follows:

<image-shadow :width="200" :src="this.myscr">
</image-shadow>
export default {
  data() {
    return {
      mySrc: '1.jpg'
    }
  }
}

3. Config the image shadow using the following component props.

<image-shadow 
  :width="200" 
  :src="this.mySrc"
  class-name="example"
  :shadow-blur="10"
  shadow-hover>
</image-shadow>
className: {
  type: String
},
shadowBlur: {
  type: Number,
  default: 20
},
shadowHover: {
  type: Boolean,
  default: false
},
shadowRadius: {
  type: Number,
  default: 8
},
src: {
  type: String,
  required: true
},
width: {
  type: Number,
  default: 300
},

Preview:

Create Realistic Shadow For Images - vue-image-shadow

Changelog:

v1.1.0 (12/15/2020)

  • feat: add alt & perf css

Download Details:

Author: image-component

Live Demo: https://image-component.github.io/vue-image-shadow/demo.html#base

Download Link: https://github.com/image-component/vue-image-shadow/archive/main.zip

Official Website: https://github.com/image-component/vue-image-shadow

Install & Download:

# Yarn
$ yarn add vue-image-shadow --save

# NPM
$ npm i vue-image-shadow --save

You Might Be Interested In:

Tags:

Add Comment