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.

image-effects-landing

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.

image-effects-infrared

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

image-effects-coloredpencil

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.

1
2
3
<div class="emboss-effect">
  <img width="" height="" src="photo.jpg" alt="">
</div>

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.

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

3 Kommentare auf "Clever: 20 Bildeffekte mit CSS"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
loewenherz
Gast

Lustig, dass der Leuchtturm aus dem Film ‚The fog‘. :-)

loewenherz
Gast

Ich meinte, ‚das ist‘ der Leuchtturm aus dem Film …

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen