15482721749897530
recent
أخبار ساخنة

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

الخط

كيفية عمل 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  لاتتردد في كتابته في التعليقات  
  1. موضوع رائع استمر يا مبدع

    ردحذف
    الردود
    1. اشكرك صديقي علي تعليقك المحفز ♥
      ونسال الله لنا ولكم التوفيق

      حذف

إرسال تعليق

نموذج الاتصال
الاسمبريد إلكترونيرسالة