Cómo ocultar elementos HTML en CSS

Puede haber una situación, cuando no desea que aparezca algún contenido en una página web. Por ejemplo, los componentes de la página web, como la barra de navegación, el encabezado, el pie de página y más. Además, a veces al diseñar cualquier sección específica de nuestra aplicación web, a menudo necesitamos ocultar algunos de los componentes. Para lo correspondiente, hay muchos métodos para ocultar elementos HTML utilizando CSS.

El resultado de este blog es:

• Cómo ocultar elementos HTML con CSS?
• Método 1: Ocultar elementos HTML utilizando la propiedad CSS "Display: Ninguno"
• Método 2: Ocultar elementos HTML utilizando la propiedad "oculta"
• Método 3: Ocultar elementos HTML utilizando la propiedad CSS "Visibilidad: Hidden"
• Método 4: Ocultar elementos HTML utilizando la propiedad CSS "Filtro: Opacidad (0)"
• Método 5: Ocultar elementos HTML utilizando la propiedad CSS "Clip-Path: Circle (0)"
• Método 6: Ocultar elementos HTML utilizando la propiedad CSS "Overflow: Hidden"
• Método 7: Ocultar elementos HTML utilizando la propiedad CSS "Opacidad: 0"
• Método 8: Ocultar elementos HTML utilizando la propiedad CSS "Transform: Scale (0)"
• Método 9: Ocultar elementos HTML aplicando propiedades con efecto "transparente"

Cómo ocultar elementos HTML con CSS?

Se utilizan muchos métodos posibles de CSS para ocultar elementos HTML. Algunos de ellos se enumeran a continuación:

• Pantalla: ninguno
• propiedad oculta
• Visibilidad: oculto
• Filtro: Opacidad (0)
• Propiedad de clip
• desbordamiento: oculto
• Opacidad: 0
• Transformar: Escala (0)
• transparente
• tamaño de fuente

Elaboremos cada uno de los métodos mencionados anteriormente uno por uno. Pero antes de eso, crearemos un archivo HTML para la demostración.

Prerrequisito: Crear página HTML

En el archivo HTML, dentro del elemento del cuerpo, primero, agregue un "" elemento. Dentro de esto, hay dos etiquetas de párrafo, cada una asociada con la identificación única "primero" y "segundo", Respectivamente:

Primer párrafo!

Segundo parrafo!

Método 1: Ocultar elementos HTML utilizando la propiedad CSS "Display: Ninguno"

El CSS "mostrar"Propiedad con el valor"ninguno"Elimina el elemento y permite que otros elementos tomen su lugar. Por ejemplo, queremos ocultar el segundo párrafo. Para esto, la propiedad CSS discutida se aplica como se muestra a continuación:

#segundo
Pantalla: ninguno;

• "#segundo"Se refiere al Div con ID segundo.
• "mostrarSe asigna a la propiedad el valor "ninguno":

Se puede ver que ahora el segundo párrafo está oculto:

Método 2: Ocultar elementos HTML utilizando la propiedad "oculta"

Otro método para ocultar el elemento HTML es escribir el "oculto"Atributo con el elemento de la siguiente manera:

Segundo parrafo!

Se puede observar que el primer elemento está oculto:

Método 3: Ocultar elementos HTML utilizando la propiedad CSS "Visibilidad: Hidden"

El CSS "visibilidad"La propiedad también se puede utilizar para ocultar visualmente el elemento, de tal manera que otros elementos no pueden tomar su lugar. En el siguiente ejemplo, el "visibilidad"El valor de la propiedad se establece como"oculto"Para el primer elemento HTML:

#primero
Visibilidad: oculto;

La salida correspondiente se puede ver desde la imagen dada a continuación:

Método 4: Ocultar elementos HTML utilizando la propiedad CSS "Filtro: Opacidad (0)"

El filtro aplica transparencia a los elementos. En el ejemplo, el "filtrar"La propiedad se asigna el valor como"Opacidad (0)", Lo que significa que será completamente transparente en la página web:

#segundo
Filtro: opacidad (0);

Desde la siguiente pantalla, podemos observar que el párrafo con ID "segundo" Está oculto:

Método 5: Ocultar elementos HTML utilizando la propiedad CSS "Clip-Path: Circle (0)"

La propiedad de clip-path indica qué parte de la página web debe mostrarse.

En el siguiente ejemplo, el "ratón"Propiedad que tiene el valor"Círculo (0)"Indica que no se muestra contenido relacionado con la etiqueta agregada:

#primero
Clip-Path: Circle (0);

Aquí está la pantalla de salida, que representa que se muestra el segundo elemento y el primer párrafo no es visible:

Método 6: Ocultar elementos HTML utilizando la propiedad CSS "Overflow: Hidden"

El "DesbordamientoSe asigna a la propiedad el valor "oculto"Para controlar el contenido. Como resultado, el flujo se recorta y el contenido restante está oculto:

#segundo
Altura: 0px;
Ancho: 0px;
desbordamiento: oculto;

• Primero, establezca la altura y el ancho del segundo Div ID como 0px.
• El contenido se desbordará desde el área especificada.
• Entonces el "DesbordamientoSe asigna a la propiedad el valor "oculto"Para ocultar el contenido.

De la siguiente salida, podemos ver que el segundo elemento no es visible:

Método 7: Ocultar elementos HTML utilizando la propiedad CSS "Opacidad: 0"

El nivel de opacidad es el nivel de transparencia del elemento. El "opacidad"Propiedad con el valor"0"Significa que el elemento será completamente transparente:

#primero
Opacidad: 0;

Producción

Método 8: Ocultar elementos HTML utilizando la propiedad CSS "Transform: Scale (0)"

El "escala()La función "cambia el tamaño del elemento horizontal y verticalmente. El valor de la escala (0) del "transformar"La propiedad indica que el elemento tiene el tamaño de cero significa que está oculto:

#primero
transformar: escala (0);

Producción

Método 9: Ocultar elementos HTML aplicando propiedades con efecto "transparente"

Hagamos que el segundo elemento sea completamente transparente. Para esto, asigne el "color de fondo" y "color"Valores de propiedad como"transparente":

#segundo
Color de fondo: transparente;
Color: transparente;

El segundo elemento es completamente transparente en comparación con el primero. Por eso no se puede ver en la pantalla:

Hemos explicado algunos de los posibles métodos CSS para ocultar elementos HTML.

Conclusión

CSS nos permite usar diferentes propiedades para ocultar los elementos HTML. Estas propiedades incluyen "Pantalla: ninguno","oculto","Visibilidad: oculto","Filtro: Opacidad (0)","Clip-Path: Circle (0)","desbordamiento: oculto","Opacidad: 0","Transformar: Escala (0)", O aplicar otras propiedades como el color con el"transparente" efecto. Este blog discutió los procedimientos para ocultar elementos HTML utilizando CSS.