Depth
These classes allows you to apply some depth shadows to any HTMLElement.
These depths are defined in the theme configuration under theme.depth
namespace.
Preview
Depth default
Loading code example. Please wait...
Depth 0
Loading code example. Please wait...
Depth 5
Loading code example. Please wait...
Depth 10
Loading code example. Please wait...
Depth 20
Loading code example. Please wait...
Depth 30
Loading code example. Please wait...
Depth 40
Loading code example. Please wait...
Depth 50
Loading code example. Please wait...
Depth 60
Loading code example. Please wait...
Depth 70
Loading code example. Please wait...
Depth 80
Loading code example. Please wait...
Depth 90
Loading code example. Please wait...
Depth 100
Loading code example. Please wait...
Install
CSS Classes
-
s-depth:default
Apply the depth default to any HTMLElement
-
s-depth:text:default
Apply the text depth default to any HTMLElement
-
s-depth:box:default
Apply the depth default to any HTMLElement
-
s-depth:0
Apply the depth 0 to any HTMLElement
-
s-depth:text:0
Apply the text depth 0 to any HTMLElement
-
s-depth:box:0
Apply the depth 0 to any HTMLElement
-
s-depth:5
Apply the depth 5 to any HTMLElement
-
s-depth:text:5
Apply the text depth 5 to any HTMLElement
-
s-depth:box:5
Apply the depth 5 to any HTMLElement
-
s-depth:10
Apply the depth 10 to any HTMLElement
-
s-depth:text:10
Apply the text depth 10 to any HTMLElement
-
s-depth:box:10
Apply the depth 10 to any HTMLElement
-
s-depth:20
Apply the depth 20 to any HTMLElement
-
s-depth:text:20
Apply the text depth 20 to any HTMLElement
-
s-depth:box:20
Apply the depth 20 to any HTMLElement
-
s-depth:30
Apply the depth 30 to any HTMLElement
-
s-depth:text:30
Apply the text depth 30 to any HTMLElement
-
s-depth:box:30
Apply the depth 30 to any HTMLElement
-
s-depth:40
Apply the depth 40 to any HTMLElement
-
s-depth:text:40
Apply the text depth 40 to any HTMLElement
-
s-depth:box:40
Apply the depth 40 to any HTMLElement
-
s-depth:50
Apply the depth 50 to any HTMLElement
-
s-depth:text:50
Apply the text depth 50 to any HTMLElement
-
s-depth:box:50
Apply the depth 50 to any HTMLElement
-
s-depth:60
Apply the depth 60 to any HTMLElement
-
s-depth:text:60
Apply the text depth 60 to any HTMLElement
-
s-depth:box:60
Apply the depth 60 to any HTMLElement
-
s-depth:70
Apply the depth 70 to any HTMLElement
-
s-depth:text:70
Apply the text depth 70 to any HTMLElement
-
s-depth:box:70
Apply the depth 70 to any HTMLElement
-
s-depth:80
Apply the depth 80 to any HTMLElement
-
s-depth:text:80
Apply the text depth 80 to any HTMLElement
-
s-depth:box:80
Apply the depth 80 to any HTMLElement
-
s-depth:90
Apply the depth 90 to any HTMLElement
-
s-depth:text:90
Apply the text depth 90 to any HTMLElement
-
s-depth:box:90
Apply the depth 90 to any HTMLElement
-
s-depth:100
Apply the depth 100 to any HTMLElement
-
s-depth:text:100
Apply the text depth 100 to any HTMLElement
-
s-depth:box:100
Apply the depth 100 to any HTMLElement