Bilder mit CSS on the fly bearbeiten

Bildbearbeitung ist ein Thema für sich und bedarf den geübten Umgang mit der richtigen Bildbearbeitungssoftware. Doch einfache und bekannte Effekte wie Kontrast, Helligkeit, Unschärfe und Sepia lassen sich schon mit wenigen Handgriffen on-the-Fky mit CSS umsetzen. Wie? Das erfahrt Ihr in diesem Artikel!

Bilder sind ein sehr wichtiges Mittel bei der Gestaltung der eigenen Webseite und des eigenen Blogs. Sie geben einen ersten Eindruck des Inhalts und dienen dazu das Interesse des Lesers zu wecken. Dabei spielen auch kleine Effekte und Filter ein große Rolle. Diese kann man entweder vorher in einem Grafikprogramm hinzufügen oder seit einiger Zeit auch on-the-fly mit CSS.

Um Bereiche einer Webseite mit CSS-Befehlen zu verändern gibt es drei verschiedene Möglichkeiten:

CSS auslagern und im HTML Code darauf verweisen

Die erste Methode ist die gängigste im Web und lagert die CSS-Definitionen in eine extra Datei auf dem Server aus. In dem dazugehörigen HTML Code wird dabei ganz am Anfang auf die Style-Sheet verwiesen. Das sieht ungefähr so aus:

<link href="style.css" type="text/css" rel="stylesheet">

CSS Code direkt einbinden

Eine weitere Möglichkeit besteht darin, die Anweisungen direkt im HTML-Code um das entsprechende Element herum zu schreiben. Diese Lösung wird meist dann verwendet, wenn schon eine allgemeine Design-Definition für diese Art von Elementen in einer ausgelagerten CSS definiert wurde und nur ein spezielles Element anders aussehen soll.

<span style="background-color: red;">......</span>

CSS Code in separatem HTML Block definieren

Soll die CSS Anweisung innerhalb der HTML Codes mal etwas länger sein definiert man am besten einen eigenen Block. Das kann dann zum Beispiel so aussehen:

<style type="text/css">
.img {
    border: 2px;
    border-color: green;
    ...
}
</style>

Bilder mit CSS bearbeiten (Filter verwenden)

Möchte man seine Bilder nachträglich mit ein wenig CSS aufpeppen, eignet sich die erste Methode, wie man CSS-Anweisungen einbindet, am Besten. Für alle weiteren CSS-Anpassungen ist natürlich die ausgelagerte CSS zu verwenden.

Unschärfe mit CSS

Einen einfachen Filter mit einer Unschärfe kann man schnell und einfach mit folgendem Code umsetzen:

-webkit-filter: blur(5px); 
filter: blur(5px);

 

css-filter-on-the-fly

Helligkeit mit CSS anpassen

Möchte man etwas an der Helligkeit eines Bildes schrauben, eignet sich dieser Befehl dafür:

-webkit-filter: brightness(.5); 
filter: brightness(.5);

 

css-filter-on-the-fly

Kontrastanpassungen

Auch der Kontrast ganz einfach mittels CSS verändert und angepasst werden:

-webkit-filter: contrast(3);
filter: contrast(3);

 

css-filter-on-the-fly

Sepiaeffekt

Für den Sepiaeffekt ist ebenfalls nur ein kleiner Code-Schnipsel notwendig:

-webkit-filter: sepia(1);
filter: sepia(1);

 

css-filter-on-the-fly

Weitere Effekte/ Filter

  • Sättigung
    • -webkit-filter: saturate(4); filter: saturate(4);
  • Deckkraft
    • -webkit-filter: opacity(.5); filter: opacity(.5);
  • Farbton
    • -webkit-filter: sepia(1) hue-rotate(200deg); filter: sepia(1) hue-rotate(200deg);
  • Umkehren
    • -webkit-filter: invert(.8); filter: invert(.8);

Adobe hat ein Tool online gestellt, mit dem man die filter die mit CSS möglich sind live testen kann. Weitere tolle Effekte findet ihr unter:

https://css-tricks.com/almanac/properties/f/filter/

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.