Shadow
The shadow is the way to represent the layer of the tui components. This is used in the window, panel, Button, etc by default. You can change the shadow size, shadow position or remove it using the following classes.
These are some examples for component:
<!-- Put shadow in some element -->
<div class="tui-shadow">
...
</div>
<!-- Put shadow left in some element -->
<div class="tui-shadow-left">
...
</div>
<!-- Change the shadow size of some window -->
<div class="tui-window tui-shadow-3">
<fieldset class="tui-fieldset">
<legend>Window</legend>
...
</fieldset>
</div>
<!-- Remove the shadow of some window -->
<div class="tui-window tui-no-shadow">
<fieldset class="tui-fieldset">
<legend>Window</legend>
...
</fieldset>
</div>This is the table with available classes for this component.
| Class | Description |
|---|---|
.tui-shadow |
Alias for tui-shadow-1
|
.tui-shadow-left |
Alias for tui-shadow-left-1
|
.tui-shadow-1 |
Creates a right shadow with 10px |
.tui-shadow-2 |
Creates a right shadow with 15px |
.tui-shadow-3 |
Creates a right shadow with 20px |
.tui-shadow-4 |
Creates a right shadow with 25px |
.tui-shadow-5 |
Creates a right shadow with 30px |
.tui-shadow-left-1 |
Creates a left shadow with 10px |
.tui-shadow-left-2 |
Creates a left shadow with 15px |
.tui-shadow-left-3 |
Creates a left shadow with 20px |
.tui-shadow-left-4 |
Creates a left shadow with 25px |
.tui-shadow-left-5 |
Creates a left shadow with 30px |
.tui-no-shadow |
Removes the shadow of the element |