CSS - Visibilità: Far Apparire e Scomparire Gli Elementi

Ciao a tutti, aspiranti sviluppatori web! Oggi esploreremo il mondo affascinante della visibilità CSS. Come il vostro amico insegnante di informatica del quartiere, sono entusiasta di guidarvi in questo viaggio. Alla fine di questo tutorial, sarete in grado di far scomparire e riapparire gli elementi come un vero mago del CSS!

Cos'è la Visibilità CSS?

Prima di iniziare a sciamare con i nostri bastoni CSS, capiamo di cosa si tratta la visibilità. In termini semplici, la visibilità CSS controlla se un elemento è visibile o nascosto su una pagina web. È come giocare a nascondino con i vostri elementi HTML!

Valori Possibili

Analizziamo i diversi valori che possiamo utilizzare con la proprietà visibilità:

Valore	Descrizione
visible	L'elemento è visibile (questo è il valore predefinito)
hidden	L'elemento è nascosto, ma occupa comunque spazio
collapse	Utilizzato principalmente per gli elementi tabella, lo esplorereremo!
inherit	Eredita la visibilità dall'elemento padre

Applica a

La proprietà visibilità può essere applicata a tutti gli elementi HTML. Sì, avete sentito bene - a tutti! Dai div ai paragrafi, dalle immagini alle tabelle, chiamateli come volete, e la visibilità farà la sua magia.

Sintassi DOM

Ora vediamo come possiamo utilizzare la visibilità nel nostro CSS:

element {
visibility: value;
}

Semplice, vero? Sostituite 'element' con l'elemento HTML che volete targetizzare e 'value' con uno dei valori di visibilità discussi in precedenza.

Valore di Visibilità CSS - visible

Iniziamo con il valore predefinito, 'visible'. Ecco un esempio:

<div class="visible-box">Mi vedi?</div>

<style>
.visible-box {
width: 200px;
height: 100px;
background-color: lightblue;
visibility: visible;
}
</style>

In questo esempio, abbiamo creato una scatola di colore azzurro chiaro con il testo "Mi vedi?". La visibilità è impostata su 'visible', il che significa... avete indovinato, la scatola è visibile! Questo è il comportamento predefinito, quindi anche se non avessimo specificato la visibilità, il risultato sarebbe stato lo stesso.

Valore di Visibilità CSS - hidden

Ora, facciamo scomparire le cose! Ecco come usiamo il valore 'hidden':

<div class="hidden-box">Mi vedi...</div>
<div class="visible-box">Ora non mi vedi!</div>

<style>
.hidden-box {
width: 200px;
height: 100px;
background-color: lightpink;
visibility: hidden;
}
.visible-box {
width: 200px;
height: 100px;
background-color: lightgreen;
}
</style>

In questo esempio, abbiamo due scatole. La prima è impostata su 'hidden', quindi non sarà visibile sulla pagina. Tuttavia - e questo è importante - continua a occupare spazio! La seconda scatola apparirà subito dopo lo spazio invisibile della prima scatola.

Questo è diverso da display: none, che rimuove l'elemento dal layout completamente. Pensate a 'hidden' come a un cappotto di invisibilità - l'elemento è ancora lì, просто non lo vedete!

Valore di Visibilità CSS - collapse

Il valore 'collapse' è un po' speciale. È utilizzato principalmente per gli elementi tabella. Vediamo come funziona:

<table>
<tr>
<td>Sono visibile!</td>
<td class="collapsed">Sono collassato!</td>
<td>Sono visibile anche io!</td>
</tr>
</table>

<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
.collapsed {
visibility: collapse;
}
</style>

In questo esempio, la cella centrale della nostra riga di tabella è impostata su 'collapse'. Questo significa che sarà nascosta, e lo spazio che avrebbe occupato sarà preso dagli elementi circostanti. È come se la cella non esistesse!

Visibilità CSS - Collapse su Elementi Non Tabella

Ora, potreste essereWondering, "Cosa succede se uso 'collapse' su un elemento non tabella?" Buona domanda! Il comportamento può variare tra i browser, ma in generale, funzionerà come 'hidden'. Proviamo:

<div class="normal">Sono un div normale</div>
<div class="collapsed">Sono un div collassato</div>
<div class="normal">Sono un altro div normale</div>

<style>
.normal {
background-color: lightyellow;
margin: 5px;
padding: 5px;
}
.collapsed {
background-color: lightcoral;
margin: 5px;
padding: 5px;
visibility: collapse;
}
</style>

In gran parte dei browser, il div 'collapsed' si comporterà come se avesse visibility: hidden. Non sarà visibile, ma continuerà a occupare spazio.

Effetti di Transizione della Visibilità CSS

Ora, le cose diventano davvero divertenti! Possiamo utilizzare le transizioni CSS per creare effetti di visibilità fluidi. Date un'occhiata:

<div class="magic-box">Passa sopra di me!</div>

<style>
.magic-box {
width: 200px;
height: 100px;
background-color: lavender;
visibility: visible;
opacity: 1;
transition: opacity 0.5s, visibility 0.5s;
}
.magic-box:hover {
visibility: hidden;
opacity: 0;
}
</style>

In questo esempio, quando passate sopra la scatola, questa si dissolverà e diventerà invisibile. Quando spostate il mouse via, tornerà a essere visibile. Abbiamo combinato visibilità e opacità per creare questo effetto. Bello, vero?

Ecco fatto, ragazzi! Avete appena imparato i dettagli della visibilità CSS. Ricordate, con grande potere arriva grande responsabilità. Usate le vostre nuove competenze di visibilità saggiamente, e le vostre pagine web vi ringrazieranno!

Prima di concludere, ecco una piccola battuta per voi: Perché l'elemento CSS è andato in terapia? Avere troppe questioni nascoste! ?

Buon coding, e che i vostri elementi siano sempre visibili quando lo desiderate!

Credits: Image by storyset