Snook veröffentlichte einen Artikel mit dem Titel „Überlappender Header mit CSS-Raster“, in dem er sich mit einem Header-Designmuster befasst, das meiner Meinung nach über Trends hinausgeht und seit jeher beliebt ist. Die Idee ist, dass der Header übergroß ist und sich der Hauptinhaltsbereich hineinschleicht und den Hintergrund des Headers überlappt. Es hat einfach etwas Schönes und Tröstendes.
Meine Gedanken gehen an den gleichen Ort, an dem Snooks:
Historisch gesehen habe ich dies mit negativen Rändern gemacht. Der Header hat eine Höhe, die der Unterseite eine Reihe von Polstern hinzufügt, und dann erhält der Körper eine
margin-top: -50pxoder was auch immer das Design verlangt.
Aber dann entscheidet er sich stattdessen für das CSS-Raster! Interessant. Warum? Darauf werden wir uns einlassen. Das Gitter kann sich einfach stabiler anfühlen (und tatsächlich stabiler sein). Das Raster kann auch flexibler sein. Zum Beispiel max-heightund die autoRänder lassen sich gut zentrieren, aber was ist, wenn Sie ungleichmäßige Dachrinnen an den Rändern wünschen? Das wäre dort schwer und mit Grid einfach. Ethan Marcotte schrieb:
Anstatt nur standardmäßig
max-widtheine Einschränkung zu verwenden, kann ich den leeren Bereich um mein Design verwenden und ihn als Layout-Tool behandeln.
Ich versuche, Snooks Idee in diesem Video zurückzuentwickeln und sie dann letztendlich mit meinem Endergebnis zu vergleichen.
- Snooks
- Meins (aus ästhetischen Gründen ein Smidge-Post-Video aufgeräumt)