Como ocultar elementos HTML no CSS

Pode haver uma situação, quando você não deseja que algum conteúdo apareça em uma página da web. Por exemplo, os componentes da página da web, como barra de navegação, cabeçalho, rodapé e muito mais. Além disso, às vezes, ao projetar qualquer seção específica de nosso aplicativo da web, geralmente precisamos ocultar alguns dos componentes. Para os correspondentes, existem muitos métodos para ocultar elementos HTML usando CSS.

O resultado deste blog é:

• Como ocultar elementos HTML com CSS?
• Método 1: Ocultar elementos HTML usando a propriedade CSS “Display: None”
• Método 2: Ocultar elementos HTML usando a propriedade "Hidden"
• Método 3: Ocultar elementos HTML usando a propriedade "Visibilidade: Hidden" CSS
• Método 4: Ocultar elementos HTML usando a propriedade CSS “Filtro: Opacity (0)”
• Método 5: Ocultar elementos HTML usando a propriedade CSS “Clip-Path: Circle (0)”
• Método 6: Ocultar elementos HTML usando a propriedade CSS “Overflow: Hidden”
• Método 7: Ocultar elementos HTML usando a propriedade CSS “Opacity: 0”
• Método 8: ocultar elementos HTML usando a propriedade CSS “Transform: Scale (0)”
• Método 9: ocultar elementos HTML aplicando propriedades com efeito "transparente"

Como ocultar elementos HTML com CSS?

Muitos métodos possíveis de CSS são usados ​​para ocultar elementos HTML. Alguns deles estão listados abaixo:

• Mostrar nenhum
• Propriedade oculta
• Visibilidade: escondida
• filtro: opacidade (0)
• Propriedade do CLIP-PATH
• Overflow: oculto
• Opacidade: 0
• Transformar: Escala (0)
• transparente
• tamanho da fonte

Vamos elaborar cada um dos métodos acima mencionados um por um. Mas antes disso, criaremos um arquivo html para a demonstração.

Pré -requisito: Crie a página HTML

No arquivo html, dentro do elemento corporal, primeiro, adicione um “" elemento. Dentro disso, existem duas tags de parágrafos, cada uma associada ao ID exclusivo “primeiro" e "segundo”, Respectivamente:

Primeiro parágrafo!

Segundo parágrafo!

Método 1: Ocultar elementos HTML usando a propriedade CSS “Display: None”

O CSS “mostrar”Propriedade com o valor“nenhum”Remove o elemento e permite que outros elementos ocupem seu lugar. Por exemplo, queremos esconder o segundo parágrafo. Para isso, a propriedade CSS discutida é aplicada a ela como mostrado abaixo:

#segundo
Mostrar nenhum;

• ““#segundo”Refere -se à div com o segundo.
• ““mostrar”A propriedade recebe o valor“nenhum”:

Pode -se observar que agora o segundo parágrafo está oculto:

Método 2: Ocultar elementos HTML usando a propriedade "Hidden"

Outro método para ocultar o elemento HTML é escrever o “escondido”Atributo com o elemento da seguinte forma:

Segundo parágrafo!

Pode -se observar que o primeiro elemento está oculto:

Método 3: Ocultar elementos HTML usando a propriedade "Visibilidade: Hidden" CSS

O CSS “visibilidade”A propriedade também pode ser utilizada para apenas ocultar visualmente o elemento, de tal maneira que outros elementos não podem tomar seu lugar. No exemplo abaixo, o “visibilidade”O valor da propriedade é definido como“escondido”Para o primeiro elemento HTML:

#primeiro
Visibilidade: escondida;

A saída correspondente pode ser vista a partir da imagem abaixo:

Método 4: Ocultar elementos HTML usando a propriedade CSS “Filtro: Opacity (0)”

O filtro aplica transparência aos elementos. No exemplo, o “filtro”A propriedade é atribuída o valor como“opacidade (0)”, O que significa que será completamente transparente na página da web:

#segundo
filtro: opacidade (0);

Na tela abaixo, podemos observar que o parágrafo com id “segundo" está escondido:

Método 5: Ocultar elementos HTML usando a propriedade CSS “Clip-Path: Circle (0)”

A propriedade do caminho do clipe indica qual parte da página da web deve ser mostrada.

No exemplo seguinte, o “CLIP-PATH”Propriedade com o valor“Círculo (0)”Indica que nenhum conteúdo é mostrado relacionado à tag adicionada:

#primeiro
CLIP-PATH: Círculo (0);

Aqui está a tela de saída, representando que o segundo elemento é mostrado e o primeiro parágrafo não é visível:

Método 6: Ocultar elementos HTML usando a propriedade CSS “Overflow: Hidden”

O "transbordar”A propriedade recebe o valor“escondido”Para controlar o conteúdo. Como resultado, o fluxo é cortado e o conteúdo restante está oculto:

#segundo
Altura: 0px;
Largura: 0px;
estouro: oculto;

• Primeiro, defina a altura e a largura do DIV ID em segundo como 0px.
• O conteúdo transbordará da área especificada.
• Então o "transbordar”A propriedade recebe o valor“escondido”Para ocultar o conteúdo.

Na saída abaixo, podemos ver que o segundo elemento não é visível:

Método 7: Ocultar elementos HTML usando a propriedade CSS “Opacity: 0”

O nível de opacidade é o nível de transparência do elemento. O "opacidade”Propriedade com o valor“0”Significa que o elemento será totalmente transparente:

#primeiro
opacidade: 0;

Saída

Método 8: ocultar elementos HTML usando a propriedade CSS “Transform: Scale (0)”

O "escala()”A função redimensiona o elemento horizontal e verticalmente. O valor da escala (0) do “transformarA propriedade indica que o elemento é dimensionado para zero significa que está oculto:

#primeiro
Transformar: escala (0);

Saída

Método 9: ocultar elementos HTML aplicando propriedades com efeito "transparente"

Vamos tornar o segundo elemento totalmente transparente. Para isso, atribua o “cor de fundo" e "corValores da propriedade como “transparente”:

#segundo
Background-Color: transparente;
Cor: transparente;

O segundo elemento é totalmente transparente em comparação com o primeiro. É por isso que não pode ser visto na tela:

Explicamos alguns dos possíveis métodos CSS para ocultar elementos HTML.

Conclusão

O CSS nos permite usar propriedades diferentes para ocultar os elementos HTML. Essas propriedades incluem “Mostrar nenhum","escondido","Visibilidade: escondida","filtro: opacidade (0)","CLIP-PATH: Círculo (0)","Overflow: oculto","Opacidade: 0","Transformar: Escala (0)”, Ou aplicando outras propriedades, como a cor com o“transparente”Efeito. Este blog discutiu os procedimentos para ocultar elementos HTML usando CSS.