So wenden Sie Instagram-Filter auf Webbilder an

Viele lieben Instagram und die mit der App gelieferten Filter, um ihre Fotos interessanter und schöner zu gestalten. Bisher ist die Verwendung dieser Filter jedoch nur innerhalb der App zulässig. Was ist, wenn du willst Verwenden Sie Instagram-Filter für Webbilder, Außerhalb der App, z. B. Fotos, die Sie in Ihrem persönlichen Blog oder auf Ihrer Website veröffentlichen möchten?

Nun, Sie können CSSGram verwenden, eine kleine Bibliothek, die es Ihnen ermöglicht Bearbeiten Sie Ihre Fotos mit Filtern, die denen der Instagram-App ähneln. Im Gegensatz zu Photoshop, bei dem Änderungen manuell oder über Photoshop-Aktionen vorgenommen werden, erfolgt der gesamte Vorgang mit CSSGram über CSS.

Wie es funktioniert

Um den Effekt zu erzeugen, verwendet CSSGram CSS-Filter und CSS-Mischmodus, Im Wesentlichen werden die Effekte so gemischt, dass sie den gewünschten Instagram-Filter nachahmen. Die Effekte werden über Pseudoelemente auf den Bildcontainer angewendet. Schauen wir uns an, wie dies mit diesem "1977" -Beispiel gemacht wird:

Hier ist das Pseudoelement hinzugefügt.

 ._1977 position: relativ;  ._1977: after content: "; display: block; height: 100%; width: 100%; top: 0; left: 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: nach Hintergrund: rgba (243, 106, 188, 0.3); Mix-Mix-Modus: Bildschirm;  

Wie benutzt man

Wir können die Filterklasse nicht direkt zum image-Element hinzufügen. Sie muss dem Container oder der übergeordneten Klasse hinzugefügt werden, z. B. mit

 @import 'vendor / cssgram'; 

 .my-class … @extend% _1977;