In this article, we will learn how to include a skin animation theme to the website by using the Tachyons toolkit. Tachyon is a toolkit which is used to create a responsive website.
Skins Animations: It is used to set any colour from the _colors.css file to style text and background colours for hover and focus states.
Syntax:
<element-name class="class-name">...</element-name>
Classes Used:
Change text colour on hover:
- hover-black: This class is used to set the “black” colour on the hover.
- hover-near-black: This class is used to set the “near-black” colour on the hover.
- hover-dark-gray: This class is used to set the “dark-grey” colour on the hover.
- hover-mid-gray: This class is used to set the “mid-grey” colour on the hover.
- hover-gray: This class is used to set the “grey” colour on the hover.
- hover-silver: This class is used to set the “silver” colour on the hover.
- hover-light-silver: This class is used to set the “light-silver” colour on the hover.
- hover-moon-gray: This class is used to set the “moon-grey” colour on the hover.
- hover-light-gray: This class is used to set the “light-grey” colour on the hover.
- hover-near-white: This class is used to set the “near-white” colour on the hover.
- hover-white: This class is used to set the “white” colour on the hover.
- hover-transparent: This class is used to set the “transparent” colour on the hover.
- hover-dark-red: This class is used to set the “dark-red” colour on the hover.
- hover-red: This class is used to set the “red” colour on the hover.
- hover-light-red: This class is used to set the “light-red” colour on the hover.
- hover-orange: This class is used to set the “orange” colour on the hover.
- hover-gold: This class is used to set the “gold” colour on the hover.
- hover-yellow: This class is used to set the “yellow” colour on the hover.
- hover-light-yellow: This class is used to set the “light-yellow” colour on the hover.
- hover-purple: This class is used to set the “purple” colour on the hover.
- hover-light-purple: This class is used to set the “light-purple” colour on the hover.
- hover-dark-pink: This class is used to set the “dark-pink” colour on the hover.
- hover-hot-pink: This class is used to set the “hot-pink” colour on the hover.
- hover-pink: This class is used to set the “pink” colour on the hover.
- hover-light-pink: This class is used to set the “light-pink” colour on the hover.
- hover-dark-green: This class is used to set the “dark-green” colour on the hover.
- hover-green: This class is used to set the “green” colour on the hover.
- hover-light-green: This class is used to set the “light-green” colour on the hover.
- hover-navy: This class is used to set the “navy” colour on the hover.
- hover-dark-blue: This class is used to set the “dark-blue” colour on the hover.
- hover-blue: This class is used to set the “blue” colour on the hover.
- hover-light-blue: This class is used to set the “light-blue” colour on the hover.
- hover-lightest-blue: This class is used to set the “lightest-blue” colour on the hover.
- hover-washed-blue: This class is used to set the “washed-green” colour on the hover.
- hover-washed-green: This class is used to set the “washed-green” colour on the hover.
- hover-washed-yellow: This class is used to set the “washed-yellow” colour on the hover.
- hover-washed-red: This class is used to set the “washed-red” colour on the hover.
Change background-color on hover:
- bg-animate hover-bg-black: This class is used to set the background to a “black” colour on the hover.
- bg-animate hover-bg-near-black: This class is used to set the background to a “near-black” colour on the hover.
- bg-animate hover-bg-dark-gray: This class is used to set the background to a “dark-grey” colour on the hover.
- bg-animate hover-bg-mid-gray: This class is used to set the background to a “mid-grey” colour on the hover.
- bg-animate hover-bg-gray: This class is used to set the background to a “grey” colour on the hover.
- bg-animate hover-bg-silver: This class is used to set the background to a “silver” colour on the hover.
- bg-animate hover-bg-light-silver: This class is used to set the background to a “light-silver” colour on the hover.
- bg-animate hover-bg-moon-gray: This class is used to set the background to a “moon-grey” colour on the hover.
- bg-animate hover-bg-light-gray: This class is used to set the background to a “light-grey” colour on the hover.
- bg-animate hover-bg-near-white: This class is used to set the background to a “near-white” colour on the hover.
- bg-animate hover-bg-white: This class is used to set the background to a “white” colour on the hover.
- bg-animate hover-bg-transparent: This class is used to set the background to a “transparent” colour on the hover.
- bg-animate hover-bg-dark-red: This class is used to set the background to a “dark-red” colour on the hover.
- bg-animate hover-bg-red: This class is used to set the background to a “red” colour on the hover.
- bg-animate hover-bg-light-red: This class is used to set the background to a “light-red” colour on the hover.
- bg-animate hover-bg-orange: This class is used to set the background to “orange” colour on the hover.
- bg-animate hover-bg-gold: This class is used to set the background to a “gold” colour on the hover.
- bg-animate hover-bg-yellow: This class is used to set the background to a “yellow” colour on the hover.
- bg-animate hover-bg-light-yellow: This class is used to set the background to a “light-yellow” colour on the hover.
- bg-animate hover-bg-purple: This class is used to set the background to a “purple” colour on the hover.
- bg-animate hover-bg-light-purple: This class is used to set the background to a “light-purple” colour on the hover.
- bg-animate hover-bg-dark-pink: This class is used to set the background to a “dark-pink” colour on the hover.
- bg-animate hover-bg-hot-pink: This class is used to set the background to a “hot-pink” colour on the hover.
- bg-animate hover-bg-pink: This class is used to set the background to a “pink” colour on the hover.
- bg-animate hover-bg-light-pink: This class is used to set the background to a “light-pink” colour on the hover.
- bg-animate hover-bg-dark-green: This class is used to set the background to a “dark-green” colour on the hover.
- bg-animate hover-bg-green: This class is used to set the background to “green” colour on the hover.
- bg-animate hover-bg-light-green: This class is used to set the background to a “dark-green” colour on the hover.
- bg-animate hover-bg-navy: This class is used to set the background to a “navy” colour on the hover.
- bg-animate hover-bg-dark-blue: This class is used to set the background to a “dark-blue” colour on the hover.
- bg-animate hover-bg-blue: This class is used to set the background to a “blue” colour on the hover.
- bg-animate hover-bg-light-blue: This class is used to set the background to a “light-blue” colour on the hover.
- bg-animate hover-bg-lightest-blue: This class is used to set the background to a “lightest-blue” colour on the hover.
- bg-animate hover-bg-washed-blue: This class is used to set the background to a “washed-blue” colour on the hover.
- bg-animate hover-bg-washed-green: This class is used to set the background to a “washed-green” colour on the hover.
- bg-animate hover-bg-washed-yellow: This class is used to set the background to a “washed-yellow” colour on the hover.
- bg-animate hover-bg-washed-red: This class is used to set the background to a “washed-red” colour on the hover.
Example 1: In the below example, we will make use of the hover-black class that will change the colour of the text to black on the hover.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<style>
body{
text-align:center;
margin:50px;
}
</style>
</head>
<body>
<h1 class="green">GeeksforGeeks</h1>
<h3 class="bg-green ba hover-black">
A computer science portal for geeks</h3>
<a href="#" class="link b blue hover-black">
GeeksforGeeks</a>
</body>
</html>
|
Output:
Example 2: In the below example, we will make use of hover-bg-black that will change the background on hover.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<style>
body{
text-align:center;
margin:50px;
}
</style>
</head>
<body>
<h1 class="green">GeeksforGeeks</h1>
<h3 class="bg-green ba hover-black">
A computer science portal for geeks</h3>
<a href="#" class="link b blue bg-animate hover-bg-black">
GeeksforGeeks</a>
</body>
</html>
|
Output:
Reference: https://tachyons.io/docs/themes/skins-pseudo/