Cómo hacer que HTML desaparezca por completo

Todos queremos desaparecer alguna vez. Los elementos HTML no son diferentes. A veces quieren esconderse por un tiempo. No dejar de existir por completo, simplemente mantener las cosas a la baja.

Afortunadamente, cuando se trata de hacer desaparecer los elementos HTML, CSS ofrece una variedad de opciones.

El CSS de volverse invisible

Tomemos un elemento HTML con la clase "fantasma" y lo ocultemos.

//index.html

I’m friendly!

//style.css
.ghost {
}

Píxeles muertos

De forma predeterminada, los elementos HTML están visibles. Su propiedad CSS de visibilidad predeterminada es visible , pero puede voltear el script y comenzar:

.ghost {
 visibility: hidden;
}

Ahora el fantasma está oculto, pero aún ocupará espacio en la página.

Sin rastro

Si desea hacer algo invisible y no ocupar espacio, también puede usar la propiedad de visualización CSS .

Los desarrolladores generalmente usan la propiedad de visualización para dictar si un elemento HTML debe mostrarse como un elemento de bloque o un elemento en línea, pero también puede ocultar el elemento por completo:

.ghost {
 display: none;
}

Y a diferencia de la visibilidad: oculto , un elemento oculto con pantalla: ninguno no ocupará espacio en la página.

Almas transparentes

También puede hacer que un elemento sea tan transparente que sea invisible usando la propiedad CSS de opacidad .

.ghost {
 opacity: 0.0;
}

Como visibilidad: oculta, opacidad: 0.0 dejará un espacio vacío donde está el elemento HTML. Recuerde, con todas estas técnicas, el elemento sigue siendo parte del DOM, simplemente no es visible para los usuarios normales en sus navegadores.

¡Huir! ¡Corre muy, muy lejos!

Una última forma en que puede ocultar un elemento es simplemente moverlo tan lejos de la página que necesitaría alejarlo enormemente para verlo.

Para hacer esto, primero usa la propiedad CSS de posición para darle al elemento una posición absoluta en la página (a diferencia de la relativa a otros elementos HTML).

Luego, puede mover el elemento fuera de la página una cantidad arbitrariamente grande de píxeles:

.ghost { position: absolute; left: -999999px;}

¿Por qué harías esto? Bueno, es bueno para la accesibilidad de tu contenido. Los lectores de pantalla, que las personas con discapacidad visual utilizan para navegar por Internet, pueden captar este contenido y todos los demás no sabrán que el contenido está allí.

Para obtener los mejores resultados, coloque estos elementos invisibles a la izquierda en lugar de arriba o abajo, lo que puede confundir a los lectores de pantalla.

Ser un fantasma para Halloween

Cuando juntas las 4 técnicas, tienes un disfraz de Halloween de bajo esfuerzo bastante genial:

Hice esto con la ayuda del diseñador y campista con sede en Austin Wes Searan.

Puedes comprar uno hasta el final de este fin de semana, en tallas de hombre y de mujer ajustadas.

Solo escribo sobre programación y tecnología. Si me sigues en Twitter no perderé tu tiempo. ?