Modules

Shadow

This module helps to create shadows for elements.

Usage #

Superkube has several levels of shadows by default. Use the sh-{size} class to set the element's shadow.

100
150
200
250
300
350

<div class="sh-100"></div>
<div class="sh-150"></div>
<div class="sh-200"></div>
<div class="sh-250"></div>
<div class="sh-300"></div>
<div class="sh-350"></div>

Custom #

Override the value of the shadow variable to change it or add a new modifier with sh- prefix to create a new shadow.


// change
.sh-300 {
    --shadow: 0 10px 20px rgba(0, 0, 0, .3);
}

// add
.sh-400 {
    --shadow: 0 30px 80px rgba(0, 0, 0, .1);
}

As a result, the default shadow 300 will get a new value, and the new sh-400 modifier can be used in HTML.


<div class="sh-400">...</div>

Turn off #

Use the sh-off class to turn off the shadow of the element.


<div class="item sh-off">...</div>