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.
css filter 1 - 10 Instagram Filter mit denen man die Bilder auf der Webseite verschönern kann.

Blur Filter

Mit diesem Filter macht man alles unscharf.
css filter 2 - 10 Instagram Filter mit denen man die Bilder auf der Webseite verschönern kann.

Greyscale Filter

Mit diesem Filter kann man das Bild in Grautöne umwandeln.
css filter 3 - 10 Instagram Filter mit denen man die Bilder auf der Webseite verschönern kann.

Sepia Filter

Mit diesem Filter kann man Bilder künstlich altern lassen.
css filter 4 - 10 Instagram Filter mit denen man die Bilder auf der Webseite verschönern kann.

Saturation Filter

Mit diesem Filter kann man die Sättigung der Farben im Bild verstärken oder reduzieren.
css filter 5 - 10 Instagram Filter mit denen man die Bilder auf der Webseite verschönern kann.

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.
css filter 6 - 10 Instagram Filter mit denen man die Bilder auf der Webseite verschönern kann.

Invert Filter

Mit diesem Filter kann man die Farben umkehren
css filter 7 - 10 Instagram Filter mit denen man die Bilder auf der Webseite verschönern kann.

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.
css filter 8 - 10 Instagram Filter mit denen man die Bilder auf der Webseite verschönern kann.

Brightness Filter

Mit diesem Filter kann man die Helligkeit des Bildes anpassen.
css filter 9 - 10 Instagram Filter mit denen man die Bilder auf der Webseite verschönern kann.

Contrast Filter

Mit diesem Filter kann man die Kontrastfarben des Bildes einstellen.
css filter 10 - 10 Instagram Filter mit denen man die Bilder auf der Webseite verschönern kann.

Video

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





-