Tachyons Theming Opacity
Last Updated :
08 Jun, 2022
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/
Share your thoughts in the comments
Please Login to comment...