Los taquiones son un conjunto de herramientas de CSS que se utiliza para diseñar un sitio web receptivo utilizando las clases de taquiones. En este artículo, aprenderemos cómo incluir box-shadow usando el kit de herramientas Tachyons. Box-shadow es la sombra de la caja y podemos definir esta sombra usando las clases Tachyons.
Clases usadas:
- shadow-1: esta clase se usa para crear una sombra de cuadro de 4px desde la parte inferior y 2px desde el lado izquierdo.
- shadow-2: esta clase se usa para crear una sombra de cuadro de 8 px desde la parte inferior y 2 px desde el lado izquierdo.
- shadow-3: esta clase se usa para crear un box-shadow de 2px desde la parte superior, 2px desde la derecha, 4px desde la parte inferior y 2px desde el lado izquierdo.
- shadow-4: esta clase se usa para crear un box-shadow de 2 px desde la parte superior, 2 px desde la derecha, 8 px desde la parte inferior y 0 px desde el lado izquierdo.
- shadow-5: esta clase se usa para crear un box-shadow de 4 px desde la parte superior, 4 px desde la derecha, 8 px desde la parte inferior y 0 px desde el lado izquierdo.
Sintaxis:
<element-name class="class-name">
...
</element-name>
Ejemplo 1: en el siguiente código, utilizaremos la clase shadow-1 para demostrar el box-shadow.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
body{
text-align:center;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3><br>
<h1 class="shadow-1">GeeksforGeeks</h1>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente código, haremos uso de las clases anteriores para demostrar la sombra del cuadro.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
body{
text-align:center;
margin:12px;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3><br>
<h1 class="shadow-1">GeeksforGeeks</h1>
<h1 class="shadow-2">GeeksforGeeks</h1>
<h1 class="shadow-3">GeeksforGeeks</h1>
<h1 class="shadow-4">GeeksforGeeks</h1>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/themes/box-shadow/
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