Mientras trabajamos en UI/UX, debemos cuidar cada elemento web que aparece en la página web para facilitar la experiencia del usuario. Mientras diseñamos tales páginas, a menudo necesitamos ocultar o mostrar algunos elementos HTML particulares en cualquier evento o en un intervalo particular. En este artículo, podríamos hacerlo fácilmente con alguna línea de código javascript, pero para este artículo, veremos cuántas formas hay de ocultar un elemento HTML usando solo CSS .
Existen las siguientes propiedades CSS que se usan para ocultar un elemento.
- posición absoluta
- Color
- ruta de recorte
- Monitor
- filtrar
- Mediciones
- Opacidad
- Transformar
- Visibilidad
Vamos a ver todos los métodos mencionados anteriormente para ocultar elementos junto con los códigos CSS.
1. Posición absoluta: cuando usamos la propiedad Posición: absoluta en CSS para un elemento, simplemente significa que la posición de ese elemento está fijada en su contenedor principal, si no hay ningún contenedor disponible, entonces el cuerpo del documento se usa como su principal envase. Ahora podemos usar las propiedades Arriba, Abajo, Izquierda, Derecha para cambiar la posición de ese elemento. Usaremos una de estas propiedades para ocultar el elemento del cuerpo del documento.
Ejemplo: En este ejemplo, ocultaremos el elemento de texto sacándolo de la pantalla. Estableceremos la posición de la etiqueta h1 en absoluta y, al hacer clic en un botón, agregaremos una clase en la que usaremos la propiedad izquierda y estableceremos el valor en -999px. Al hacer esto, el texto se moverá fuera de la pantalla. También podemos usar otras propiedades Superior, Inferior y Derecha para ocultar el elemento del documento.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
background-color: rgb(37, 37, 37);
}
h1 {
font-size: 3rem;
color: green;
position: absolute;
}
p {
color: white;
}
h1.hide {
left: -999px;
}
</style>
</head>
<body>
<p>
This button will hide the text element
by moving out the element from the screen.
</p>
<button id="btn">Hide</button>
<div class="textbox">
<h1>GeeksForGeeks</h1>
</div>
<script>
$("#btn").click(function () {
$("h1").addClass("hide");
});
</script>
</body>
</html>
Producción:
2. La propiedad de color también se puede usar para hacer que los elementos sean invisibles haciéndolos transparentes, aplicaremos el color con un canal alfa. Podemos configurar el canal alfa con el siguiente método.
- color: transparente
- color: hsla (tono, saturación, luminosidad, alfa);
- color: rgba (rojo, verde, azul, alfa);
- color: #RRGGBBAA
- color: #RBGA
Nota: También podemos usar estos valores además del color, por ejemplo, para el color de fondo, el color del borde, el fondo, etc.
Ejemplo: En este ejemplo, ocultaremos el elemento haciéndolo transparente.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
background-color: rgb(37, 37, 37);
}
h1 {
font-size: 3rem;
color: rgb(255, 255, 255);
}
p {
color: white;
}
h1.hide {
color: transparent;
}
</style>
</head>
<body>
<p>
This button will set the text element
color to the transparent and the text
will be hidden.
</p>
<button id="btn">Hide</button>
<div class="textbox">
<h1>GeeksForGeeks</h1>
</div>
<script>
$("#btn").click(function () {
$("h1").addClass("hide");
});
</script>
</body>
</html>
Producción:
3. Propiedad Clip-path: esta propiedad se usa para crear un motivo de recorte de acuerdo con la forma dada. Usaremos esta propiedad para ocultar el elemento. La propiedad Clip-path tiene varios valores, uno de ellos es el círculo(). cuando usamos clip-path: circle(0) , entonces el elemento en particular estará completamente oculto.
Ejemplo: en este ejemplo, vamos a ocultar un div usando la propiedad clip-path y usaremos uno de los valores circle() y lo estableceremos en circle(0). Al hacer esto, se recortará completamente el div y se ocultará el div.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
background-color: rgb(37, 37, 37);
}
.rect {
margin: 20px;
height: 100px;
width: 100px;
background-color: #fff;
}
p {
color: white;
}
.rect.hide {
clip-path: circle(0);
}
</style>
</head>
<body>
<p>
This button will hide the text by
clipping it in a circular shape to
the zero value.
</p>
<button id="btn">Hide</button>
<div class="textbox">
<div class="rect"></div>
</div>
<script>
$("#btn").click(function () {
$(".rect").addClass("hide");
});
</script>
</body>
</html>
Producción:
4. Propiedad de visualización: la propiedad de visualización de CSS también se puede utilizar para ocultar el elemento del DOM. Usaremos uno de los valores que se conoce como Display: none. Probablemente esta sea la propiedad más utilizada para ocultar elementos HTML de la página.
Ejemplo: Ocultar elementos con visualización: ninguno.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
background-color: rgb(37, 37, 37);
}
h1 {
font-size: 3rem;
color: rgb(24, 255, 63);
border: 1px solid green;
width: 17%;
}
p {
color: white;
}
h1.hide {
display: none;
}
</style>
</head>
<body>
<p>
This button will hide the text
element by adding the class
which specify "display:none"
property
</p>
<button id="btn">Hide</button>
<div class="textbox">
<h1>GeeksForGeeks</h1>
</div>
<script>
$("#btn").click(function () {
$("h1").addClass("hide");
});
</script>
</body>
</html>
Producción:
5. Filtro: la propiedad de filtro en CSS se usa para aplicar cierta distorsión gráfica a los elementos HTML. La propiedad de filtro tiene varios valores, pero para ocultar el elemento usaremos una de las propiedades llamada opacity() . Como su nombre indica, ¿qué hará? Usaremos el valor de opacidad más bajo para hacer que el elemento sea transparente y de esta manera podrá ocultar cualquier elemento en particular.
Ejemplo: Ocultar elemento con filtro: propiedad opacity().
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
background-color: rgb(37, 37, 37);
}
h1 {
font-size: 3.5rem;
color: rgb(24, 255, 63);
border: 1px solid green;
width: 20%;
}
p {
color: white;
}
h1.hide {
filter: opacity(0);
}
</style>
</head>
<body>
<p>
This button will hide the text by
making its opacity to the zero.
</p>
<button id="btn">Hide</button>
<div class="textbox">
<h1>GeeksForGeeks</h1>
</div>
<script>
$("#btn").click(function () {
$("h1").addClass("hide");
});
</script>
</body>
</html>
Producción:
6. Medidas: Esta también podría ser una de las formas más sencillas de ocultar cualquier elemento. Reduciremos la dimensión del elemento con la ayuda de propiedades como alto, ancho, tamaño de fuente , etc. Tenga en cuenta que cuando usamos dimensiones para reducir u ocultar completamente el elemento, no olvide usar overflow: propiedad oculta para que el el contenido completo de los elementos se oculta.
Ejemplo: Ocultar elemento reduciendo su dimensión.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
background-color: rgb(37, 37, 37);
}
h1 {
font-size: 5rem;
color: rgb(24, 255, 63);
width: 20%;
}
p {
color: white;
}
h1.hide {
height: 0px;
width: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<p>
This button will hide the text by
reducing its dimension to the zero
</p>
<button id="btn">Hide</button>
<div class="textbox">
<h1>GeeksForGeeks</h1>
</div>
<script>
$("#btn").click(function () {
$("h1").addClass("hide");
});
</script>
</body>
</html>
Producción:
7. Opacidad: podemos usar directamente la propiedad de opacidad en CSS para aplicar un efecto de transparencia al elemento. Usaremos el valor de opacidad de 0 a 1 o en el porcentaje de 0% a 100%. Pero en este caso, usaremos opacity(0) u opacity(0%) para hacer que el elemento sea transparente u ocultarlo por completo.
Ejemplo: ocultar el elemento estableciendo la opacidad en 0.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
background-color: rgb(37, 37, 37);
}
h1 {
font-size: 5rem;
color: rgb(24, 255, 63);
width: 20%;
}
p {
color: white;
}
h1.hide {
opacity: 0;
}
</style>
</head>
<body>
<p>
This button will hide the text by
making opacity of the text 0
</p>
<button id="btn">Hide</button>
<div class="textbox">
<h1>GeeksForGeeks</h1>
</div>
<script>
$("#btn").click(function () {
$("h1").addClass("hide");
});
</script>
</body>
</html>
Producción:
8. Transformar: la propiedad de transformación de CSS se puede usar para escalar, rotar y mover el elemento HTML. Para ocultar el elemento del documento, usaremos scale() para ocultar el elemento. El método scale() ayudará a establecer el tamaño del elemento para que podamos ocultarlo por completo usando el valor más bajo para scale().
Ejemplo: Ocultar el elemento con Transform: scale().
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
background-color: rgb(37, 37, 37);
}
.crcl {
margin: 20px;
height: 200px;
width: 200px;
border-radius: 100px;
background-color: #fff;
}
p {
color: white;
}
.crcl.hide {
transform: scale(0);
}
</style>
</head>
<body>
<p>
This button will hide the shape
by making their scale to the zero.
</p>
<button id="btn">Hide</button>
<div class="textbox">
<div class="crcl"></div>
</div>
<script>
$("#btn").click(function () {
$(".crcl").addClass("hide");
});
</script>
</body>
</html>
Producción:
9. Visibilidad: Esta propiedad tiene solo dos valores oculto y visible. Para ocultar elementos de la página, simplemente usaremos visibilidad: oculto. Este es uno de los métodos más simples para ocultar el elemento HTML del DOM.
Ejemplo: Ocultar elemento con visibilidad: propiedad oculta
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
background-color: rgb(37, 37, 37);
}
.crcl {
margin: 20px;
height: 200px;
width: 200px;
border-radius: 100px;
background-color: rgb(3, 134, 10);
}
p {
color: white;
}
.crcl.hide {
visibility: hidden;
}
</style>
</head>
<body>
<p>
This button will hide the shape by
the property visibility: hidden
</p>
<button id="btn">Hide</button>
<div class="textbox">
<div class="crcl"></div>
</div>
<script>
$("#btn").click(function () {
$(".crcl").addClass("hide");
});
</script>
</body>
</html>
Producción:
