CSS - Sichtbarkeit: Elemente appear und verschwinden lassen

Hallo da draußen, ambitionierte Web-Entwickler! Heute tauchen wir ein in die faszinierende Welt der CSS-Sichtbarkeit. Als dein freundlicher Nachbarschafts-Computerlehrer freue ich mich darauf, dich auf dieser Reise zu führen. Am Ende dieses Tutorials wirst du in der Lage sein, Elemente wie ein echter CSS-Zauberer verschwinden und wieder erscheinen zu lassen!

Was ist CSS-Sichtbarkeit?

Bevor wir mit unseren CSS-Zauberstäben wedeln, lassen Sie uns verstehen, worum es bei der Sichtbarkeit geht. In einfachsten Worten kontrolliert die CSS-Sichtbarkeit, ob ein Element auf einer Webseite sichtbar oder versteckt ist. Es ist wie ein Versteckspiel mit deinen HTML-Elementen!

Mögliche Werte

Schauen wir uns die verschiedenen Werte an, die wir mit der Sichtbarkeits-Eigenschaft verwenden können:

Wert	Beschreibung
visible	Das Element ist sichtbar (dies ist die Vorgabe)
hidden	Das Element ist versteckt, aber nimmt dennoch Platz ein
collapse	Hauptsächlich für Tabellen-Elemente verwendet, das werden wir besprechen!
inherit	Erbt die Sichtbarkeit von seinem übergeordneten Element

Anwendungsbereich

Die Sichtbarkeits-Eigenschaft kann auf alle HTML-Elemente angewendet werden. Ja, du hast richtig gehört - alle von ihnen! Von Divs über Absätze, Bilder bis hin zu Tabellen, du sagst es, und Sichtbarkeit wird ihre Magie entfalten.

DOM-Syntax

Nun schauen wir uns an, wie wir Sichtbarkeit in unserem CSS verwenden können:

element {
visibility: value;
}

Einfach, oder? Ersetze 'element' mit dem HTML-Element, das du ansprechen möchtest, und 'value' mit einem der Sichtbarkeitswerte, die wir earlier besprochen haben.

CSS-Sichtbarkeit - visible Wert

Lassen Sie uns mit dem Standardwert 'visible' beginnen. Hier ist ein Beispiel:

<div class="visible-box">Kannst du mich sehen?</div>

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

In diesem Beispiel haben wir eine hellblaue Box mit dem Text "Kannst du mich sehen?" erstellt. Die Sichtbarkeit ist auf 'visible' gesetzt, was bedeutet... du hast es erraten, die Box ist sichtbar! Dies ist das Standardverhalten, sodass selbst wenn wir die Sichtbarkeit nicht angegeben hätten, das Ergebnis das gleiche wäre.

CSS-Sichtbarkeit - hidden Wert

Nun, lassen Sie uns Dinge verschwinden lassen! Hier ist, wie wir den 'hidden'-Wert verwenden:

<div class="hidden-box">Nun siehst du mich...</div>
<div class="visible-box">Nun siehst du mich nicht!</div>

<style>
.hidden-box {
width: 200px;
height: 100px;
background-color: hellrosa;
visibility: hidden;
}
.visible-box {
width: 200px;
height: 100px;
background-color: hellgrün;
}
</style>

In diesem Beispiel haben wir zwei Boxen. Die erste ist auf 'hidden' gesetzt, sodass sie nicht auf der Seite sichtbar ist. Allerdings - und das ist wichtig - sie nimmt immer noch Platz ein! Die zweite Box wird direkt nach dem unsichtbaren Raum der ersten Box erscheinen.

Dies unterscheidet sich von display: none, das das Element vollständig aus dem Layout entfernt. Denke von 'hidden' als einer Unsichtbarkeitskappe - das Element ist immer noch da, du kannst es nur nicht sehen!

CSS-Sichtbarkeit - collapse Wert

Der 'collapse'-Wert ist etwas особенный. Er wird hauptsächlich für Tabellen-Elemente verwendet. Lassen Sie uns ihn in Aktion sehen:

<table>
<tr>
<td>Ich bin sichtbar!</td>
<td class="collapsed">Ich bin zusammengebrochen!</td>
<td>Ich bin auch sichtbar!</td>
</tr>
</table>

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

In diesem Beispiel ist die mittlere Zelle unserer Tabellenzeile auf 'collapse' gesetzt. Das bedeutet, sie wird versteckt und der Platz, den sie einnehmen würde, wird von den umgebenden Zellen eingenommen. Es ist, als wäre die Zelle nie existiert!

CSS-Sichtbarkeit - Collapse auf Nichatabellen-Elementen

Nun könntest du dich fragen, "Was passiert, wenn ich 'collapse' auf ein nicht-tabellen-Element anwende?" Gute Frage! Das Verhalten kann zwischen Browsern variieren, aber im Allgemeinen wird es wie 'hidden' funktionieren. Lassen Sie es uns ausprobieren:

<div class="normal">Ich bin ein normales Div</div>
<div class="collapsed">Ich bin ein zusammengebrochenes Div</div>
<div class="normal">Ich bin ein anderes normales Div</div>

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

In den meisten Browsern wird das 'collapsed' Div wie bei visibility: hidden verhalten. Es wird nicht sichtbar sein, aber es wird immer noch Platz einnehmen.

CSS-Sichtbarkeit - Übergangseffekte

Hier wird es wirklich spannend! Wir können CSS-Übergänge verwenden, um flüssige Sichtbarkeits-Effekte zu erstellen. Schau dir das an:

<div class="magic-box">Bewege die Maus über mich!</div>

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

In diesem Beispiel wird die Box, wenn du mit der Maus darüber fährst, sanft ausblenden und unsichtbar werden. Wenn du die Maus wegholst, wird sie wieder einblenden. Wir haben Sichtbarkeit mit Opazität kombiniert, um diesen Effekt zu erzielen. Cool, oder?

Und da hast du es, Leute! Du hast gerade die ins und outs der CSS-Sichtbarkeit gelernt. Erinnere dich daran, dass mit großer Macht große Verantwortung verbunden ist. Verwende deine neuen Sichtbarkeitsfähigkeiten weise, und deine Webseiten werden es dir danken!

Bevor wir aufhören, hier ist ein kleiner Witz für dich: Warum ist das CSS-Element zur Therapie gegangen? Es hatte zu viele verborgene Probleme! ?

Frohes Coden, und möge deine Elemente immer sichtbar sein, wenn du sie sehen möchtest!

Credits: Image by storyset