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 =
< style >
body{
text-align:center;
}
</ style >
</ head >
< body >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< h3 >A computer science portal for geeks</ h3 >< br >
< h1 class = "shadow-1" >GeeksforGeeks</ 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 =
< style >
body{
text-align:center;
margin:12px;
}
</ style >
</ head >
< body >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< h3 >A computer science portal for geeks</ h3 >< br >
< h1 class = "shadow-1" >GeeksforGeeks</ h1 >
< h1 class = "shadow-2" >GeeksforGeeks</ h1 >
< h1 class = "shadow-3" >GeeksforGeeks</ h1 >
< h1 class = "shadow-4" >GeeksforGeeks</ h1 >
</ body >
</ html >
|
Output:
Reference: https://tachyons.io/docs/themes/box-shadow/
Last Updated :
05 Jul, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...