Unser lieber Freund Robin hat einen neuen Aufsatz mit dem Titel Lob der Schatten. Nun, bevor Sie dort nach Hinweisen zu CSS-Boxschatten, Textschatten und Schattenfiltern suchen… das ist nicht das. Es ist ein Aufsatz über Fotografie und was Robin über den Umgang mit Schatten mit einer Kamera gelernt hat.
Warum also teilen? Weil es verdammt cool ist, dass er eine eigene Seite für einen einzigen Aufsatz erstellt hat. Und Sie werden viel über CSS lernen, wenn Sie DevTools dafür öffnen.
- Zentrierungstechniken. Beachten Sie, wie CSS Grid auf dem
<body>verwendet wird, um einfach die Broschüre zu zentrieren. Dann greift Robin bei jedem.framedes Aufsatzes erneut darauf zurück, um dasselbe mit dem Inhalt zu tun. - „Faux“-Hintergrundbilder. Robin hätte sich viel Arbeit machen können, indem er für jedes
.frameeine CSS-Klasse erstellt hätte, um die Hintergrundbilder zu erhalten. Stattdessen verwendet erobject-fit: coverauf Inline-HTML-<img>s, um das Seitenverhältnis beizubehalten und gleichzeitig den.frame-Container zu füllen. (Er hat zuvor darüber geschrieben.) Das spart sicherlich viel CSS-Arbeit, ermöglicht ihm aber auch, bei Bedarf alternativen Text zu verwenden. Ich frage mich, ob eine<figure>/<figcaption>-Struktur hier stattdessen funktioniert hätte, aber ich bezweifle, dass sie viel zusätzlichen Nutzen für das Geschehen gebracht hätte. - Stacking Contexts. Ein weiterer Vorteil dieser Faux-Hintergrundbilder? Sie verwenden absolute Positionierung, die einen Stacking-Kontext erstellt, was es Robin ermöglicht, den Bildern einen
z-index: 0zuzuweisen. Auf diese Weise stapelt sich der Text mitz-index: 1direkt darüber. Wiederum kümmert sich CSS Grid um die gesamte Zentrierung, sodass alles schön ausgerichtet ist. - Scroll-Snapping. Ich liebe es immer, wenn ich CSS Scroll-Snapping im Einsatz sehe. Robin hat eine gute Wahl getroffen, es hier zu verwenden, da es die ganze Seitenumblätter-Erfahrung beim Scrollen durch Frames wirklich unterstreicht. Horizontales Scrollen kann mühsam sein, aber auch äußerst elegant, wenn es gut ausgeführt wird, wie hier, wo es das schmale Spaltendesign verbessert. Wenn Sie eine gute Erklärung dafür wünschen, wie alles funktioniert, hat Robin auch über horizontales Scroll-Snapping geschrieben.
Wenn nichts anderes, ist Robin ein ausgezeichneter Schriftsteller, und es lohnt sich, alles zu lesen, was er veröffentlicht, ob CSS oder darüber hinaus.