CSS Sichtbarkeitsgenerator

In CSS wird die Eigenschaft visibility verwendet, um die Sichtbarkeit eines HTML-Elements zu steuern. Sie bestimmt, ob ein Element auf der Webseite angezeigt oder ausgeblendet wird, während es weiterhin Platz im Layout einnimmt.

Die Eigenschaft visibility kann zwei Hauptwerte haben:

visible (Standard): Dieser Wert gibt an, dass das Element sichtbar sein und auf der Webseite angezeigt werden soll. Dies ist das Standardverhalten für die meisten HTML-Elemente.

hidden: Dieser Wert gibt an, dass das Element vor der Ansicht ausgeblendet werden soll, aber dennoch Platz im Layout einnimmt. Es macht das Element effektiv unsichtbar, aber es reduziert nicht den Platz, den es einnimmt.

Die Verwendung der Eigenschaft visibility mit hidden kann nützlich sein, wenn Sie die Sichtbarkeit eines Elements dynamisch mit JavaScript oder CSS-Übergängen umschalten möchten, ohne das Layout der umgebenden Elemente zu beeinträchtigen.

Es ist wichtig zu beachten, dass das Festlegen der Sichtbarkeit eines Elements auf hidden das Element visuell ausblendet, es aber dennoch im DOM (Document Object Model) vorhanden ist. Wenn Sie ein Element vollständig aus dem DOM entfernen möchten, können Sie die Eigenschaft display mit dem Wert none verwenden.

Hier ist ein Beispiel für die Verwendung beider Eigenschaften:

In diesem Fall entfernt die Eigenschaft display: none; das Element aus dem Layout und dem DOM, während visibility: hidden; das Element ausblendet, aber seinen Platz im Layout beibehält.