Πώς να εφαρμόσετε φίλτρα Instagram σε εικόνες Ιστού

Πολλοί αγαπούν το Instagram και τα φίλτρα που έρχονται με την εφαρμογή, για να κάνουν τις φωτογραφίες τους πιο ενδιαφέρουσες και όμορφοι. Μέχρι στιγμής, η χρήση αυτών των φίλτρων περιορίζεται στη χρήση μέσα στην εφαρμογή. Τι γίνεται αν θέλετε χρησιμοποιήστε φίλτρα Instagram σε εικόνες ιστού, εκτός από την εφαρμογή, όπως τις φωτογραφίες που θέλετε να τοποθετήσετε στο προσωπικό σας ιστολόγιο ή ιστότοπο?

Λοιπόν, μπορείτε να χρησιμοποιήσετε το CSSGram, μια μικρή βιβλιοθήκη που σας επιτρέπει να κάνετε επεξεργαστείτε τις φωτογραφίες σας με φίλτρα που είναι παρόμοια με αυτά που μπορείτε να βρείτε στην εφαρμογή Instagram. Σε αντίθεση με το Photoshop όπου οι επεξεργασίες είναι χειροκίνητες ή γίνεται μέσω ενεργειών του Photoshop, με το CSSGram, όλη η διαδικασία γίνεται μέσω CSS.

Πως δουλεύει

Για να δημιουργήσει το αποτέλεσμα, χρησιμοποιεί το CSSGram Φίλτρα CSS και CSS blend mode, Συνδυάζοντας ουσιαστικά τα αποτελέσματα με το σημείο που μιμείται το επιθυμητό φίλτρο Instagram. Τα αποτελέσματα εφαρμόζονται στο δοχείο εικόνας, μέσω ψευδο-στοιχείων. Ας δούμε πώς γίνεται αυτό με αυτό το παράδειγμα "1977":

Εδώ είναι το ψευδο-στοιχείο που προστέθηκε.

 ._1977 θέση: συγγενής;  ._1977: μετά από περιεχόμενο: "· εμφάνιση: μπλοκ · ύψος: 100% · πλάτος: 100% · κορυφή: 0 · αριστερά: 0 · θέση: απόλυτη · 

Και αυτό είναι το φίλτρο CSS και το Blend πρόσθεσε:

 ._1977 -webkit-φίλτρο: αντίθεση (1.1) φωτεινότητα (1.1) κορεσμός (1.3); φίλτρο: αντίθεση (1.1) φωτεινότητα (1.1) κορεσμός (1.3);  ._1977: μετά από φόντο: rgba (243, 106, 188, 0.3); mix-mode-mode: οθόνη?  

Πώς να χρησιμοποιήσετε

Δεν μπορούμε να προσθέσουμε την κλάση φίλτρου απευθείας στο στοιχείο εικόνας, πρέπει να προστεθεί στην κλάση κοντέινερ ή γονέα, για παράδειγμα με

 @import 'πωλητής / cssgram'; 

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