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= 
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> 
  
    <style> 
        body { 
            text-align: center; 
            margin: 20px; 
        } 
    </style> 
</head> 
  
<body class="contain"> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" 
        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= 
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> 
  
    <style> 
        body { 
            text-align: center; 
            margin: 20px; 
        } 
    </style> 
</head> 
  
<body class="contain"> 
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
        alt="GFG image"
        class="o-20" /> 
</body> 
  
</html> 