هل تريد إضافة تأثير ظل الإسقاط إلى صور موقعك على الويب أو محتوى آخر؟ يمكن أن يتم ذلك باستخدام CSS ، ولا حاجة لاستخدام برامج معقدة. فائدة استخدام CSS لإضافة تأثير ظل هو أنه يمكنك استهداف العناصر بدقة وتعديلها عند الحاجة. في حالة الصور ، فإن إضافة تأثير drop-shadow عبر CSS يلغي الحاجة إلى تعديلها بشكل دائم.
يمكنك إضافة تأثير 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؛
}
النتيجة:
إذا كنت لا ترغب في تعتيم الظل ولكنك تريد نشره ، فستبدو الشفرة كشيء من هذا القبيل.
.shadow-effect {
box-shadow: 5px 5px 0px 2px # a9a1a1؛
}
كما ترى ، أضبط نصف قطر التمويه إلى 0 بكسل. تأثير الظل الناتج يحتوي على حواف صلبة وينظر إلى شيء من هذا القبيل.
أحد الأشياء الأكثر جنونًا حول خاصية Box-Shadow هي أنه يسمح لك بإضافة العديد من الظلال. للقيام بذلك ، كل ما عليك فعله هو تحديد قيم مفصولة بفواصل. ستبدو الجملة هكذا.
.shadow-effect {
box-shadow: 10px 10px 0 blue، 15px 15px 0 red، 20px 20px 0 green؛
}
بإضافة “inset” إلى خاصية box-shadow ، يمكنك إظهار تأثير الظل داخل مربع المحتوى.
.shadow-effect {
box-shadow: inset 3px 3px 10px 2px # a9a1a1؛
}
النتيجة:
هذه مجرد أمثلة قليلة عن كيفية إضافة تأثير الظل إلى أي مربع محتوى أو صورة. ببساطة عن طريق تعديل قيم مختلفة ، يمكنك الحصول على تأثير الظل الذي تريده. مجرد لعب حولها لترى ما يناسب احتياجاتك.
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 ، تكون قيمة التمويه في Text-Shadow اختيارية. بمعنى ، إذا كنت لا تريد أن يكون ظل النص ضبابيًا ، فيمكنك إما حذف القيمة أو تعيينها على “0”.
أضف CSS Box Shadow على صور محددة على WordPress
الآن ، بعد أن اكتشفنا ، كيفية إضافة تأثير ظل إلى الصور باستخدام CSS ، نحتاج الآن إلى طريقة لإضافته إلى صور معينة دون التأثير على الصور الأخرى على موقع الويب.
للقيام بذلك ، يمكنك ببساطة إنشاء فئة CSS جديدة وإضافتها إلى الصورة عند الحاجة. بهذه الطريقة ، سيكون للصور ذات فئة CSS المحددة تأثير الظل فقط.
لإنشاء فئة CSS جديدة ، يمكنك استخدام ملحق Simple Custom CSS للـ WordPress أو من خلال ملف custom.css لمعظم قوالب WP أيضًا. يمكنك إضافة شفرة CSS في هذا الملف أيضًا.
بعد ذلك ، انقر نقرًا مزدوجًا فوق رمز “تحرير” لتلك الصورة (التي تشبه قلم رصاص). ضمن خيار “خيارات متقدمة” لـ Image CSS Class واكتب في اسم الفئة ، قمت بتعريفه في ورقة الأنماط الخاصة بنا. بالنسبة إلى هذه الحالة ، فإن اسم الفئة هو shadow-effect ، بعد الانتهاء قم بحفظ التغييرات.
ثم انقر فوق “حفظ المسودة” أو “تحديث” لتحديث صفحة WordPress. عندما يتم تحديث الصفحة ، تبدو النتيجة كما يلي:
فقط الصور التي تحتوي على فئة ظلال CSS ، سيكون لها Box Shadow حولها. إذا كانت مشاركة مدونتك تحتوي على 20 صورة ، فسيتعين عليك القيام بذلك يدويًا للحصول على 20 صورة ، وهو أمر مملاً بعض الشيء. ومع ذلك ، فإنه سيوفر لك الكثير من الوقت من تحريرها على Photoshop.
كما ترى ، فإن إضافة تأثير ظل الظل باستخدام CSS ليس بالأمر الصعب. الأمثلة التي عرضتها هنا هي فقط الأساسيات. مجرد لعب مع قيم مختلفة ، وسوف نرى كيفة الفعالية على حد سواء Box Shadow وخصائص الظل للنص هي حقا. لسهولة الاستخدام ، يمكنك استخدام مولد Box-shadow أيضًا.
أمل أن يساعد هذا. من خلال التعليق أدناه شارك أفكارك وتجاربك حول استخدام الطريقة المذكورة أعلاه لإضافة تأثير ظل الإسقاط إلى الصور أو مربعات المحتوى باستخدام CSS.