Lob der Schatten

Neuauflage von Plato

Verfolger: 0

Unser lieber Freund Robin hat einen neuen Aufsatz namens Im Lob der Schatten. Nun, bevor Sie dort drüben hüpfen und nach Nuggets auf CSS-Box-Schatten, Textschatten und Schattenfiltern suchen … das ist nicht das. Es ist ein Essay über Fotografie und darüber, was Robin gelernt hat, wie man Schatten mit einer Kamera handhabt.

Warum also das teilen? Weil es verdammt cool ist, dass er eine artikelbezogene Seite erstellt hat, die einem Essay gewidmet ist. Und Sie werden viel über CSS lernen, wenn Sie DevTools darauf knacken:

Zentriertechniken. Beachten Sie, wie CSS Grid auf verwendet wird <body> einfach zu Zentrieren Sie die Broschüre. Dann greift Robin erneut nach ihm .frame des Essays dasselbe mit dem Inhalt zu tun.
„Faux“-Hintergrundbilder. Robin hätte sich viel Arbeit machen können, indem er für jeden eine CSS-Klasse erstellt hätte .frame um die Hintergrundbilder zu erhalten. Stattdessen nutzt er object-fit: cover auf Inline-HTML <img>s zum Beibehalten des Seitenverhältnisses beim Füllen der .frame Container. (Das ist er eigentlich darüber geschrieben vorher.) Das erspart sicher eine Menge CSS-Arbeit, erlaubt ihm aber auch, bei Bedarf Alt-Text zu verwenden. Ich frage mich irgendwie, ob a <figure>/<figcaption> Struktur hätte hier stattdessen funktionieren können, aber ich bezweifle, dass es viel zusätzlichen Nutzen für das bieten würde, was vor sich geht.
Kontexte stapeln. Ein weiterer Vorteil dieser falschen Hintergrundbilder? Sie verwenden eine absolute Positionierung, die einen Stapelkontext erstellt, sodass Robin a festlegen kann z-index: 0 auf den Bildern. Auf diese Weise stapelt sich der Text direkt darüber z-index: 1. Auch hier übernimmt CSS Grid die gesamte Zentrierung, damit die Dinge gut ausgerichtet sind.
Scroll-Schnappen. ich immer ich liebe es, wenn ich sehe, wie CSS-Scrolls in freier Wildbahn schnappen. Robin hat eine gute Wahl getroffen, um es hier zu verwenden, da es wirklich das gesamte Erlebnis des Umblätterns von Seiten beim Scrollen durch Frames unterstützt. Horizontales Scrollen kann zum Verrücktwerden, aber auch äußerst elegant sein, wenn es gut ausgeführt wird, da es hier das schmalspaltige Design verbessert. Wenn Sie eine nette Erklärung wünschen, wie alles funktioniert, hat Robin auch eine über horizontales Scrollen geschrieben.