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

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

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

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

في لغة CSS اذا كنت تريد ان تضف فلتر قم باضافة كود الفلتر مثل هذا ال filter: 
والاكواد الموجودة في هذا الكود هي 

1. blur()
2. brightness()
3. contrast()
4. grayscale()
5. hue-rotate()
6. invert()
7. opacity()
8. saturate()
9. sepia() 

blur()
brightness()
contrast()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia() 

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

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

ووضعنا الفلتر الاول هذا الكود filter: blur(5px); 

filter: blur(5px); 

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

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

لنذهب لثاني فلتر وهو ال grayscale 

قم بوضع هذا الكود مثلما شرحنا في الاعلي  filter: grayscale(1); 

 filter: grayscale(1); 

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

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

لنذهب للفلتر الثالث وهو saturate 

قم بالذهاب ووضع هذا الكود  filter: saturate(6); 

filter: saturate(6); 

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

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

الفلتر الرابع sepia 

وباضافة اهذا الكود  filter: sepia(2); 

filter: sepia(2); 

انظر لشكل الصورة بعد التعديل 

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

الكود الخامس او الفلتر الخامس هو hue-rotate 

تضع الكود الخاص بهذا الفلتر مثل هذا الكود  filter: hue-rotate(95deg); 

  filter: hue-rotate(95deg); 

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

الكود او الفلتر السادس هو invert 

وهذا معروف من البعض لان الفلتر هذا يوجد في بعض الهواتف , فقط ضع هذا الكود في معرف الصور  filter: invert(1.8); 

filter: invert(1.8);

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

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

الفلتر السابع هو opacity هو مثل تفتيح ابيض للصور 

قم بوضع هذا الكود filter: opacity(0.3);

filter: opacity(0.3);

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

الكود الثامن هو كود ال brightness 

وهذا معروف هذا الذي يقوم بسطوع الصور 
قم بوضع هذا الكود كما شرحنا في الاعلي  filter: brightness(3); 

filter: brightness(3); 

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

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