css 2189148 640

3 maneras de esconder un elemento con css

¿Se pueden esconder elementos html con css? Sí, se puede y en este artículo vas a ver 3 formas distintas de hacerlo, con sus pros y contras. Simplemente con un código css vas a poder mostrar u ocultar elementos html.

 

1.- Display

Si utilizas este código eliminarás el elemento por completo y no estará ocupando espacio.

css display none

 

2.- Visibility

Aplicando visibility escondes el elemento pero se sigue manteniendo el espacio.

css visibility none

 

3.- Opacity

Con este código estarás modificando la opacidad del elemento y por tanto, seguirá ocupando espacio.

css opacity 0

 

Tabla comparativa de estas propiedades:

Siempre es interesante conocer, cuando se aplica una propiedad, cual ocupa más o consume más espacio.

 

Espacio ocupado Consume espacio
Opacity: 0 V V
visibility: hidden V X
display: none X X

 

Por lo tanto, si quieres ocupar el mínimo espacio y que consuma menos tu opción es display: none;

 

¿Y si quieres que esos elementos se vuelvan a mostrar?

En ese caso tendrías que modificar las propiedades.

1.- Display

Utilizarías display: block, display: inline o cualquier otra etiqueta de display que muestre el elemento.

2.- Visibility

En este caso utilizarías visibility: visible;

Aunque es importante que sepas que por defecto, el elemento ya es visible, sólo se aplicaría si está oculto y quieres que aparezca por ejemplo con hover.

3.- Opacity

Cuando utilizas opacity: 0; estás indicando que quieres que el elemento no esté visible, si quieres que esté visible solo tienes que insertar opacity: 1;

La opacidad en cualquier elemento es 1, es decir 100% opaco.

Lo interesante de la opacidad es que puedes poner elementos intermedios y que esté algo visible pero no al 100%. En este caso, por ejemplo una opacidad del 70% sobre el elemento la pondrías como opacity: 0.7; En este caso no lo verías totalmente opaco y bastante visible pero no al 100%.

 

Y esto es todo sobre como eliminar elementos html con css. ¿A qué es simple?

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *