Home Documentation
Getting started General
Components
Forms
Utilities
Sass Plugins
Check changelog.
1.0.0-beta.2

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.

Shadow-0
Shadow-1
Shadow-2
Shadow-3
Shadow-4
Shadow-5

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...

Header
.shadow-0
.hoverable-1
Header
.shadow-1
.hoverable-1
Header
.shadow-2
.hoverable-2
Header
.shadow-3
.hoverable-3
Header
.shadow-4
.hoverable-4
Header
.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-shadow-0
Light-shadow-1
Light-shadow-2
Light-shadow-3
Light-shadow-4
Light-shadow-5

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...

Header
.light-shadow-0
.light-hoverable-1
Header
.light-shadow-1
.light-hoverable-1
Header
.light-shadow-2
.light-hoverable-2
Header
.light-shadow-3
.light-hoverable-3
Header
.light-shadow-4
.light-hoverable-4
Header
.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.

Xelzs Logo
Xelzs Logo
Xelzs Logo
Xelzs Logo
Xelzs Logo
Xelzs Logo

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.

textshadow-0
textshadow-1
textshadow-2
textshadow-3
textshadow-4