Come nascondere gli elementi HTML in CSS

Può esserci una situazione, quando non si desidera che alcuni contenuti appaiano su una pagina web. Ad esempio, i componenti della pagina web, come la barra di navigazione, l'intestazione, il piè di pagina e altro ancora. Inoltre, a volte mentre progettiamo qualsiasi sezione specifica della nostra applicazione web, spesso dobbiamo nascondere alcuni dei componenti. Per i corrispondenti, ci sono molti metodi per nascondere gli elementi HTML usando CSS.

Il risultato di questo blog sono:

• Come nascondere gli elementi HTML con CSS?
• Metodo 1: nascondi gli elementi HTML usando la proprietà CSS "Visualizza: nessuna"
• Metodo 2: nascondi elementi HTML usando la proprietà "nascosta"
• Metodo 3: nascondi elementi HTML usando la proprietà CSS "Visibilità: nascosto"
• Metodo 4: nascondi elementi HTML usando la proprietà CSS “Filter: Opacity (0)”
• Metodo 5: nascondi elementi HTML usando la proprietà CSS "Clip-Path: Circle (0)"
• Metodo 6: nascondi elementi HTML usando la proprietà CSS "Overflow: Hidden"
• Metodo 7: nascondi elementi HTML usando la proprietà CSS “Opacity: 0”
• Metodo 8: nascondi elementi HTML usando la proprietà CSS “Transform: Scale (0)”
• Metodo 9: nascondi elementi HTML applicando proprietà con effetto "trasparente"

Come nascondere gli elementi HTML con CSS?

Molti possibili metodi di CSS vengono utilizzati per nascondere elementi HTML. Alcuni di essi sono elencati di seguito:

• Display: nessuno
• Proprietà nascosta
• Visibilità: nascosto
• Filtro: opacità (0)
• Proprietà a clip
• Overflow: nascosto
• opacità: 0
• Trasformazione: scala (0)
• trasparente
• dimensione del font

Elaboriamo ciascuno dei metodi sopra menzionati uno per uno. Ma prima, creeremo un file HTML per la dimostrazione.

Prerequisito: Crea la pagina HTML

Nel file HTML, all'interno dell'elemento corporeo, prima, aggiungi un ""Elemento. All'interno di questo, ci sono due tag di paragrafo, ciascuno associato all'ID univoco "Primo" E "secondo"Rispettivamente:

Primo paragrafo!

Secondo paragrafo!

Metodo 1: nascondi gli elementi HTML usando la proprietà CSS "Visualizza: nessuna"

Il CSS "Schermo"Proprietà con il valore"nessuno"Rimuove l'elemento e consente ad altri elementi di prendere il suo posto. Ad esempio, vogliamo nascondere il secondo paragrafo. Per questo, la proprietà CSS discussa viene applicata ad essa come mostrato di seguito:

#second
visualizzazione: nessuno;

• "#secondo"Si riferisce al Div con ID secondo.
• "Schermo"Alla proprietà è assegnato il valore"nessuno":

Si può vedere che ora il secondo paragrafo è nascosto:

Metodo 2: nascondi elementi HTML usando la proprietà "nascosta"

Un altro metodo per nascondere l'elemento HTML è scrivere il "nascosto"Attributo con l'elemento come segue:

Secondo paragrafo!

Si può osservare che il primo elemento è nascosto:

Metodo 3: nascondi elementi HTML usando la proprietà CSS "Visibilità: nascosto"

Il CSS "visibilità"La proprietà può anche essere utilizzata per nascondere visivamente l'elemento, in modo tale che altri elementi non possano prendere il loro posto. Nell'esempio seguente, il "visibilità"Il valore della proprietà è impostato come"nascosto"Per il primo elemento HTML:

#Primo
Visibilità: nascosto;

L'uscita corrispondente può essere vista dall'immagine di seguito:

Metodo 4: nascondi elementi HTML usando la proprietà CSS “Filter: Opacity (0)”

Il filtro applica la trasparenza agli elementi. Nell'esempio, il "filtro"Proprietà viene assegnato il valore come"opacità (0)", Il che significa che sarà completamente trasparente sulla pagina Web:

#second
filtro: opacità (0);

Dalla schermata seguente, possiamo osservare che il paragrafo con ID "secondo" è nascosto:

Metodo 5: nascondi elementi HTML usando la proprietà CSS "Clip-Path: Circle (0)"

La proprietà Clip-Path indica quale parte della pagina Web dovrebbe essere mostrata.

Nel seguente esempio, il "Clip-Path"Proprietà con il valore"cerchio (0)"Indica che nessun contenuto è mostrato relativo al tag aggiunto:

#Primo
Clip-Path: Circle (0);

Ecco la schermata di output, che rappresenta che viene mostrato il secondo elemento e il primo paragrafo non è visibile:

Metodo 6: nascondi elementi HTML usando la proprietà CSS "Overflow: Hidden"

IL "overflow"Alla proprietà è assegnato il valore"nascosto"Per controllare il contenuto. Di conseguenza, il flusso viene tagliato e il contenuto rimanente è nascosto:

#second
Altezza: 0px;
larghezza: 0px;
Overflow: nascosto;

• Innanzitutto, impostare l'altezza e la larghezza dell'ID div secondo come 0px.
• Il contenuto traboccerà dall'area specificata.
• Poi il "overflow"Alla proprietà è assegnato il valore"nascosto"Per nascondere il contenuto.

Dall'output seguente, possiamo vedere il secondo elemento non è visibile:

Metodo 7: nascondi elementi HTML usando la proprietà CSS “Opacity: 0”

Il livello di opacità è il livello di trasparenza dell'elemento. IL "opacità"Proprietà con il valore"0"Significa che l'elemento sarà completamente trasparente:

#Primo
opacità: 0;

Produzione

Metodo 8: nascondi elementi HTML usando la proprietà CSS “Transform: Scale (0)”

IL "scala()"La funzione ridimensiona l'elemento orizzontale e verticalmente. Il valore della scala (0) del "trasformare"La proprietà indica che l'elemento è dimensionato a zero significa che è nascosto:

#Primo
trasformazione: scala (0);

Produzione

Metodo 9: nascondi elementi HTML applicando proprietà con effetto "trasparente"

Rendiamo il secondo elemento completamente trasparente. Per questo, assegna il “colore di sfondo" E "colore"Valori della proprietà come"trasparente":

#second
Background-color: trasparente;
Colore: trasparente;

Il secondo elemento è completamente trasparente rispetto al primo. Ecco perché non può essere visto sullo schermo:

Abbiamo spiegato alcuni dei possibili metodi CSS per nascondere gli elementi HTML.

Conclusione

CSS ci consente di utilizzare proprietà diverse per nascondere gli elementi HTML. Queste proprietà includono "Display: nessuno","nascosto","Visibilità: nascosto","Filtro: opacità (0)","Clip-Path: Circle (0)","Overflow: nascosto","opacità: 0","Trasformazione: scala (0)"O applicare altre proprietà come il colore con il"trasparente"Effetto. Questo blog ha discusso delle procedure per nascondere gli elementi HTML utilizzando CSS.