CSS

CSS Loaders ist eine umfangreiche Kollektion an Ladebalken die mittels CSS Animation gebaut wurden. Danke an Temani Afif für die tolle Sammlung.

Wie Matsuko, finde ich Videos manchmal ebenfalls zu dunkel, wenn ich abends Netflix oder YouTube schaue. In der Regel stelle ich dann den Bildschirm heller, ich würde aber lieber nur das Video heller stellen. Mit dem folgenden Codeschnipsel kann man genau das tun. /* Brighter Netflix and YouTube videos */ video[src^="blob:https://www.netflix.com/"], video[src^="blob:https://www.youtube.com/"] { filter: brightness(1.4); }

Solltet ihr ein Gerät nutzen, das einen Darkmode hat, so färbt sich dieses kleine Blog nun auch entsprechend eurer Systemeinstellung. Mit Hilfe der Beschreibung von Jeremy Keith konnte ich das ganz schnell umsetzen. Eigentlich ist es sehr, sehr einfach. Einfach den folgenden Code in seine style.css packen und die gewünschten CSS-Eigenschaften für den Darkmode hinterlegen. @media (prefers-color-scheme: dark) { /* Darkmode CSS-Eigenschaften hier */ } Man könnte jetzt noch überlegen, ob man einen Schalter im Blog möchte, mit dem man die Einstellung überschreiben kann. Thomas Steiner beschreibt das hier auch ganz gut. ...

Schatten in CSS von Hand zu schreiben ist zwar möglich aber ein Krampf. Es gibt schon seit Jahren diverse Tools, um visuell schöne Schatten zu erstellen. Ein weiteres Tool ist von Philipp Brumm. Smooth Shadow Für alle die nicht wissen was gemeint ist, ein simpler Schatten in CSS kann so aussehen: box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028),

Was man inzwischen mit reinem CSS anstellen kann ist schon erstaunlich. Was man alles in einem einzigen div bekommt, zeigt die Seite A Single Div von Lynn Fisher. Von Köpfen, über Süßigkeiten, Comicfiguren hin zu schönen Symbolen ist alles dabei. Wirklich beeindruckende Spielerei. Thank you Stefan