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

Visualisieren Sie Ihre Farbpaletten online mit Speculo

Der typische Mock-up-Prozess kann sich wie eine lästige Arbeit anfühlen. Sie müssen zwischen Photoshop (oder Sketch) wechseln, um Farben, Schriftarten und Stile zu ändern und sie alle zu vergleichen, um zu sehen, was Ihnen am besten gefällt.Wenn Sie mit einem Werkzeug wie Speculo arbeiten, können Sie Farbpaletten direkt in Ihrem Browser dynamisch untersuchen und vergleichen . Dies

(Tech- und Design-Tipps)

13 beste iOS-Apps zum Erstellen und Bearbeiten von GIFs

GIF-Animationen sind kleine komprimierte Dateien mit Schleifenspaß, die meistens für Meme verwendet werden. Während Sie GIFs direkt aus einem Browser heraus erstellen können (so machen Sie das in Chrome) oder aus Web-Apps wie diesen, bevorzugen wir heutzutage Tools, die GIFs unserer persönlichen Fotos oder Videos erstellen oder bearbeiten können .Wenn

(Tech- und Design-Tipps)