Shadows

it is a style which allow your other components to look like neumorphism.

Flat shadow #

by putting .n-flat class on any element, it will transform the element into a flat on top. adding suffix -low in class will display low bulge.

<div class="n-flat-low circle-eg"></div><br/>
<div class="n-flat-low rectangle-eg"></div><br/>
<div class="n-flat circle-eg"></div><br/>
<div class="n-flat rectangle-eg"></div>

Concave shadow #

by putting .n-concave class on any element, it will transform the element into a concave on top. adding suffix -low in class will display low bulge.

<div class="n-concave-low circle-eg"></div><br/>
<div class="n-concave-low rectangle-eg"></div><br/>
<div class="n-concave circle-eg"></div><br/>
<div class="n-concave rectangle-eg"></div>

Convex shadow #

by putting .n-convex class on any element, it will transform the element into a convex on top. adding suffix -low in class will display low bulge.

<div class="n-convex-low circle-eg"></div><br/>
<div class="n-convex-low rectangle-eg"></div><br/>
<div class="n-convex circle-eg"></div><br/>
<div class="n-convex rectangle-eg"></div>

Engrave shadow #

by putting .n-engrave class on any element, it will transform the element into a engrave platform. adding suffix -low in class will display low bulge.

<div class="n-engrave-low circle-eg"></div><br/> 
<div class="n-engrave-low rectangle-eg"></div><br/>
<div class="n-engrave circle-eg"></div><br/> 
<div class="n-engrave rectangle-eg"></div>

Float shadow #

by putting .n-float class on any element, it will transform the element into a floating platform. adding suffix -low in class will display low bulge.

<div class="n-float-low circle-eg"></div><br/> 
<div class="n-float-low rectangle-eg"></div><br/> 
<div class="n-float circle-eg"></div><br/> 
<div class="n-float rectangle-eg"></div>

Hover shadow #

by putting word hover before the name of shadow e.g. .n-hover-flat, it will transition into that shadow.

<div class="n-flat-low n-hover-engrave-low circle-eg"></div>
<div class="n-engrave n-hover-flat circle-eg"></div>   
<div class="n-float-low n-hover-convex-low circle-eg"></div>
<div class="n-convex n-hover-float circle-eg"></div>
<div class="n-concave-low n-hover-no-shadow circle-eg"></div>
<div class="n-engrave-low n-hover-concave-low circle-eg"></div>

No shadow #

it is use to display no shadow without losing animation.

<div class="n-no-shadow n-hover-flat-low circle-eg">
    <i class="mytabworks icon-anchor"/>
</div>
<div class="n-no-shadow n-hover-engrave-low circle-eg">
    <i class="mytabworks icon-ship"/>
</div>
<div class="n-no-shadow n-hover-concave-low circle-eg">
    <i class="mytabworks icon-globe"/>
</div>
<div class="n-no-shadow n-hover-convex-low circle-eg">
    <i class="mytabworks icon-bulb"/>
</div>
<div class="n-no-shadow n-hover-float-low circle-eg">
    <i class="mytabworks icon-paper-plane"/>
</div>
<br/><br/>
<div class="n-no-shadow n-hover-flat circle-eg">
    <i class="mytabworks icon-anchor"/>
</div>
<div class="n-no-shadow n-hover-engrave circle-eg">
    <i class="mytabworks icon-ship"/>
</div>
<div class="n-no-shadow n-hover-concave circle-eg">
    <i class="mytabworks icon-globe"/>
</div>
<div class="n-no-shadow n-hover-convex circle-eg">
    <i class="mytabworks icon-bulb"/>
</div>
<div class="n-no-shadow n-hover-float circle-eg">
    <i class="mytabworks icon-paper-plane"/>
</div>

DARK THEME

Shadows

Warning!