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); }

Auf Twitter bin ich über einen cleveren Trick von Flavio gestolpert. Mit folgendem Quellcode kann man auch unterschiedliche Bilder beim Wechseln zwischen hellem und dunklem Modus nutzen. <picture> <source srcset="dank.png" media="(prefers-color-scheme: dark)"> <img src="bright.png"> </picture>

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),