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=
</head>
<body>
<center>
<h1 class="green">
GeeksforGeeks
</h1>
<h3 class="ttu tracked">
A computer science portal for geeks
</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=
</head>
<body>
<center>
<h1 class="green">
GeeksforGeeks
</h1>
<h3 class="ttl tracked">
A COMPUTER SCIENCE PORTAL FOR GEEKS
</h3>
</center>
</body>
</html>
|
Output:
Reference: https://tachyons.io/docs/typography/text-transform/