Gestalten von schönen Schatten in CSS

Avatar of Robin Rendle
Robin Rendle am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Meine Lieblingsart von Blogbeiträgen ist, wenn jemand ein Thema nimmt, über das ich insgesamt nur fünf Minuten nachgedacht habe, und dann sagt: Nein! – Das ist ein riesiges Thema, das eine Dissertation wert ist. Schauen Sie sich all die Dinge an, die Sie mit dieser winzigen CSS-Eigenschaft tun können!

Ich wurde daran erinnert, als ich diesen Beitrag von Josh Comeau über das Gestalten von schönen Schatten in CSS entdeckte

Meiner bescheidenen Meinung nach haben die besten Websites und Webanwendungen eine greifbare, „echte“ Qualität. Viele Faktoren tragen zu dieser Qualität bei, aber Schatten sind eine entscheidende Zutat.

Wenn ich mich im Web umschaue, ist es jedoch klar, dass die meisten Schatten nicht so reichhaltig sind, wie sie sein könnten. Das Web ist voller unscharfer grauer Kästen, die nicht wirklich wie Schatten aussehen.

Josh zeigt die üblichen langweiligen Schattenansätze und erkundet dann alle Möglichkeiten, sie zu verbessern und zu optimieren, um Schatten mit echter Tiefe zu erhalten. Es läuft alles darauf hinaus, Farbe genauer zu betrachten und die box-shadow CSS-Eigenschaft zu erkunden. Und wo wir gerade von Tiefe sprechen, Rob O’Learys „Getting Deep Into Shadows“ ist ein weiterer umfassender Blick auf Schatten.

Ich hatte auch filter: drop-shadow; vollständig vergessen, was besonders nützlich ist, um Schatten zu Bildern hinzuzufügen, die man auf eine Seite werfen möchte. Alles in allem großartige Arbeit.

Direkter Link →