¿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.

 

[su_table responsive=»yes» fixed=»yes»]

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

[/su_table]

 

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?