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.

Platform  
css
   â”‚    Support  
Chromium supported
Firefox supported
Safari supported
Edge supported
Since  2.0.0
   â”‚   
Olivier Bossel
Olivier Bossel
   â”‚   
beta

  Preview

Depth default

s-depth:default
 

Loading code example. Please wait...

Depth 0

s-depth:0
 

Loading code example. Please wait...

Depth 5

s-depth:5
 

Loading code example. Please wait...

Depth 10

s-depth:10
 

Loading code example. Please wait...

Depth 20

s-depth:20
 

Loading code example. Please wait...

Depth 30

s-depth:30
 

Loading code example. Please wait...

Depth 40

s-depth:40
 

Loading code example. Please wait...

Depth 50

s-depth:50
 

Loading code example. Please wait...

Depth 60

s-depth:60
 

Loading code example. Please wait...

Depth 70

s-depth:70
 

Loading code example. Please wait...

Depth 80

s-depth:80
 

Loading code example. Please wait...

Depth 90

s-depth:90
 

Loading code example. Please wait...

Depth 100

s-depth:100
 

Loading code example. Please wait...

  Install

  CSS Classes

  1. s-depth:default

    Apply the depth default to any HTMLElement

  2. s-depth:text:default

    Apply the text depth default to any HTMLElement

  3. s-depth:box:default

    Apply the depth default to any HTMLElement

  4. s-depth:0

    Apply the depth 0 to any HTMLElement

  5. s-depth:text:0

    Apply the text depth 0 to any HTMLElement

  6. s-depth:box:0

    Apply the depth 0 to any HTMLElement

  7. s-depth:5

    Apply the depth 5 to any HTMLElement

  8. s-depth:text:5

    Apply the text depth 5 to any HTMLElement

  9. s-depth:box:5

    Apply the depth 5 to any HTMLElement

  10. s-depth:10

    Apply the depth 10 to any HTMLElement

  11. s-depth:text:10

    Apply the text depth 10 to any HTMLElement

  12. s-depth:box:10

    Apply the depth 10 to any HTMLElement

  13. s-depth:20

    Apply the depth 20 to any HTMLElement

  14. s-depth:text:20

    Apply the text depth 20 to any HTMLElement

  15. s-depth:box:20

    Apply the depth 20 to any HTMLElement

  16. s-depth:30

    Apply the depth 30 to any HTMLElement

  17. s-depth:text:30

    Apply the text depth 30 to any HTMLElement

  18. s-depth:box:30

    Apply the depth 30 to any HTMLElement

  19. s-depth:40

    Apply the depth 40 to any HTMLElement

  20. s-depth:text:40

    Apply the text depth 40 to any HTMLElement

  21. s-depth:box:40

    Apply the depth 40 to any HTMLElement

  22. s-depth:50

    Apply the depth 50 to any HTMLElement

  23. s-depth:text:50

    Apply the text depth 50 to any HTMLElement

  24. s-depth:box:50

    Apply the depth 50 to any HTMLElement

  25. s-depth:60

    Apply the depth 60 to any HTMLElement

  26. s-depth:text:60

    Apply the text depth 60 to any HTMLElement

  27. s-depth:box:60

    Apply the depth 60 to any HTMLElement

  28. s-depth:70

    Apply the depth 70 to any HTMLElement

  29. s-depth:text:70

    Apply the text depth 70 to any HTMLElement

  30. s-depth:box:70

    Apply the depth 70 to any HTMLElement

  31. s-depth:80

    Apply the depth 80 to any HTMLElement

  32. s-depth:text:80

    Apply the text depth 80 to any HTMLElement

  33. s-depth:box:80

    Apply the depth 80 to any HTMLElement

  34. s-depth:90

    Apply the depth 90 to any HTMLElement

  35. s-depth:text:90

    Apply the text depth 90 to any HTMLElement

  36. s-depth:box:90

    Apply the depth 90 to any HTMLElement

  37. s-depth:100

    Apply the depth 100 to any HTMLElement

  38. s-depth:text:100

    Apply the text depth 100 to any HTMLElement

  39. s-depth:box:100

    Apply the depth 100 to any HTMLElement

Bugs
are not our friends...

Don't hesitate to declare an issue if something does not works as expected.

Declare my issue on Github Talk about it on Discord

The more we are,
the stronger we become.

Don't hesitate to tell some words to you friends about us. The goal is to became more and more each days to help each others...

Support us on Patreon! Share on Facebook! Make a tweet!

The more we are,
the stronger we become.

Don't be afraid to join us on Discord.

Join us on discord!

We love,
Open source!

All of our codebase can be found on Github. We hope that you may contribute to help us make our tools even better!

Discover our codebase!

Welcome on