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 =
</ 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/
Last Updated :
20 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...