Puedes ocultar un elemento en CSS utilizando las propiedades CSS display: none o visibility: hidden. display: none elimina todo el elemento de la página y mat afecta al diseño de la página. visibility: hidden oculta el elemento manteniendo el mismo espacio.
Puedes encontrarte con un escenario en el que quieras ocultar un elemento en la página web. Por ejemplo, puede tener un bloque de texto que desea permanecer oculto y aparecer cuando un usuario hace clic en un botón.
Ocultar elemento en CSS
Hay dos enfoques principales para ocultar un elemento en CSS, utilizando:
- El atributo display: none.
- El atributo visibility: hidden.
- Career Karma te pone en contacto con los mejores bootcamps tecnológicos
- Obtén becas y cursos de preparación exclusivos
El primer enfoque puede afectar al diseño de su página web. Pero, el segundo método es sin embargo popular.
CSS Ocultar elemento: display
La propiedad display controla cómo se muestra un elemento en una página web. Cada elemento de un documento HTML tiene un valor por defecto para la propiedad display, aunque ese valor depende del elemento. Para la mayoría de los elementos, el valor predeterminado de display es block o inline.
Si no quieres que un elemento se muestre en absoluto, puedes establecer el valor de la propiedad display a none.
La siguiente regla de estilo oculta un elemento en una página web:
display: none;
Cuando establezcas el valor de display a none, el elemento afectado desaparecerá. Esto significa que el elemento ya no ocupará ningún espacio en la página web.
display: none Ejemplo
Supongamos que estamos diseñando una página web sobre nosotros para un club de cocina local. En nuestro diseño inicial, hemos añadido una imagen de un pastel a la página. Ahora el club quiere que ocultemos la imagen porque no están seguros del diseño final.
Podríamos ocultar la imagen en la página utilizando el siguiente código:
<html><div><h1>About Us</h1><img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /><p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p></div><style>img {display: none;}<style>
Haz clic en el 
en el editor de código de arriba para ver la salida de nuestro código HTML/CSS.
Hemos definido tres elementos dentro de una etiqueta HTML <div>. El elemento <h1> se utiliza para crear nuestra cabecera, y contiene el texto Sobre nosotros. Nuestro elemento HTML <img> crea una imagen de un pastel, que tiene 200px de alto y 200px de ancho. El elemento <p> contiene una breve descripción del club.
En nuestro código CSS, utilizamos el selector «img» para seleccionar todas las etiquetas de imagen de nuestra página. Esta regla establece la propiedad display de todas las etiquetas <img> a none. O, en otras palabras, la regla de estilo oculta nuestra imagen.
Aunque nuestra imagen está oculta, sigue existiendo en nuestra página web. Si queremos recuperar nuestra imagen, podemos eliminar el estilo display:none;. O bien, podemos especificar otro estilo de visualización (como block o inline).
Podría definir esta regla como un atributo HTML en línea:
<img style=»display: none;» src=»https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80″ height=»200″ width=»200″ />
Para saber más sobre las propiedades HTML y CSS en línea, consulta nuestra guía de CSS en línea.
Elemento CSS Hide: visibilidad
La propiedad CSS visibility se utiliza para controlar si un elemento es visible en la página web.
Por defecto, el valor de la propiedad visibility es visible. Sin embargo, si quiere hacer invisible una imagen, puede establecer el valor de la visibilidad en oculto.
La siguiente regla de estilo establece la visibilidad de un elemento en oculto:
visibility: hidden;
Volvamos al ejemplo del club de cocina de antes. Supongamos que queremos ocultar la imagen de la tarta en nuestra página web About Us. Podríamos hacerlo utilizando este código:
<html><div><h1>About Us</h1><img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /><p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p></div><style>img {display: visibility;}<style>
Haz clic en el
en el editor de código de arriba para ver la salida de nuestro código HTML/CSS.
Nuestro código HTML es el mismo en este ejemplo. En nuestro archivo CSS, en lugar de utilizar la propiedad display, hemos utilizado visibility para ocultar nuestro elemento. Como puedes ver arriba, nuestra imagen se ha ocultado de la página web.
Aunque nuestra imagen ha desaparecido, ahora hay un espacio entre nuestra cabecera y nuestro párrafo donde se habría colocado la imagen. Esta es una característica del estilo visibility: hidden;. El espacio del elemento original sigue siendo mantenido por la página web. Pero, el elemento está oculto.
Visibilidad CSS vs. Display
Los dos métodos que hemos comentado para ocultar un elemento parecen ser los mismos, pero hay una diferencia entre ambos.
La regla display: none elimina un elemento de un documento HTML. Aunque el código del elemento oculto sigue presente, el elemento en sí no se mostrará.
La regla visibility: hidden, por otro lado, oculta un elemento, pero éste seguirá ocupando espacio en la página web. Si quieres ocultar un elemento pero mantener el espacio de ese elemento en la página web, usar la regla visibility: hidden; es lo mejor.
Conclusión
La regla display: none elimina un elemento de un documento y lo oculta de la vista. La regla visibility: hidden oculta un elemento en un documento y deja vacío el espacio en el que el elemento habría aparecido.
0 comentarios