كيفية تطبيق عوامل تصفية Instagram على صور الويب

يحب الكثيرون استخدام Instagram والمرشحات التي تأتي مع التطبيق ، لجعل صورهم أكثر تشويقًا وجمالًا. حتى الآن ، فإن استخدام هذه المرشحات مقيّد للاستخدام داخل التطبيق. ماذا لو كنت تريد استخدام مرشحات Instagram على صور الويب, خارج التطبيق ، مثل الصور التي تريد وضعها في مدونتك أو موقعك الشخصي?

حسنًا ، يمكنك استخدام CSSGram ، وهي مكتبة صغيرة تسمح لك بذلك قم بتعديل صورك باستخدام مرشحات مشابهة لما يمكنك العثور عليه في تطبيق Instagram. بخلاف Photoshop حيث تكون التعديلات يدوية أو تتم عبر إجراءات Photoshop ، مع CSSGram ، تتم العملية برمتها عبر CSS.

كيف تعمل

لتوليد التأثير ، يستخدم CSSGram مرشحات CSS و وضع مزيج CSS, مزج التأثيرات بشكل أساسي إلى النقطة التي تحاكي فيها مرشح Instagram المطلوب. يتم تطبيق التأثيرات على حاوية الصورة ، عبر العناصر الزائفة. دعنا نتحقق من كيفية القيام بذلك من خلال مثال "1977":

وإليك عنصر الزائفة المضافة.

 ._1977 موقف: نسبي؛  ._1977: بعد content: "؛ display: block ؛ الارتفاع: 100٪ ؛ العرض: 100٪ ؛ top: 0 ؛ left: 0 ؛ الموضع: مطلق ؛ 

وهذا هو مرشح CSS وأضاف Blend:

 ._1977 -webkit-filter: تباين (1.1) سطوع (1.1) تشبع (1.3) ؛ مرشح: التباين (1.1) السطوع (1.1) التشبع (1.3) ؛  ._1977: after background: rgba (243، 106، 188، 0.3)؛ مزيج مزيج الوضع: الشاشة ؛  

كيف تستعمل

لا يمكننا إضافة فئة المرشح مباشرة إلى عنصر الصورة ، بل يجب إضافتها إلى الحاوية أو الفئة الأصل ، على سبيل المثال مع

 import 'vendor / cssgram'؛ 

 .my-class …extend٪ _1977؛