Interactive Box & Text Shadow Library – ShadowCSS

Category: CSS & CSS3 , Recommended | December 26, 2020
Author:omer571-sys
Views Total:223 views
Official Page:Go to website
Last Update:December 26, 2020
License:MIT

Preview:

Interactive Box & Text Shadow Library – ShadowCSS

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>

You Might Be Interested In:


Leave a Reply