5 Formas de Ocultar Un Elemento con CSS

3 minuto(s)

En esta página:

Cuando estamos diseñando una página web en ocasiones hay elementos que por alguna razón que cada uno tiene en particular, necesita ocultarlos. Esto puede ser en algunas ocasiones una tarea fácil, pero en ocasiones puede ser una tarea complicada. Recuerda que siempre debemos hacer las buenas prácticas correctas, para evitar errores en la presentación de una sitio web. En este post te quiero compartir 5 Formas de Ocultar Un Elemento con CSS, vamos con ello.

Antes de continuar te invito a leer los siguiente artículos:

Asimismo te invito a escuchar el Podcast: “Las Buenas Prácticas Un Hábito Importante en la Programación” y “5 Habilidades que Debe Tener un Desarrollador Backend (Anchor Podcast)”:

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: 5 Formas de Ocultar Un Elemento con CSS.

Antes de continuar vuelvo a mencionar, tal como lo mencione al inicio de este Post: es importante que siempre realices las buenas prácticas, si crees que una de estas formas que te compatiré a continuación no afecta las buenas prácticas en tu sitio web, adelante puedes usarlas.

5 Formas de Ocultar Un Elemento con CSS

Para conocer mejor estas formas de ocultar un elemento con CSS colocaré el nombre de la propiedad, una descripción y un ejemplo en código:

Opacity

Para ocultar un elemento hacemos uso de la propiedad opacity con la cual bajamos la transparencia o claridad de una elemento hasta el punto que no se aprecie en la vista:


.miclase {
  opacity: 0;
}

.miclase {

opacity: 0;

}

En el código anterior le damos el valor 0 para que no se vea el elemento. Se mantendrá su espacio en la vista.

Visibility

En esta forma, hacemos uso de la propiedad visibility con la cual podemos hacer que un elemento no sea visible:


.miclase {
  visibility: hidden;
}

.miclase {

visibility: hidden;

}

En el código anterior le damos el valor hidden para ocultar el elemento de la vista.

Transform

Para esta forma hacemos uso de la propiedad transform, la cual decrementa el tamño de un elemento hasta hacelo desaparecer:


.miclase {
  transform: scale(0); 
}

.miclase {

transform: scale(0);

}

En el código anterior le damos el valor scale(0) para hacer desaparecer el elemento de la vista.

Display

En esta forma hacemos uso de la propiedad display que oculta el elemento al carga la vista:


.miclase {
  display: none;
}

.miclase {

display: none;

}

En el código anterior le pasamos el valor none para hacer que el elemento no aparezca en la vista.

Clip-path

En esta forma hacemos uso de la propiedad clip-path para crear una región de recorte del elemento a ocultar:


.miclase {
  clip-path: circle(0); 
}

.miclase {

clip-path: circle(0);

}

En el código anterior le pasamos el valor circle(0) para crear un región de recorte circular, pero con el valor en 0, de esta manera ocultamos el elemento de la vista.

Conclusión

En este post hemos aprendido algunas formas de ocultar un elemento con CSS, la más habitual es la propiedad display, pero si en algún momento te encuentras en un entorno en donde necesites otras formas de ocultar un elemento de la vista, pues tienes a la mano esta lista que te sacará de apuros.