Tachyons Toolkit es gratuito y de código abierto que se utiliza para crear un sitio web receptivo. En este artículo, aprenderemos cómo incluir elementos usando el kit de herramientas Tachyons.
Los elementos Tachyons se utilizan para insertar imágenes, listas, enlaces, formularios y tablas.
El número total de elementos se muestra a continuación.
- Imágenes: Este elemento se utiliza para incluir imágenes en la página web.
- Enlaces: Este elemento se utiliza para incluir enlaces en la página web.
- Listas: Este elemento se utiliza para incluir listas en la página web.
- Formularios: Este elemento se utiliza para incluir formularios en la página web.
- Tablas: Este elemento se utiliza para incluir tablas en la página web.
Clases utilizadas:
- Imágenes: no hay clases predefinidas que los taquiones proporcionen para esto, necesitamos usar la clase de ancho para corregir el ancho de las imágenes cargadas.
- Enlaces:
- link underline blue hover-orange: esta clase se utiliza para proporcionar un enlace azul subrayado que se vuelve naranja al pasar el mouse.
- link underline-hover red: esta clase se usa para agregar un subrayado al pasar el mouse y enfocar.
- dim: esta clase se usa para atenuar un enlace al pasar el mouse.
- link black hover-bg-light-blue: esta clase se usa para agregar cualquier color de fondo del módulo skins-pseudo.
- link black bg-animate hover-bg-light-blue: esta clase se usa para agregar cualquier color de fondo del módulo skins-pseudo.
- link dim black: esta clase se utiliza para proporcionar un efecto de «oscuro negro» al enlace.
- enlace tenue casi negro: esta clase se utiliza para proporcionar un efecto de «tenue casi negro» al enlace.
- link dim dark-gray: Esta clase se utiliza para proporcionar un efecto de «dim dark-grey» al enlace.
- link dim mid-gray: esta clase se utiliza para proporcionar un efecto de «dim mid-gray» al enlace.
- link dim gray: esta clase se utiliza para proporcionar un efecto de «tenue gray» al enlace.
- link dim black-90: esta clase se utiliza para proporcionar un efecto de «dim black-90» al enlace.
- link dim black-80: esta clase se utiliza para proporcionar un efecto de «dim black-80» al enlace.
- link dim black-70: esta clase se utiliza para proporcionar un efecto de «dim black-70» al enlace.
- link dim black-60: esta clase se utiliza para proporcionar un efecto de «dim black-60» al enlace.
- link dim black-50: esta clase se utiliza para proporcionar un efecto de «dim black-50» al enlace.
- link azul marino tenue: esta clase se utiliza para proporcionar un efecto de «azul marino tenue» al enlace.
- link dim dark-blue: esta clase se utiliza para proporcionar un efecto de «tenue dark-blue» al enlace.
- link dim blue: esta clase se utiliza para proporcionar un efecto de «azul tenue» al enlace.
- link dim dark-red: esta clase se utiliza para proporcionar un efecto de «dim dark-red» al enlace
- Liza:
- pl0: esta clase se utiliza para eliminar las viñetas predeterminadas de las listas ordenadas y desordenadas .
- Formularios:
- input-reset: esta clase se utiliza para restablecer los estilos predeterminados en un elemento.
- Tablas: no hay clases predefinidas que los taquiones proporcionen para esto, necesitamos usar la clase de ancho para arreglar el ancho de la tabla cargada.
Sintaxis:
<element class="<element-class-name>">
...
</element>
Ejemplo 1: en el siguiente código, utilizaremos el elemento de enlace para incluir un enlace.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<h3 style="text-align:center;">
A computer science portal for geeks</h3>
<div>
<a href="#" class="link underline blue hover-orange">
link text</a>
</div>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente código, utilizaremos el elemento de formulario para incluir el formulario en la página web.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://unpkg.com/tachyons/css/tachyons.min.css"> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Tachyons Element Forms </h3> <form> First Name: <input class="input-reset" type="text" /><br><br> Last Name: <input class="input-reset" type="text" /> </form> </center> </body> </html>
Producción:
Referencia: https://tachyons.io/docs/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA