Author: | omer571-sys |
---|---|
Views Total: | 223 views |
Official Page: | Go to website |
Last Update: | December 26, 2020 |
License: | MIT |
Preview:

Description:
A CSS only shadow library that applies customizable interactive shadows to block elements and text.
Shadow size and position can be customized via CSS classes.
How to use it:
1. Import the ShadowCSS into the document.
<link rel="stylesheet" href="shadow.min.css" />
2. Apply a smooth shadow to block elements. Possible configuration classes:
- box-shadow: Required
- centered-smooth-sm
- centered-smooth-md
- centered-smooth-lg
- top-left-smooth
- top-smooth
- top-right-smooth
- bottom-left-smooth
- bottom-smooth
- bottom-right-smooth
- animation: With hover animations
- animation-top-left
- animation-top
- animation-top-right
- animation-bottom-left
- animation-bottom
- animation-bottom-right
<div class="box-shadow centered-smooth-sm"> Smooth Shadows </div>
3. Apply a sharp shadow to block elements. Possible configuration classes:
- box-shadow: Required
- centered-sharp-sm
- centered-sharp-md
- centered-sharp-lg
- top-left-sharp
- top-sharp
- top-right-sharp
- bottom-left-sharp
- bottom-sharp
- bottom-right-sharp
- animation: With hover animations
- animation-top-left
- animation-top
- animation-top-right
- animation-bottom-left
- animation-bottom
- animation-bottom-right
<div class="box-shadow top-sharp">Sharp Shadows</div>
4. Apply a square shadow to block elements. Possible configuration classes:
- box-shadow: Required
- top-left-square-sm
- top-square-sm
- top-right-square-sm
- bottom-left-square-sm
- bottom-square-sm
- bottom-right-square-sm
<div class="box-shadow top-left-square-sm">Square Shadow</div>
5. Apply a neon shadow to block elements. Possible configuration classes:
- box-shadow: Required
- neon-green
- neon-green-sm
- neon-green-md
- neon-green-lg
- neon-blue
- neon-blue-sm
- neon-blue-md
- neon-blue-lg
- neon-red
- neon-red-sm
- neon-red-md
- neon-red-lg
<div class="box-shadow neon-green-sm">NEON Shadow</div>
6. Apply a fancy shadow to text. Possible shadow effects:
- neon
- flaming
- glowing
- outline
- retro
- floating
- blocks
<div class="text-shadow neon">Shadow</div> <div class="text-shadow flaming">Shadow</div> <div class="text-shadow glowing">Shadow</div> <div class="text-shadow outline">Shadow</div> <div class="text-shadow retro">Shadow</div> <div class="text-shadow floating">Shadow</div> <div class="text-shadow blocks">Shadow</div>