Tachyons toolkit is used to create a responsive website. In this article, we will learn how to define the opacity effect on our website using the Tachyons toolkit.
Opacity: It is the visibility effect that we can change according to our needs.
Syntax:
<element-name class="class-name">
...
</element-name>Tachyons Theming Opacity Classes:
- o-90: This class sets opacity with a 90 value of the enhancement.
- o-80: This class sets opacity with a 80 value of the enhancement.
- o-70: This class sets opacity with a 70 value of the enhancement.
- o-60: This class sets opacity with a 60 value of the enhancement.
- o-50: This class sets opacity with a 50 value of the enhancement.
- o-40: This class sets opacity with a 40 value of the enhancement.
- o-30: This class sets opacity with a 30 value of the enhancement.
- o-20: This class sets opacity with a 20 value of the enhancement.
- o-25: This class sets opacity with a 25 value of the enhancement.
- o-10: This class sets opacity with a 10 value of the enhancement.
- o-05: This class sets opacity with a 05 value of the enhancement.
Example 1: This code demonstrates the 0-90 class of Tachyons toolkit.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<style>
body {
text-align: center;
margin: 20px;
}
</style>
</head>
<body class="contain">
<img src=
alt="GFG image"
class="o-90" />
</body>
</html>
|
Output:
Example 2: This code demonstrates the 0-20 class of Tachyons toolkit.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<style>
body {
text-align: center;
margin: 20px;
}
</style>
</head>
<body class="contain">
alt="GFG image"
class="o-20" />
</body>
</html>
|
Output:
Reference: https://tachyons.io/docs/themes/opacity/