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

als ein Behälter.

Der Code sieht so aus:

Vergessen Sie nicht, die CSSgram-Bibliothek (hier) in Ihr HTML-Dokument aufzunehmen.

Ich habe die Bilder Demo vor und nach dem Hinzufügen von Filter erstellt und das Ergebnis ist sehr schön. Derzeit sind 13 Filter in der Bibliothek enthalten. Unten sehen Sie die Unterschiede zwischen dem Originalbild und dem Bild unter den Filtern " 1977 ", " Aden " und " Gingham ".

Siehe den Stift rOKPmW

Wenn Sie nur einen der Stile verwenden möchten, können Sie die einzelnen CSS-Dateien entsprechend laden.

Verwenden von SCSS

Wenn Sie die Filter Ihrer aktuellen Bildcontainerklasse ohne Namensänderung hinzufügen möchten, können Sie den Filtereffekt in Ihren SCSS-Dateien erweitern. Hier ist, wie es geht.

Laden Sie zuerst die SCSS-Quelldatei herunter und importieren Sie Ihre SCSS-Datei.

 @import 'Verkäufer / cssgram'; 

Angenommen, Sie haben die HTML-Struktur wie folgt:

Dann erweitere den Filter in deiner style.scss folgendermaßen:

 .my-class {... @extend% _1977; } 

Mehr Instagram Beiträge

• 40 Tools & Apps, um dein Instagram-Konto zu erweitern
• 20 nützliche Apps, um Instagram optimal zu nutzen
• 10 nützliche Instagram Tipps & Tricks, die Sie wissen sollten

9 coolste Kinder, die Sie definitiv inspirieren werden!

Kinder erstaunt mich immer mit ihren brutal ehrlichen Meinungen, ihrer geradlinigen Herangehensweise an Schwarz oder Weiß mit wenig oder gar keiner Sorge für das, was unter den Schatten von Grau fällt, sowie ihrem unerschrockenen Bedürfnis Gerechtigkeit zu sehen, wo und wann es ist am meisten benötigt. Heu

(Tech- und Design-Tipps)

10 Datenrettungs-Tools, die Sie kostenlos herunterladen können [Windows]

Es passiert den Besten von uns. Wir arbeiten an dieser sehr wichtigen Datei, wenn plötzlich eine Katastrophe eintritt. Es wird versehentlich gelöscht, beschädigt, der Computer starb oder eine Reihe von unglücklichen Dingen, die Sie daran hindern, Zugriff auf die Datei zu erhalten. Was noch schlimmer ist, Sie haben kein Backup und brauchen dringend diese wichtigen Dateien dringend.Nun

(Tech- und Design-Tipps)