Aspectos temáticos de taquiones

En este artículo, aprenderemos cómo se puede usar el tema de la piel en el sitio web usando el kit de herramientas Tachyons . Tachyons es un conjunto de herramientas que se utiliza para crear un sitio web receptivo. Las máscaras se utilizan para establecer el color del texto y el color del fondo.

Sintaxis:

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

Tachyons Theming Skins Clases utilizadas:

Clases de color de texto:

• black: esta clase se utiliza para establecer el color «negro».
• casi negro: esta clase se utiliza para establecer el color «casi negro».
• gris oscuro: esta clase se utiliza para establecer el color «gris oscuro».
• mid-gray: Esta clase se utiliza para establecer el color “mid-grey”.
• gris: esta clase se utiliza para establecer el color «gris».
• plata: Esta clase se utiliza para establecer el color «plata».
• light-silver: Esta clase se utiliza para establecer el color “light-silver”.
• moon-gray: Esta clase se utiliza para establecer el color “moon-grey”.
• gris claro: esta clase se utiliza para establecer el color «gris claro».
• casi blanco: esta clase se utiliza para establecer el color «casi blanco».
• blanco: Esta clase se utiliza para establecer el color «blanco».
• transparente: esta clase se utiliza para establecer el color «transparente».
• rojo oscuro : esta clase se usa para establecer el color «rojo oscuro»
• rojo: esta clase se utiliza para establecer el color «rojo» al pasar el mouse.
• rojo claro: esta clase se utiliza para establecer el color «rojo claro».
• naranja: esta clase se utiliza para establecer el color «naranja».
• gold: esta clase se utiliza para establecer el color «dorado».
• amarillo: esta clase se utiliza para establecer el color «amarillo».
• amarillo claro: esta clase se utiliza para establecer el color «amarillo claro».
• púrpura: Esta clase se utiliza para establecer el color «púrpura».
• light-purple: Esta clase se utiliza para configurar el “light-purple”.
• rosa oscuro: esta clase se utiliza para establecer el color «rosa oscuro».
• hot-pink: esta clase se utiliza para establecer el color «hot-pink».
• rosa: esta clase se utiliza para establecer el color «rosa».
• rosa claro: esta clase se utiliza para establecer el color «rosa claro».
• verde oscuro: esta clase se utiliza para establecer el color «verde oscuro».
• green: Esta clase se utiliza para establecer el color «verde».
• verde claro: esta clase se utiliza para configurar el «verde claro».
• azul marino: esta clase se utiliza para establecer el color «azul marino».
• azul oscuro: esta clase se utiliza para establecer el color «azul oscuro».
• azul: esta clase se utiliza para establecer el color «azul».
• azul claro: esta clase se utiliza para establecer el color «azul claro».
• lightest-blue: esta clase se utiliza para establecer el color «más claro-azul».
• wash-blue: Esta clase se utiliza para establecer el color “washed-green”.
• wash-green: Esta clase se utiliza para establecer el color “washed-green”.
• wash-yellow: Esta clase se usa para establecer el color “washed-yellow”.
• wash-red: Esta clase se utiliza para establecer el color “washed-red”.

Clases de color de fondo:

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

Nota: Hay más colores que puede usar para cambiar las máscaras de temas de Tachyons. Compruebe el enlace de referencia en la parte inferior.

A continuación se muestran ejemplos que ilustran las máscaras de temas Tachyons :

Ejemplo 1: En este ejemplo, la clase de color amarillo claro se utiliza para el texto.

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 class="light-yellow">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
</body>
  
</html>

Producción:

 

Ejemplo 2: En este ejemplo, la clase verde se usa para el texto y la clase bg-light-yellow se usa para el fondo.

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 class="green bg-light-yellow">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
</body>
  
</html>

Producción:

 

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