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/