إضافة فلاتر Instagram لصور موقعك أو مدونتك بإستعمال Css

شارك الموضوع :
السلام عليكم
الجميع أصبح يستعمل تطبيقات لتعديل الصور و إعطائها تأثيرات و مظهر خاص مثل تطبيق Instagram و Retrica و Candy ،
لكن ماذا إذا رغبت في إستعمال تلك التأثيرات على صورك في المدونة أو موقعك الإلكتروني ؟

ستكون النتيجة من هذا الشكل ،، إستعملت 6 فلاتر فقط بينما يوجد 21 فيلتر 




اليوم أقترح عليكم تلك الإضافات بإستعمال Css و سنستخدم مكتبة CSSgram التي يتم تطويرها عبر موقع github .
يمكنكم تحميل المكتبة لإستعمالها دون إتصال (offline) آو متابعة تطويرها من هنا  :

لإضافة الفلاتر على الصور في مدونتك :

آدخل إلى : المظهر >> تحرير HTML

الآن إبحث عن الكود التالي  <head> و أضف تحته الكود التالي :

<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">

ثم إحفظ الملف و للإستعمال التأثيرات على الصور في التدوينات آو الإضافات إستعمل الكود التالي :

<figure class="_1977">
<img src='http://i.telegraph.co.uk/multimedia/archive/03519/potd-squirrel_3519920k.jpg'/>
</figure>

لتغيير الفلاتر غير "class="_1977 إلى ما تريد و هذه قائمة الفلاتر المتوفرة حاليا :

1977: class="_1977"
Aden: class="aden"
Brooklyn: class="brooklyn"
Clarendon: class="clarendon"
Earlybird: class="earlybird"
Gingham: class="gingham"
Hudson: class="hudson"
Inkwell: class="inkwell"
Lark: class="lark"
Lo-Fi: class="lofi"
Mayfair: class="mayfair"
Moon: class="moon"
Nashville: class="nashville"
Perpetua: class="perpetua"
Reyes: class="reyes"
Rise: class="rise"
Slumber: class="slumber"
Toaster: class="toaster"
Walden: class="walden"
Willow: class="willow"
X-pro II: class="xpro2"


أتمنى أن تكونوا قد إستفدتم من الإضافة ، نلتقي في تدوينة أخرى 
شارك الموضوع :

إضافات بلوجر

Css

شارك بتعليق :

0 التعليقات :