Tachyons Theming Box Shadow
Tachyons are a CSS toolkit that is used to design a responsive website using the tachyons classes. In this article, we will learn how to include box-shadow using the Tachyons toolkit. Box-shadow is the shadow of the box and we can define this shadow by using the Tachyons classes.
Used Classes:
- shadow-1: This class is used to create a box-shadow 4px from the bottom and 2px from the left side.
- shadow-2: This class is used to create a box-shadow 8px from the bottom and 2px from the left side.
- shadow-3: This class is used to create a box-shadow 2px from the top, 2px from the right, 4px from the bottom and 2px from the left side.
- shadow-4: This class is used to create a box-shadow 2px from the top, 2px from the right, 8px from the bottom and 0px from the left side.
- shadow-5: This class is used to create a box-shadow 4px from the top, 4px from the right, 8px from the bottom and 0px from the left side.
Syntax:
<element-name class="class-name"> ... </element-name>
Example 1: In the below code, we will make use of the shadow-1 class to demonstrate the box-shadow.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "https://unpkg.com/tachyons/css/tachyons.min.css" > < style > body{ text-align:center; } </ style > </ head > < body > < h1 style = "color:green;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ h3 >< br > < h1 class = "shadow-1" >w3wiki</ h1 > </ body > </ html > |
Output:
Example 2: In the below code, we will make use of the above classes to demonstrate the box-shadow.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "https://unpkg.com/tachyons/css/tachyons.min.css" > < style > body{ text-align:center; margin:12px; } </ style > </ head > < body > < h1 style = "color:green;" >w3wiki</ h1 > < h3 >A computer science portal for Beginner</ h3 >< br > < h1 class = "shadow-1" >w3wiki</ h1 > < h1 class = "shadow-2" >w3wiki</ h1 > < h1 class = "shadow-3" >w3wiki</ h1 > < h1 class = "shadow-4" >w3wiki</ h1 > </ body > </ html > |
Output:
Reference: https://tachyons.io/docs/themes/box-shadow/
Contact Us