El kit de herramientas Tachyons se utiliza para crear un sitio web receptivo. En este artículo, aprenderemos cómo definir el efecto de opacidad en nuestro sitio web utilizando el kit de herramientas Tachyons.
Opacidad: Es el efecto de visibilidad que podemos cambiar según nuestras necesidades.
Sintaxis:
<element-name class="class-name">
...
</element-name>
Clases de opacidad de tematización de taquiones:
- o-90: Esta clase establece la opacidad con un valor de 90 del realce.
- o-80: Esta clase establece la opacidad con un valor de 80 del realce.
- o-70: Esta clase establece la opacidad con un valor 70 de realce.
- o-60: Esta clase establece la opacidad con un valor 60 del realce.
- o-50: Esta clase establece la opacidad con un valor 50 del realce.
- o-40: Esta clase establece la opacidad con un valor 40 del realce.
- o-30: Esta clase establece la opacidad con un valor 30 de realce.
- o-20: Esta clase establece la opacidad con un valor 20 de realce.
- o-25: Esta clase establece la opacidad con un valor 25 del realce.
- o-10: Esta clase establece la opacidad con un valor de 10 de la mejora.
- o-05: Esta clase establece la opacidad con un valor 05 del realce.
Ejemplo 1: Este código demuestra la clase 0-90 del kit de herramientas Tachyons.
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: 20px;
}
</style>
</head>
<body class="contain">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
alt="GFG image"
class="o-90" />
</body>
</html>
Producción:
Ejemplo 2: Este código demuestra la clase 0-20 del kit de herramientas Tachyons.
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: 20px;
}
</style>
</head>
<body class="contain">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
alt="GFG image"
class="o-20" />
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/themes/opacity/
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA