Al crear un sitio web interactivo, puede haber elementos que deban ocultarse de forma predeterminada o en alguna acción del usuario. En este artículo, veremos cómo ocultar elementos en Pure CSS.
Clases de elementos ocultos de CSS puro:
- hidden: esta clase se usa para ocultar elementos mientras se admite navegadores antiguos como Internet Explorer.
Incluya el módulo base de Pure CSS: la utilidad de ocultación viene con el módulo base de Pure CSS. Entonces, para usar la utilidad de ocultación, debemos incluir el módulo base en nuestro archivo HTML. El enlace para incluir el módulo base se proporciona a continuación:
<enlace rel=”hoja de estilo” href=”https://unpkg.com/purecss@1.0.1/build/base-min.css”>
Sintaxis:
1. Usando el atributo oculto:
<element hidden> ... </element>
2. Usando la clase oculta :
<element class="hidden"> ... </element>
Ejemplo 1: este ejemplo muestra cómo ocultar elementos usando el atributo oculto usando Pure CSS. Tenga en cuenta que el uso de atributos ocultos no oculta elementos en navegadores antiguos como Internet Explorer.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Hiding Elements</title>
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/base-min.css">
<style>
body{
text-align: center;
}
h2{
margin-bottom: 10px;
}
h3{
margin-top: 0px;
}
.header{
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="header">
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Pure CSS Hiding Elements</h3>
</div>
<p><b>Input without hidden attribute:</b></p>
<input type="text" name="name"
placeholder="Enter Name">
<p><b>Input with hidden attribute:</b></p>
<!-- This will be hidden -->
<input type="text" name="name"
placeholder="Enter Name" hidden>
<!-- -->
</body>
</html>
Producción:
Ejemplo 2: este ejemplo muestra cómo ocultar elementos usando una clase oculta en el elemento. Esto también funciona en navegadores antiguos como Internet Explorer.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Hiding Elements</title>
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/base-min.css">
<style>
body{
text-align: center;
}
h2{
margin-bottom: 10px;
}
h3{
margin-top: 0px;
}
.header{
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="header">
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Pure CSS Hiding Elements using
<i>hidden</i> class
</h3>
</div>
<p><b>Input without hidden class:</b></p>
<input type="text" name="name"
placeholder="Enter Name">
<p><b>Input with hidden class:</b></p>
<!-- This will be hidden -->
<input type="text" name="name"
placeholder="Enter Name" class="hidden">
<!-- -->
</body>
</html>
Producción:
Referencia: https://purecss.io/base/#extras
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA