Shadows
Multiple types of shadows
Box shadows
To use box shadows, simply add .shadow-1 to
.shadow-5 to get different shadows.
.shadow-0 remove all box-shadows of the element.
Hoverable
Hoverable classes are usefull to create an easy and nice effect when you hover an element.
Use the .hoverable- class followed by 1 to 5.
We recommand to use
.hoverable-1 on a .shadow-1 element,
.hoverable-2 on a .shadow-2 element...
.shadow-0 .hoverable-1
.shadow-1 .hoverable-1
.shadow-2 .hoverable-2
.shadow-3 .hoverable-3
.shadow-4 .hoverable-4
.shadow-5 .hoverable-5
Light shadows
We created light shadows classes to make you able to choose between two types of shadows, depending on your website
design.
To use them, simply add the .light- prefix to the basic shadows classes.
Light hoverable
Light hoverable classes are working exactly like the normal .hoverable class.
To use the light ones, type the .light-hoverable- class followed by 1 to 5.
We recommand to use
.light-hoverable-1 on a .light-shadow-1 element,
.light-hoverable-2 on a
.light-shadow-2 element...
.light-shadow-0 .light-hoverable-1
.light-shadow-1 .light-hoverable-1
.light-shadow-2 .light-hoverable-2
.light-shadow-3 .light-hoverable-3
.light-shadow-4 .light-hoverable-4
.light-shadow-5 .light-hoverable-5
Drop shadows
These shadows are especially made for content like PNG logos. To use it, add the
.dropshadow-1 to .dropshadow-5 classes to your
img.
.dropshadow-0 remove all drop-shadows of the element.
Text shadows
To use text-shadow, add the .textshadow-1 to
.textshadow-4 classes to get different shadows on your text.
.textshadow-0 remove all text-shadows of the element.
