Tachyons Typography Text Transform
Tachyons toolkit is a free and open-source CSS toolkit that is used to create a responsive website. In this article, we will learn how to transform text using the Tachyons toolkit.
Tachyons Typography Text Transform is used to change the capitalization of the text.
Syntax:
<element-name class="class-name">
...
</element-name>
Tachyons Typography Text Transform Classes:
- ttu: This class is used to convert any text to uppercase.
- ttl: This class is used to convert any text to lowercase.
- ttc: This class is used to capitalize multiple words.
Example 1: In the below example, we will convert lowercase text to uppercase text.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> </head> <body> <center> <h1 class="green"> w3wiki </h1> <h3 class="ttu tracked"> A computer science portal for Beginner </h3> </center> </body> </html> |
Output:
Example2: In the below code we will change the text from uppercase to lowercase.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> </head> <body> <center> <h1 class="green"> w3wiki </h1> <h3 class="ttl tracked"> A COMPUTER SCIENCE PORTAL FOR Beginner </h3> </center> </body> </html> |
Output:
Reference: https://tachyons.io/docs/typography/text-transform/