Animaciones Tachyons Theming Skins

En este artículo, aprenderemos cómo incluir un tema de animación de máscara en el sitio web utilizando el kit de herramientas Tachyons. Tachyon es un conjunto de herramientas que se utiliza para crear un sitio web receptivo. 

Animaciones de máscaras: se utiliza para establecer cualquier color del archivo _colors.css para diseñar el texto y los colores de fondo para los estados de enfoque y desplazamiento.

Sintaxis:

<element-name class="class-name">...</element-name>

Clases utilizadas:

Cambiar el color del texto al pasar el mouse:

• hover-black: esta clase se usa para establecer el color «negro» en el hover.
• hover-near-black: esta clase se usa para establecer el color «casi negro» en el hover.
• hover-dark-gray: esta clase se usa para establecer el color «gris oscuro» en el hover.
• hover-mid-gray: esta clase se usa para establecer el color «mid-grey» en el hover.
• hover-gray: esta clase se usa para establecer el color «gris» en el hover.
• hover-silver: esta clase se usa para establecer el color «plateado» en el hover.
• hover-light-silver: esta clase se usa para establecer el color «plata clara» en el hover.
• hover-moon-gray: esta clase se usa para establecer el color «moon-grey» en el hover.
• hover-light-gray: esta clase se usa para establecer el color «gris claro» en el hover.
• hover-near-white: esta clase se usa para establecer el color «casi blanco» en el hover.
• hover-white: esta clase se usa para establecer el color «blanco» en el hover.
• hover-transparent: esta clase se usa para establecer el color «transparente» en el hover.
• hover-dark-red: esta clase se usa para establecer el color «rojo oscuro» en el hover.
• hover-red: esta clase se usa para establecer el color «rojo» en el hover.
• hover-light-red: esta clase se usa para establecer el color «rojo claro» en el hover.
• hover-orange: esta clase se usa para establecer el color «naranja» en el hover.
• hover-gold: esta clase se usa para establecer el color «dorado» en el hover.
• hover-yellow: esta clase se usa para establecer el color «amarillo» en el hover.
• hover-light-yellow: esta clase se usa para establecer el color «amarillo claro» en el hover.
• hover-purple: esta clase se usa para establecer el color «púrpura» en el hover.
• hover-light-purple: esta clase se usa para establecer el color «púrpura claro» en el hover.
• hover-dark-pink: esta clase se usa para establecer el color «rosa oscuro» en el hover.
• hover-hot-pink: esta clase se usa para establecer el color «rosa intenso» en el hover.
• hover-pink: esta clase se usa para establecer el color «rosa» en el hover.
• hover-light-pink: esta clase se usa para establecer el color «rosa claro» en el hover.
• hover-dark-green: esta clase se usa para establecer el color «verde oscuro» en el hover.
• hover-green: esta clase se usa para establecer el color «verde» en el hover.
• hover-light-green: esta clase se usa para establecer el color «verde claro» en el hover.
• hover-navy: esta clase se usa para establecer el color «azul marino» en el hover.
• hover-dark-blue: esta clase se usa para establecer el color «azul oscuro» en el hover.
• hover-blue: esta clase se usa para establecer el color «azul» en el hover.
• hover-light-blue: esta clase se usa para establecer el color «azul claro» en el hover.
• hover-lightest-blue: esta clase se usa para establecer el color «azul más claro» en el hover.
• hover-washed-blue: esta clase se usa para establecer el color «washed-green» en el hover.
• hover-washed-green: esta clase se usa para establecer el color «washed-green» en el hover.
• hover-washed-yellow: esta clase se usa para establecer el color «washed-yellow» en el hover.
• hover-washed-red: esta clase se usa para establecer el color «washed-red» en el hover.

Cambiar el color de fondo al pasar el mouse:

• bg-animate hover-bg-black: esta clase se usa para establecer el fondo en un color «negro» al pasar el mouse.
• bg-animate hover-bg-near-black: esta clase se usa para establecer el fondo en un color «casi negro» al pasar el mouse.
• bg-animate hover-bg-dark-gray: esta clase se usa para establecer el fondo en un color «gris oscuro» al pasar el mouse.
• bg-animate hover-bg-mid-gray: esta clase se usa para establecer el fondo en un color «gris medio» al pasar el mouse.
• bg-animate hover-bg-gray: esta clase se usa para establecer el fondo en un color «gris» al pasar el mouse.
• bg-animate hover-bg-silver: esta clase se usa para establecer el fondo en un color «plateado» al pasar el mouse.
• bg-animate hover-bg-light-silver: esta clase se usa para establecer el fondo en un color «plata claro» al pasar el mouse.
• bg-animate hover-bg-moon-gray: esta clase se usa para establecer el fondo en un color «gris luna» al pasar el mouse.
• bg-animate hover-bg-light-gray: esta clase se usa para establecer el fondo en un color «gris claro» al pasar el mouse.
• bg-animate hover-bg-near-white: esta clase se usa para establecer el fondo en un color «casi blanco» al pasar el mouse.
• bg-animate hover-bg-white : esta clase se usa para establecer el fondo en un color «blanco» al pasar el mouse.
• bg-animate hover-bg-transparent: esta clase se usa para establecer el fondo en un color «transparente» al pasar el mouse.
• bg-animate hover-bg-dark-red: esta clase se usa para establecer el fondo en un color «rojo oscuro» al pasar el mouse.
• bg-animate hover-bg-red: esta clase se usa para establecer el fondo en un color «rojo» al pasar el mouse.
• bg-animate hover-bg-light-red: esta clase se usa para establecer el fondo en un color «rojo claro» al pasar el mouse.
• bg-animate hover-bg-orange: esta clase se usa para establecer el fondo en color «naranja» al pasar el mouse.
• bg-animate hover-bg-gold: esta clase se usa para establecer el fondo en un color «dorado» al pasar el mouse.
• bg-animate hover-bg-yellow: esta clase se usa para establecer el fondo en un color «amarillo» al pasar el mouse.
• bg-animate hover-bg-light-yellow: esta clase se usa para establecer el fondo en un color «amarillo claro» al pasar el mouse.
• bg-animate hover-bg-purple: esta clase se usa para establecer el fondo en un color «púrpura» al pasar el mouse.
• bg-animate hover-bg-light-purple: esta clase se usa para establecer el fondo en un color «púrpura claro» al pasar el mouse.
• bg-animate hover-bg-dark-pink: esta clase se usa para establecer el fondo en un color «rosado oscuro» al pasar el mouse.
• bg-animate hover-bg-hot-pink: esta clase se usa para establecer el fondo en un color «rosa intenso» al pasar el mouse.
• bg-animate hover-bg-pink: esta clase se usa para establecer el fondo en un color «rosa» al pasar el mouse.
• bg-animate hover-bg-light-pink: esta clase se usa para establecer el fondo en un color «rosa claro» al pasar el mouse.
• bg-animate hover-bg-dark-green: esta clase se usa para establecer el fondo en un color «verde oscuro» al pasar el mouse.
• bg-animate hover-bg-green: esta clase se usa para establecer el fondo en color «verde» al pasar el mouse.
• bg-animate hover-bg-light-green: esta clase se usa para establecer el fondo en un color «verde oscuro» al pasar el mouse.
• bg-animate hover-bg-navy: esta clase se usa para establecer el fondo en un color «azul marino» al pasar el mouse.
• bg-animate hover-bg-dark-blue: esta clase se usa para establecer el fondo en un color «azul oscuro» al pasar el mouse.
• bg-animate hover-bg-blue: esta clase se usa para establecer el fondo en un color «azul» al pasar el mouse.
• bg-animate hover-bg-light-blue: esta clase se usa para establecer el fondo en un color «azul claro» al pasar el mouse.
• bg-animate hover-bg-lightest-blue: esta clase se usa para establecer el fondo en un color «azul más claro» al pasar el mouse.
• bg-animate hover-bg-washed-blue: esta clase se usa para configurar el fondo en un color «azul lavado» al pasar el mouse.
• bg-animate hover-bg-washed-green: esta clase se usa para configurar el fondo en un color «verde lavado» al pasar el mouse.
• bg-animate hover-bg-washed-yellow: esta clase se usa para configurar el fondo en un color «amarillo lavado» al pasar el mouse.
• bg-animate hover-bg-washed-red: esta clase se usa para establecer el fondo en un color «lavado-rojo» al pasar el mouse.

Ejemplo 1: En el siguiente ejemplo, haremos uso de la clase hover-black que cambiará el color del texto a negro al pasar el mouse.

<!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: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>

Producción:

 

Ejemplo 2: En el siguiente ejemplo, utilizaremos hover-bg-black que cambiará el fondo al pasar el mouse.

<!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: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>

Producción:

 

Referencia: https://tachyons.io/docs/themes/skins-pseudo/