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

Elemente im CSS-Grid-Layout verschieben [Guide]

Die Verwendung des CSS-Grid-Layout-Moduls im Webdesign wird immer praktikabler, je mehr Browser es unterstützen . Beim Erstellen von Layouts, die Gitterzellen füllen, kann es jedoch einen Moment dauern, wenn Sie kompliziertere Dinge erreichen möchten.Zum Beispiel möchten Sie vielleicht einige Gitterelemente, die in ihren Gitterbereichen hängen bleiben, etwas bewegen . Sie

(Tech- und Design-Tipps)

So messen Sie die Leistung der Front-End-Website

Apropos Optimierungsprozess ist bei New-Age-Webdesignern fast nicht vorhanden. Sogar viele Webdesigner, die ein Jahrzehnt oder länger im Geschäft waren, verstehen die Bedeutung der Standortoptimierung nicht vollständig.Nach einer längeren Zeit wird eine Website anfangen zu bombardieren. Die Frontend-Dateien können übertriebene Code-Blöcke oder gesperrte versteckte Bits enthalten. Dies

(Tech- und Design-Tipps)