Open In App

Tachyons Theming Box Shadow

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads