Paradies Für Designer Und Entwickler

Wie man Instagram-Filter auf Web-Bilder anwendet

Viele lieben Instagram und die Filter, die mit der App geliefert werden, um ihre Fotos interessanter und schöner zu machen. Bisher ist die Verwendung dieser Filter jedoch auf die Verwendung innerhalb der App beschränkt. Was ist, wenn Sie Instagram-Filter für Web-Bilder außerhalb der App verwenden möchten, z. B. Fotos, die Sie in Ihrem persönlichen Blog oder auf Ihrer eigenen Website veröffentlichen möchten?

Nun, Sie können CSSGram verwenden, eine kleine Bibliothek, mit der Sie Ihre Fotos mit Filtern bearbeiten können, die denen in der Instagram-App ähnlich sind . Im Gegensatz zu Photoshop, wo Bearbeitungen manuell oder über Photoshop-Aktionen ausgeführt werden, erfolgt der gesamte Prozess mit CSSGram über CSS.

Wie es funktioniert

Um den Effekt zu erzeugen, verwendet CSSGram CSS-Filter und den CSS-Blend-Modus. Dabei werden die Effekte im Grunde so verschmolzen, dass sie den gewünschten Instagram-Filter nachahmen. Die Effekte werden über Pseudoelemente auf den Bildcontainer angewendet. Schauen wir uns an, wie das mit diesem "1977" Beispiel gemacht wird:

Hier ist das Pseudo-Element hinzugefügt.

 ._1977 {Position: relativ; } ._1977: nach {content: ''; Bildschirmsperre; Höhe: 100%; Breite: 100%; oben: 0; links: 0; Position: absolut; }

Und das ist der CSS-Filter und Blend hinzugefügt:

 ._1977 {-Webkit-Filter: Kontrast (1.1) Helligkeit (1.1) Sättigung (1.3); Filter: Kontrast (1.1) Helligkeit (1.1) Sättigung (1.3); } ._1977: after {Hintergrund: rgba (243, 106, 188, 0.3); Mix-Blend-Modus: Bildschirm; }

Wie benutzt man

Wir können die Filterklasse nicht direkt zum Bildelement hinzufügen, sie muss dem Container oder der übergeordneten Klasse hinzugefügt werden, zum Beispiel mit