Schwebender Kopfbereich (Floating Header)
In diesem Blogpost werden wir uns mit einem wichtigen Aspekt des Website-Designs beschäftigen: dem Floating Header oder auch schwebender Kopfbereich genannt. In Squarespace können wir diesen ganz einfach mit Hilfe von 5 Zeilen CSS-Code erreichen.
Um einen Floating Header mit abgerundeten Ecken, wie oben im Bild zu sehen, zu erstellen, verwenden wir folgenden Code:
header {
margin: 40px;
border-radius: 20px;
border: 1px solid #fff;
}Dieser Code legt das Aussehen und das Verhalten des Header-Elements in Squarespace fest. Die einzelnen Attribute haben folgende Auswirkungen auf die Gestaltung des schwebenden Kopfbereichs:
margin: 20px; legt einen Abstand von 20px um den Header herum fest. Dies gibt dem Header Platz, um von anderen Elementen auf der Seite abzuheben.
border-radius: 20px; gibt dem Header Ecken mit einem Radius von 20px. Dies erzeugt eine abgerundete Ecke anstelle von scharfen Ecken.
border: 1px solid #fff; fügt einen weißen Rahmen mit einer Breite von 1px um das Element herum hinzu. Dies betont den Header und hebt ihn von anderen Elementen auf der Seite ab.
Der Header schwebt jetzt dauerhaft am oberen Rand des Bildschirms. Wenn du weitere Fragen zur Gestaltung eines floating Headers in Squarespace hast, lasse mir gerne einen Kommentar hier unter dem Post da!
