كيفية عمل filter لصور المدونة باستخدام css
اليوم ستتعلم كيفية اضافة تأثيرات لصور المدونة باستخدام لغة css فقط
ال CSS لغة التصميم , لغة جميلة جدا وسهلة التعلم ولابد من استخدامها لتحسين شكل اي شي وفي هذه الصورة ستتاكد من ذلك
كما ترون في الصورة فلغة ال CSS هي من تصمم وتتحكم في الالوان والشكل عموما واليوم درس بسيط جدا عن كيفية اضافة فلتر( Filter ) لصور مدونتك او عموما
في لغة CSS اذا كنت تريد ان تضف فلتر قم باضافة كود الفلتر مثل هذا
filter:
والاكواد الموجودة في هذا الكود هي
blur()
brightness()
contrast()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
الصور الاصلية التي سنستخدم عليها الفلتر هم
ولنجرب ذلك علي مدونتنا قمنا بالضغط علي الصورة Click يمين ثم الضغط علي فحص العنصر لتجربة التعديل
وفي ال .post-body img المعرف الخاص بالصور ووضعنا هذا الكود
كما ترون هذا فلتر ال Blur وتستطيع وضعه في مدونتك مثل ماشرحنا اعلي الصورة قم بفحص العنصر وقم بايجاد معرف الصور وقم بوضع الاكواد واذا قررت وضعه قم بالدخول الي المظهر من لوحة ادارة بلوجر ثم تعديل html ثم قم بالبحث معرف الصور الذي قمت بالتعديل عليه في (فحص العنصر ) واضف الاكواد التي تريدها وفي فلتر ال blur يمكنك بالطبع التحكم في درجة ال Blur من خلال التعديل علي الكود blur(5px
لنذهب لثاني فلتر وهو ال grayscale
قم بوضع هذا الكود مثلما شرحنا في الاعلي
كما ترون هذا الفلتر جعل الصورة تظهر بشكل جيد ونجحن قمنا باضافتها في قالب من قوالبنا السابقة في موقعنا وكانت شكلها جيد وبالطبع يمكنك التعديل علي grayscale(1)
لنذهب للفلتر الثالث وهو saturate
قم بالذهاب ووضع هذا الكود
مثل هذه الصورة يمكنك التعديل علي الكود saturate(6); وقم بزيادة الرقم ستلاحظ اختلاف في الفلتر ايضا لانك غيرت درجة الفلتر وهذا في كل الاكواد
الفلتر الرابع sepia
وباضافة اهذا الكود
ايضا هذا الكود يجعل الصور شكلها جيد وليس سيئا ولا يوجد مشاكل ان وضعت الاكواد في قالبك
الكود الخامس او الفلتر الخامس هو hue-rotate
تضع الكود الخاص بهذا الفلتر مثل هذا الكود
الكود او الفلتر السادس هو invert
وهذا معروف من البعض لان الفلتر هذا يوجد في بعض الهواتف , فقط ضع هذا الكود في معرف الصور
انظر لهذه الصورة وانظر للصورة الاصلية اعلي الموضوع وستلاحظ الفرق الكبير طبعا ويمكنك كما قلت في الاعلي التعديل علي درجات الفلاتر كلها
الفلتر السابع هو opacity هو مثل تفتيح ابيض للصور
قم بوضع هذا الكود
الكود الثامن هو كود ال brightness
وهذا معروف هذا الذي يقوم بسطوع الصور
قم بوضع هذا الكود كما شرحنا في الاعلي
وتذكر ان اكواد ال CSS لا تبطئ المواقع عكس اكواد الجافا مثلا وسهلة التعامل معها وانتهي درس اليوم وان واجهتك اي مشكلة في هذا الموضوع او مشكلة عامة في موقعك قم بكتابتها في صفحة الاستشارة المجانية او في اي موضوع وسيقوم بالرد عليك من احد فريق الموقع او مني شخصيا , او اذا كنت تريد شرح معين عن أي شي في بلوجر او SEO لاتتردد في كتابته في التعليقات
في لغة 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 لاتتردد في كتابته في التعليقات
موضوع رائع استمر يا مبدع
ردحذفاشكرك صديقي علي تعليقك المحفز ♥
حذفونسال الله لنا ولكم التوفيق
شكرا على الشرح الواضح و الجيد للفلتر ويجزاكم الله خيرا
ردحذف