Vue Glow is a simple component that allows giving any item a glow/colored effect. VueGlow was initially designed to extend the capabilities of vuetify, however, it will work equally well without Vuetify. The dynamic glow effect was done in pure CSS which means there are no additional dependencies.
hover grow effect css, css grow animation, flex grow example, css hover effects, div hover effect css, flex grow vertically
Glowing Text Effect Using Cascading Style Sheets In Pure CSS
How to make use of it:
Install and download:
# NPM $ npm i vue-glow --save
1. Import the VueGlow component.
import VueGlow from 'vue-glow';
2. Add the VueGlow component to the template.
// soft <VueGlow color="#18806C" mode="hex" elevation="11" intensity="1.67">Anything you want!</VueGlow> // intense <VueGlow color="#18806C" mode="hex" elevation="11" intensity="1.67" intense>Anything you want!</VueGlow>
3. Apply a fade transition to a glow effect.
<VueGlow color="#18806C" mode="hex" fade interval="31" elevation="11" intensity="1.67" intense>Anything you want!</VueGlow>
Props
| Prop | Effect | Default |
|---|---|---|
| color | Changes the color of the glow. Can either be a color name, hex, a RGB dict, HSL dict, or HSV dict. | “red” |
| elevation | Changes the elevation effect of the glow. Can be a number between 0-24. | 12 |
| intensity | Customize the intensity of the glow. Can be a number between 0-4. | 1 |
| intense | Doubles the intensity of the glow. | false |
| rounded | Allows a border radius to be specified. | 4px |
| tile | No border radius. | false |
| disabled | Disables the glow effect. Disabling will pause any animation. | false |
Grow Effect To Elements, Vue Glow Plugin/Github
See Demo And Download
Official Website(awtkns): Click Here
This superior jQuery/javascript plugin is developed by awtkns. For extra Advanced Usages, please go to the official website.
