GLASSIFY

glassify your HTML components!

HOW TO USE:

1. To install the package using NPM use the following command npm install glassify
2. To use the CSS from Glassify that was installed from NPM, import it directly in src/style.css or src/style.scss @import url('glassify/styles.css');

NPM Link:

https://www.npmjs.com/package/glassify

Simple Glass effect usage:

use css class glassify in css styles

<div class="glassify">
    Random HTML here!
</div>

Dark Glass effect usage:

use css class glassify-dark to make the glass darker

<div class="glassify glassify-dark">
  Random HTML in a dark glass!
</div>

Glass Shapes

import shapes like star, arrows and message boxes with simple css:

css classes for shapes:

• glassify-star for Star
• glassify-left for Left Arrow
• glassify-right for Right Arrow
• glassify-cicle for Circle
• glassify-message for message box

• Use any of the above CSS classes along with glassify-shapes to transform your HTML div into a shape

Usage:

<div class="glassify-shapes {{css class}}"></div>

The Final Result will look like this:

To use shapes with a dark tint use glassify-dark class along with the shapes class.

Example:

<div class="glassify-shapes glassify-star glassify-dark"></div>