In questa lezione, vediamo le tre proprietà CSS per la visibilità degli elementi in una pagina web: display, visibility e opacity. Queste proprietà ci permettono di controllare come gli elementi vengono visualizzati dal browser nella pagina, se sono visibili o meno.
La proprietà display in CSS determina come un elemento HTML viene visualizzato nella pagina web. Questa proprietà influisce sul layout dell'elemento e sul modo in cui interagisce con gli altri elementi della pagina.
Ecco i più importanti valori che puoi utilizzare con display:
| Valore | Descrizione |
none | L'elemento non viene visualizzato nella pagina e non occupa spazio. È come se non esistesse. |
block | L'elemento viene visualizzato come un blocco, occupando l'intera larghezza disponibile e iniziando su una nuova riga. |
inline | L'elemento viene visualizzato in linea con il testo circostante, senza interruzioni di riga prima o dopo. |
inline-block | Simile a inline, ma l'elemento può avere larghezza e altezza specificate. |
flex | L'elemento diventa un contenitore Flex, ideale per layout dinamici. |
inline-flex | Simile a flex, ma l'elemento viene visualizzato in linea con il testo circostante. |
grid | L'elemento diventa un contenitore con layout a griglia (simile ad una tabella, ma dinamico). |
inline-grid | Simile a grid, ma l'elemento viene visualizzato in linea con il testo circostante. |
table | L'elemento viene visualizzato come se fosse una tabella. |
inline-table | Simile a table, ma l'elemento viene visualizzato in linea con il testo circostante. |
list-item | L'elemento viene visualizzato come se contenesse una lista. |
Prima di approfondire i valori accettati di display, diamo un'occhiata alla differenza tra gli elementi block e gli elementi inline.
Gli elementi block sono progettati per occupare l'intera larghezza disponibile del loro contenitore e iniziano su una nuova riga. Questo significa che, per impostazione predefinita, nessun altro elemento può affiancarsi a un elemento di tipo block.
Questo è un elemento block
Esempi comuni di elementi block sono <div>, <p>, <h1>, <ul>, <li>, e <section>. Abbiamo parlato degli elementi block nella lezione HTML.
Gli elementi inline sono progettati per occupare solo lo spazio necessario per il loro contenuto e non interrompono il "flusso" del documento, consentendo ad altri elementi di affiancarsi a loro.
Ad esempio, questo è un elemento inline, perché rimane sulla stessa riga del testo.
Gli elementi inline più comuni sono <span>, <a>, <strong>, <em>, e <img>.
Quando viene applicato display:none
<p>Questo testo non esiste</p>
<style>
p {
display: none;
}
</style>Le proprietà display:block e display:inline permettono di rendere visibile un elemento.
La proprietà display:block rende l'elemento block, mentre display:inline lo rende inline nella pagina web.
<p>Questo testo è un elemento inline</p>
<style>
p {
display: inline;
}
</style>Conoscendo sia display:none che display:block, è possibile far apparire e scomparire un elemento dalla pagina utilizzando JavaScript:
Questo pulsante funziona utilizzando l'attribuzione degli stili di JavaScript che puoi trovare nel nostro corso JavaScript (ovviamente gratuito). Quando il <div> è nascosto per default, gli viene attribuito display:none. Quando viene mostrato, ha la proprietà display:block.
Il valore inline-block di display è una via di mezzo tra block e inline. Quando un elemento ha la proprietà display:inline-block, viene visualizzato come un elemento inline, ma con la capacità di impostare larghezza (width) e altezza (height) come un elemento block.
<p>Questo testo è un elemento inline-block</p>
<style>
p {
display: inline-block;
border: 2px solid #000;
width: 200px;
}
</style>La proprietà visibility in CSS controlla la visibilità di un elemento senza influire sul layout della pagina. Ecco i valori accettati da visibility:
| Valore | Descrizione |
visible | L'elemento è visibile. |
hidden | L'elemento è nascosto, ma continua a occupare spazio nel layout della pagina. |
collapse | Nasconde l'elemento e rimuove il suo spazio, simile a display:none (utilizzato principalmente per le righe delle tabelle). |
Vediamo un esempio di come utilizzare la proprietà:
<p>Questo testo è nascosto</p>
<style>
p {
visibility: hidden;
}
</style>La proprietà opacity in CSS controlla la trasparenza di un elemento. Può essere utilizzata per rendere gli elementi più o meno trasparenti. È usato soprattutto per le immagini e i pulsanti, ma può essere anche associato a testi o ad altri elementi.
La proprietà opacity accetta un valore numerico tra 0 e 1, dove 0 è completamente trasparente e 1 è completamente visibile.
h1 {
opacity: 1; /* Completamente visibile */
}
h2 {
opacity: 0.5; /* Visibile al 50% */
}
h3 {
opacity: 0; /* Completamente invisibile */
}Ecco come diventano le immagini con opacity differente:
 | | |
opacity:1 | opacity:0.5 | opacity:0.1 |
A questo punto, può sorgere spontanea una domanda: "Qual è la differenza tra display:none, visibility:hidden e opacity:0?". Vediamola insieme:
opacity:0: l'elemento è trasparente ma continua a occupare spazio e può ancora rispondere agli eventi (ad esempio, è possibile evidenziare il testo con il mouse).visibility:hidden: l'elemento è nascosto ma continua a occupare spazio e non risponde agli eventi (ad esempio, non è possibile evidenziare il testo con il mouse)display:none: l'elemento è nascosto e non occupa spazio, come se non fosse nel documento.Per capire meglio, vediamo come funzionano con questo esempio:
| Elemento 1 | Elemento 2 | Elemento 3 |