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
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
Self-hosted Cloud Storage: Nextcloud vs. ownCloud vs. Seafile
Planen Sie, Ihren eigenen Dropbox-Cloudspeicher für Ihr Team oder Geschäft zu erstellen? Obwohl es verschiedene selbst gehostete Cloud-Lösungen für die Erstellung einer privaten Cloud gibt, werden diese nicht alle Ihren Anforderungen entsprechen.Aus diesem Grund werde ich in diesem Beitrag den drei wichtigsten selbst gehosteten Cloud-Speicherlösungen NextCloud, ownCloud und Seafile gegenübertreten, um Ihnen dabei zu helfen, das Beste auszuwählen. Bei d
40 iPhone 8 und iPhone X PSDs und Vorlagen
Apple hat vor kurzem seine mit Spannung erwarteten Handys iPhone 8, iPhone 8 Plus und iPhone X mit futuristischen Funktionen und verschiedenen Preispunkten auf den Markt gebracht. Für iPhone-Enthusiasten bedeutet das, dass sie ihre Taschen leeren müssen, um die neuen Telefone zu bekommen. Für Web- und Grafikdesigner bedeutet das jedoch, Mock-ups und Vorlagen für die Designs der neuen Telefone zu finden.Für