Wir leben in einer Zeit wo Bilder sehr wichtig sind. Bilder transportieren oft mehr als einfache Sätze und das ist ein Segen wie auch ein Fluch. Der Fluch ist, man weiss nie wie die Wirklichkeit aussieht, überall wird nur manipuliert oder weggelassen, aber etwas ist auch cool und zwar hat man viele Filter um die graue, triste Welt schöner zu machen.

Ich denke genau aus diesen Gründen ist Instagram so erfolgreich. Man kann sich da eine eigene Wirklichkeit schaffen und dem Alltag kurzzeitig entfliehen.

Heute möchte ich euch zeigen, wie man solche Filter auch auf einer Webseite einbauen kann – denn es gibt auch hier CSS Filter die fast so stark sind wie die auf Instagram.

Heute möchte ich euch 10 solche Filter vorstellen.

Das Originalbild

Ich nehme diese kleine Blumenwiese als Beispielbild und die Filter werden via CSS eingebaut. Die Bilder sind immer gleich aufgebaut, auf der rechten Seite seht ihr das Resultat und auf der linken Seite den Code.

Blur Filter

Mit diesem Filter macht man alles unscharf.

Greyscale Filter

Mit diesem Filter kann man das Bild in Grautöne umwandeln.

Sepia Filter

Mit diesem Filter kann man Bilder künstlich altern lassen.

Saturation Filter

Mit diesem Filter kann man die Sättigung der Farben im Bild verstärken oder reduzieren.

Hue Rotation Filter

Mit diesem Filter kann man die Farben drehen. Ich weiss das klingt jetzt etwas komisch, aber stellt euch einen Farbenkreis vor und ihr könnt mit Grad die Farben nach links oder rechts verändern.

Invert Filter

Mit diesem Filter kann man die Farben umkehren

Opacity Filter

Wenn ihr Bilder durchsichtiger machen wollen, braucht ihr den Opacity Filter. Damit lässt sich nämlich regeln wie fest durchsichtig das Bild sein sollte.

Brightness Filter

Mit diesem Filter kann man die Helligkeit des Bildes anpassen.

Contrast Filter

Mit diesem Filter kann man die Kontrastfarben des Bildes einstellen.

Video

Wer mehr wissen will, kann hier noch das Video schauen. Hier zeige ich direkt wie man die Bilder verschönern kann.