כיצד ליישם מסננים Instagram על תמונות אינטרנט

אהבה רבים באמצעות Instagram ואת המסננים שמגיעים עם האפליקציה, כדי להפוך את התמונות שלהם יותר מעניין ויפה. עד כה, השימוש במסננים אלה מוגבל לשימוש בתוך האפליקציה. מה אם אתה רוצה להשתמש מסננים Instagram על תמונות אינטרנט, מחוץ לאפליקציה, כמו תמונות שאתה רוצה לשים בבלוג האישי שלך או באתר?

ובכן, אתה יכול להשתמש CSSGram, ספרייה קטנה המאפשרת לך לערוך את התמונות שלך עם מסננים דומים למה שאתה יכול למצוא על App Instagram. בניגוד Photoshop שבו עריכות ידני או נעשה באמצעות פעולות Photoshop, עם CSSGram, כל התהליך נעשה באמצעות CSS.

איך זה עובד

כדי ליצור את האפקט, CSSGram מנצל מסנני CSS ו מצב תערובת CSS, בעצם מיזוג את ההשפעות עד לנקודה שבה היא מחקה את מסנן Instagram הרצוי. ההשפעות מוחלות על מיכל התמונה, באמצעות אלמנטים פסאודו. בואו לבדוק איך זה נעשה עם דוגמה זו "1977":

הנה האלמנט המדומה שנוסף.

 ._1977 מיקום: יחסית;  ._1977: אחרי content: "; display: block; height: 100%; width: 100%; top: 0; left: 0; Position: מוחלט; 

וזה מסנן CSS ו- Blend הוסיף:

 ._1977 -webkit-filter: ניגודיות (1.1) בהירות (1.1) רוויה (1.3); מסנן: ניגודיות (1.1) בהירות (1.1) רוויה (1.3);  ._1977: אחרי background: rgba (243, 106, 188, 0.3); ערבוב- blend מצב: מסך;  

איך להישתמש

אנחנו לא יכולים להוסיף את המעמד מסנן ישירות אל רכיב התמונה, זה צריך להיות הוסיף את המיכל או בכיתה האב, למשל עם

 @import 'ספק / cssgram'; 

 .השיעור שלי ... @extend% _1977;