كيفية عمل filter لصور المدونة باستخدام css

اليوم ستتعلم كيفية اضافة تأثيرات لصور المدونة باستخدام لغة css فقط

ال CSS لغة التصميم , لغة جميلة جدا وسهلة التعلم ولابد من استخدامها لتحسين شكل اي شي وفي هذه الصورة ستتاكد من ذلك 

 كما ترون في الصورة فلغة ال CSS هي من تصمم وتتحكم في الالوان والشكل عموما واليوم درس بسيط جدا عن كيفية اضافة فلتر( Filter ) لصور مدونتك او عموما 
في لغة CSS اذا كنت تريد ان تضف فلتر قم باضافة كود الفلتر مثل هذا 
 filter: 
والاكواد الموجودة في هذا الكود هي 
blur()
brightness()
contrast()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia() 

الصور الاصلية التي سنستخدم عليها الفلتر هم 

ولنجرب ذلك علي مدونتنا قمنا بالضغط علي الصورة  Click يمين ثم الضغط علي فحص العنصر لتجربة التعديل 
وفي ال .post-body img المعرف الخاص بالصور ووضعنا هذا الكود

filter: blur(5px); 

وكانت هي النتيجة 

كما ترون هذا فلتر ال Blur وتستطيع وضعه في مدونتك مثل ماشرحنا اعلي الصورة قم بفحص العنصر وقم بايجاد معرف الصور وقم بوضع الاكواد واذا قررت وضعه قم بالدخول الي المظهر من لوحة ادارة بلوجر ثم تعديل html ثم قم بالبحث معرف الصور الذي قمت بالتعديل عليه في (فحص العنصر ) واضف الاكواد التي تريدها وفي فلتر ال blur يمكنك بالطبع التحكم في درجة ال Blur من خلال التعديل علي الكود blur(5px
لنذهب لثاني فلتر وهو ال grayscale 
قم بوضع هذا الكود مثلما شرحنا في الاعلي 

filter: grayscale(1); 

وستري النتيجة مثل هذه الصورة 

كما ترون هذا الفلتر جعل الصورة تظهر بشكل جيد ونجحن قمنا باضافتها في قالب من قوالبنا السابقة في موقعنا وكانت شكلها جيد وبالطبع يمكنك التعديل علي grayscale(1)
لنذهب للفلتر الثالث وهو saturate 
قم بالذهاب ووضع هذا الكود 

filter: saturate(6); 

وستري النتيجة مثل هذه الصورة

مثل هذه الصورة يمكنك التعديل علي الكود saturate(6); وقم بزيادة الرقم ستلاحظ اختلاف في الفلتر ايضا لانك غيرت درجة الفلتر وهذا في كل الاكواد 
الفلتر الرابع sepia 
وباضافة اهذا الكود 

filter: sepia(2); 

انظر لشكل الصورة بعد التعديل 
 ايضا هذا الكود يجعل الصور شكلها جيد وليس سيئا ولا يوجد مشاكل ان وضعت الاكواد في قالبك 
الكود الخامس او الفلتر الخامس هو hue-rotate 
تضع الكود الخاص بهذا الفلتر مثل هذا الكود 

filter: hue-rotate(95deg); 

وستري النتيجة مثل هذه الصور 

الكود او الفلتر السادس هو invert 
وهذا معروف من البعض لان الفلتر هذا يوجد في بعض الهواتف , فقط ضع هذا الكود في معرف الصور 

filter: invert(1.8); 

وستري الصورة هكذا 

انظر لهذه الصورة وانظر للصورة الاصلية اعلي الموضوع وستلاحظ الفرق الكبير طبعا ويمكنك كما قلت في الاعلي التعديل علي درجات الفلاتر كلها 
الفلتر السابع هو opacity هو مثل تفتيح ابيض للصور 
قم بوضع هذا الكود

 filter: opacity(0.3);

وستري الصورة مثل هذه النتيجة 
الكود الثامن هو كود ال brightness 
وهذا معروف هذا الذي يقوم بسطوع الصور 
قم بوضع هذا الكود كما شرحنا في الاعلي 

filter: brightness(3); 

وستكون النتيجة مثل هذه الصور 


وتذكر ان اكواد ال CSS لا تبطئ المواقع عكس اكواد الجافا مثلا وسهلة التعامل معها  وانتهي درس اليوم  وان واجهتك اي مشكلة في هذا الموضوع او مشكلة عامة في موقعك قم بكتابتها في صفحة الاستشارة المجانية او في اي موضوع وسيقوم بالرد عليك من احد فريق الموقع او مني شخصيا , او اذا كنت تريد شرح معين عن  أي شي في بلوجر او SEO  لاتتردد في كتابته في التعليقات