En este artículo, aprenderemos cómo aplicar temas utilizando el kit de herramientas Tachyons . Tachyons es un conjunto de herramientas CSS que se utiliza para crear un sitio web receptivo. La creación de temas es la capacidad de diseñar varios elementos de nuestro sitio web de manera diferente según el contexto, sin dejar de mantener el atractivo visual.
Las categorías ofrecidas por temas se enumeran a continuación:
- Máscaras: Esto se usa para establecer el color del texto y el color del fondo.
- Animación de máscaras: esto se usa para establecer el color del archivo _colors.css para diseñar el texto y los colores de fondo para los estados de enfoque y desplazamiento.
- Desplazamientos: Esto se utiliza para proporcionar un efecto de desplazamiento al colocar un cursor sobre cualquier elemento.
- Tamaño del fondo: se utiliza para establecer el tamaño del fondo.
- Borde: Esto se utiliza para proporcionar un borde a un elemento.
- Radio del borde: se utiliza para proporcionar el estilo de borde redondeado al elemento.
- Box Shadow: Esto se utiliza para proporcionar el efecto de sombra al elemento.
- Opacidad: Esto se utiliza para proporcionar el efecto de opacidad a un elemento.
Sintaxis:
<element-name class="class-name">...</element-name>
Ejemplo 1: En este ejemplo, usaremos temas de máscara que se usan para establecer el color del texto y el color del fondo.
HTML
<!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: 10px;
}
</style>
</head>
<body>
<h1 class="green">GeeksforGeeks</h1>
<h3 class="bg-green">
A computer science portal for geeks
</h3>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, usaremos temas de borde que se usan para proporcionar un borde a un elemento.
HTML
<!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">
A computer science portal for geeks
</h3>
</body>
</html>
Producción:
Referencia: http://tachyons.io/docs/#theming
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA