كيف تضيف تأثير Box Shadow عبر CSS في WordPress

هل تريد إضافة تأثير ظل الإسقاط إلى صور موقعك على الويب أو محتوى آخر؟ يمكن أن يتم ذلك باستخدام CSS ، ولا حاجة لاستخدام برامج معقدة. فائدة استخدام CSS لإضافة تأثير ظل هو أنه يمكنك استهداف العناصر بدقة وتعديلها عند الحاجة. في حالة الصور ، فإن إضافة تأثير drop-shadow عبر CSS يلغي الحاجة إلى تعديلها بشكل دائم.

كيف تضيف تأثير Box Shadow عبر CSS في WordPress - Series احتراف الووردبريس

يمكنك إضافة تأثير drop-shadow باستخدام خاصية CSS بسيطة تسمى Box Shadow إلى أي عنصر أو صورة HTML تقريبًا. Box Shadow هو خاصية CSS بسيطة تقوم بربط ظلال أو أكثر لعنصر باستخدام الإزاحات ، التمويه ، نصف القطر ، واللون. تم تقديم Box Shadow بطريقة CSS الذي يدعم كل المتصفحات الحديثة.

أفضل شيء في Box Shadow هو أنه يمكنك إما إضافة تأثير ظل خارج مربع المحتوى أو في الداخل. الآن ، قد تتسائل عما يعنيه مربع المحتوى. بعبارات بسيطة ، لا يعد مربع المحتوى سوى عنصر HTML مثل P ، DIV ، إلخ.

تركيب CSS Box Shadow

سيكون بناء جملة الخاصية Box-Shadow شيء من هذا القبيل.

box-shadow: <horizantal-offset> <vertical-offset> <blur-radius> <spread-radius> <color>؛

horizantal-offset (القيمة مطلوبة): هذه قيمة مطلوبة وعندما تقوم بتعيين قيم موجبة (مثل 10 بكسل) ، سيتم دفع الظل إلى الجانب الأيسر أفقيًا. قيمة سالبة (مثل -10px) ستدفع الظل إلى الجانب الأيمن. يمكنك تعيينه إلى 0 إذا كنت لا تريد إزاحة الظل.

vertical-offset (القيمة مطلوبة): هذه قيمة مطلوبة وعندما تقوم بتعيين قيم موجبة (مثل 10 بكسل) ، سيتم دفع الظل لأسفل رأسيًا. القيم السلبية (مثل -10px) ستدفع الظل لأعلى. يمكنك تعيينه إلى 0 إذا كنت لا تريد إزاحة الظل.

blur-radius (القيمة مطلوبة): تمحو هذه القيمة الظل بحيث لا يكون لها أي حواف صلبة. كلما قمت بتعيين القيمة أعلى ، كلما كان تأثير التمويه أعلى. إذا كنت لا تريد تأثير التمويه ، فيمكنك تعيينه على “0”.

spread-radius (قيمة اختيارية): هذه قيمة اختيارية تنشر الظل بناءً على القيمة التي تقوم بتعيينها. كلما زادت القيمة ، كلما كان الفارق أعلى. إذا كنت لا تريد تأثير الانتشار ، فيمكنك إما حذف القيمة أو تعيينها على “0”.

color (القيمة مطلوبة): يمكنك تعيين أي لون تريده باستخدام hex ، RGB (أحمر ، أزرق ، أخضر ، Alpha) ، HLSA (Hue ، Saturation ، Lightness ، Alpha) ، وألوان HTML مسماة. إذا لم تضبط أي لون ، فسيقوم المتصفح بتعيين لون افتراضي. يعتمد اللون الافتراضي بشكل كامل على المتصفح الذي تستخدمه. لذا ، فمن المستحسن دائمًا تعيين اللون.

أضف CSS Box Shadow إلى صورة أو مربع المحتوى

باستخدام بناء الجملة أعلاه ، يمكنك إضافة تأثير drop-shadow إلى أي عنصر بكل سهولة. على سبيل المثال ، إذا كنت ترغب في إضافة تأثير الظل مع كل من التمويه والانتشار إلى عنصر div ، فكل ما عليك فعله هو استهداف هذا العنصر باستخدام علامة العنصر أو فئة CSS أو معرفها وملء قيم خاصية مربع الظل . سيبدو شيئا من هذا القبيل.

.shadow-effect {

box-shadow: 3px 3px 10px 2px # a9a1a1؛

}

النتيجة:

كيف تضيف تأثير Box Shadow عبر CSS في WordPress - Series احتراف الووردبريس

إذا كنت لا ترغب في تعتيم الظل ولكنك تريد نشره ، فستبدو الشفرة كشيء من هذا القبيل.

.shadow-effect {

box-shadow: 5px 5px 0px 2px # a9a1a1؛

}

كما ترى ، أضبط نصف قطر التمويه إلى 0 بكسل. تأثير الظل الناتج يحتوي على حواف صلبة وينظر إلى شيء من هذا القبيل.

كيف تضيف تأثير Box Shadow عبر CSS في WordPress - Series احتراف الووردبريس

أحد الأشياء الأكثر جنونًا حول خاصية Box-Shadow هي أنه يسمح لك بإضافة العديد من الظلال. للقيام بذلك ، كل ما عليك فعله هو تحديد قيم مفصولة بفواصل. ستبدو الجملة هكذا.

.shadow-effect {

box-shadow: 10px 10px 0 blue، 15px 15px 0 red، 20px 20px 0 green؛

}
كيف تضيف تأثير Box Shadow عبر CSS في WordPress - Series احتراف الووردبريس

بإضافة “inset” إلى خاصية box-shadow ، يمكنك إظهار تأثير الظل داخل مربع المحتوى.

.shadow-effect {

box-shadow: inset 3px 3px 10px 2px # a9a1a1؛

}

النتيجة:

كيف تضيف تأثير Box Shadow عبر CSS في WordPress - Series احتراف الووردبريس

هذه مجرد أمثلة قليلة عن كيفية إضافة تأثير الظل إلى أي مربع محتوى أو صورة. ببساطة عن طريق تعديل قيم مختلفة ، يمكنك الحصول على تأثير الظل الذي تريده. مجرد لعب حولها لترى ما يناسب احتياجاتك.

CSS Text Shadow Generator

إذا كنت ترغب في إضافة الظل المسقط للنص ، فيجب استخدام خاصية Text-Shadow. يشبه بناء الجملة للغاية خاصية Box-Shadow ، ولكن لا يوجد نصف قطر حيز في خاصية Text-Shadow. ها هي الصيغة.

text-shadow: <horizantal-offset> <vertical-offset> <blur-radius> <color>؛

عند استبدال بناء الجملة أعلاه بالقيم الفعلية ، سيبدو شيئًا مثل هذا.

p {

text-shadow: 1px 1px 2px #333333;

}

سيكون التأثير الناتج شيئًا كهذا.

كيف تضيف تأثير Box Shadow عبر CSS في WordPress - Series احتراف الووردبريس

على عكس خاصية box-shadow ، تكون قيمة التمويه في Text-Shadow اختيارية. بمعنى ، إذا كنت لا تريد أن يكون ظل النص ضبابيًا ، فيمكنك إما حذف القيمة أو تعيينها على “0”.

أضف CSS Box Shadow على صور محددة على WordPress

الآن ، بعد أن اكتشفنا ، كيفية إضافة تأثير ظل إلى الصور باستخدام CSS ، نحتاج الآن إلى طريقة لإضافته إلى صور معينة دون التأثير على الصور الأخرى على موقع الويب.

للقيام بذلك ، يمكنك ببساطة إنشاء فئة CSS جديدة وإضافتها إلى الصورة عند الحاجة. بهذه الطريقة ، سيكون للصور ذات فئة CSS المحددة تأثير الظل فقط.

لإنشاء فئة CSS جديدة ، يمكنك استخدام ملحق Simple Custom CSS للـ Wordpress أو من خلال ملف custom.css لمعظم قوالب WP أيضًا. يمكنك إضافة شفرة CSS في هذا الملف أيضًا.

كيف تضيف تأثير Box Shadow عبر CSS في WordPress - Series احتراف الووردبريس

بعد ذلك ، انقر نقرًا مزدوجًا فوق رمز “تحرير” لتلك الصورة (التي تشبه قلم رصاص). ضمن خيار “خيارات متقدمة” لـ Image CSS Class واكتب في اسم الفئة ، قمت بتعريفه في ورقة الأنماط الخاصة بنا. بالنسبة إلى هذه الحالة ، فإن اسم الفئة هو shadow-effect ، بعد الانتهاء قم بحفظ التغييرات.

كيف تضيف تأثير Box Shadow عبر CSS في WordPress - Series احتراف الووردبريس

ثم انقر فوق “حفظ المسودة” أو “تحديث” لتحديث صفحة WordPress. عندما يتم تحديث الصفحة ، تبدو النتيجة كما يلي:

فقط الصور التي تحتوي على فئة ظلال CSS ، سيكون لها Box Shadow حولها. إذا كانت مشاركة مدونتك تحتوي على 20 صورة ، فسيتعين عليك القيام بذلك يدويًا للحصول على 20 صورة ، وهو أمر مملاً بعض الشيء. ومع ذلك ، فإنه سيوفر لك الكثير من الوقت من تحريرها على Photoshop.

كيف تضيف تأثير Box Shadow عبر CSS في WordPress - Series احتراف الووردبريس

كما ترى ، فإن إضافة تأثير ظل الظل باستخدام CSS ليس بالأمر الصعب. الأمثلة التي عرضتها هنا هي فقط الأساسيات. مجرد لعب مع قيم مختلفة ، وسوف نرى كيفة الفعالية على حد سواء Box Shadow وخصائص الظل للنص هي حقا. لسهولة الاستخدام ، يمكنك استخدام مولد Box-shadow أيضًا.

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

المصدر

تعليق واحد

  1. It seems to me that we have here an evident violation of logic, expenses in the name of selfishness.
    Brushing it are only going to lead to split ends and hair damage.

زر الذهاب إلى الأعلى