Clever: 20 Bildeffekte mit CSS

CSS Blendmodes und Filter erlauben Effekte, die bis dato so nicht machbar waren. Wendest du die neuen Möglichkeiten auf Bilder an, so kannst du durch die clevere Stapelung oder Wiederholung mehrerer Eigenschaften sogar noch beeindruckendere Effekte erschaffen. Und das alles nondestruktiv.

Bennett Feely und seine Codeschnipsel

Bennett Feely aus Pittsburgh in Pennsylvania legt mit seinem Projekt Image-Effects auf Github ein Beispiel dafür vor, wie du unter kluger Verwendung von Kombinationen oder Wiederholungen verschiedener moderner CSS-Eigenschaften Effekte schaffst, für die du bisher nicht rein auf CSS gesetzt hättest.

Zwanzig Effekte hat Bennett gebaut. Alle zeigt er auf das gleiche Ausgangsbild angewendet und mit dem vollständigen erforderlichen Code-Schnipsel in CSS und SCSS. Dabei kannst du von der Demoseite aus direkt die Snippets auskopieren oder zu Codepen wechseln, wo du mit den Einstellungen und einer Live-Preview spielen kannst.

Zusätzlich stellt Bennett alle Effekte als CSS-Bibliothek bereit, die du unproblematisch in deine Projekte einbauen kannst und die komprimiert nur 1300 Bytes auf die Waage bringt. In der unkomprimierten Variante von 12,8 Kilobyte kannst du natürlich bequemer arbeiten ;-)

Generell kannst du die Effekte out-of-the-box nutzen. Bennett empfiehlt richtigerweise jedoch, dass du einzelne Parameter nochmal anfassen solltest – je nachdem, welches Bild du darstellen willst.

Bennetts Image-Effects nutzen @supports zur Feature Detection. Wenn erkannt wird, dass ein Browser die eingestellten Eigenschaften und Werte nicht darstellen kann, wird das Bild ohne Effekte gezeigt. Mit dieser Art von Fallback wird man wohl leben können.

So einfach ist der Einsatz

Die einzelnen Effekte sind als Klassen definiert, die du entsprechend auf deine Bilder anwendest. Das geschieht am einfachsten, indem du einen Div-Container mit der jeweiligen Klasse versiehst und darin dein Bild platzierst.

Um keine seltsamen Anfangseffekte zu haben, solltest du deinem Bild die korrekten Werte für Höhe und Breite mitgeben. So stellst du sicher, dass der Browser direkt die richtige Bildgröße als Platzhalter verwendet.