البرنامج التعليمي لـ CSS Box Shadow: دليل خطوة بخطوة (+ أمثلة)

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

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

ما هو CSS Box Shadow؟

حتى إذا لم تكن على دراية بخاصية CSS box-shadow حتى الآن ، فمن المحتمل أنك رأيتها قيد التنفيذ على الويب.

أعلاه هو مثال جيد لما يبدو عليه في البرية (حتى لو قمت بزيادةه قليلاً هنا لإثبات نقطة). box-shadow هو أساسًا ما يقوله الاسم: فهو يسمح لك بإضافة الظل المسقط إلى إطار أي عنصر تقريبًا. ويلتزم الظل أيضًا بشكل مرساة سواء كانت مربعة أو مستطيلة أو مستديرة أو بيضاوية. هذا صحيح حتى عند تعيين خاصية border-radius .

في جميع أنحاء الويب ، يستخدمه الأشخاص لإنشاء عدد من التأثيرات المختلفة وسنرى بعض أمثلة box-shadow أدناه. الآن ، دعنا نتحدث عن كيفية عملها على المستوى الأساسي.

بناء جملة ظل المربع الأساسي

عندما تنظر إلى عنصر بظل مربع باستخدام أدوات مطور المتصفح ، ستجد ترميزًا مثل هذا:

 box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

تبدو معقدة بعض الشيء ، أليس كذلك؟

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

كما ترى أعلاه ، يمكن أن يستغرق box-shadow ما يصل إلى ست قيم. دعنا نتفوق عليهم واحدًا تلو الآخر.

تعويض x

القيمة الأولى هي المسافة الأفقية للظل المسقط من جانب عنصر الإرساء الخاص به. القيمة الموجبة تنقله إلى اليمين ، وسالب إلى اليسار.

يمكنك استخدام جميع أنواع بيانات CSS الشائعة التي تشير إلى طول هذه القيمة ، مثل px و em و vh والمزيد. الأكثر استخدامًا هي px و em .

تعويض ذ

نفس ما ورد أعلاه ولكن بالنسبة للمحور الرأسي. تقوم القيمة الموجبة بتحريك الظل أسفل العنصر ، والظلال السالبة أعلاه.

طمس نصف القطر

هذا يحدد طمس ظل الصندوق. كلما ارتفعت القيمة كلما كانت الصورة غير واضحة. يأخذ blur-radius أيضًا جميع فئات طول CSS الشائعة ولكن لا توجد قيم سالبة.

انتشار الشعاع

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

اللون

كما يمكنك التخمين على الأرجح ، يتيح لك هذا تحديد لون ظل الصندوق بكل الطرق المعتادة. غالبًا ما يُشار إليه بقيم سداسية عشرية (على سبيل المثال #ededed ) أو قيم rgba (مثل rgba(46, 182, 142, 0.9) ). يسمح لك الأخير أيضًا بالتحكم في التعتيم ، والذي يستخدم بشكل شائع لظلال الإسقاط.

ملاحظة ، إذا لم تقم بتعيين لون ، فسيستخدم المستعرض لون النص المستخدم حاليًا.

أقحم

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

استخدام القيم بالترتيب

هذا هو الترتيب الذي تظهر به قيم خاصية box-shadow .

 box-shadow: offset-x offset-y blur-radius spread-radius color inset;

لتعيين ظل مربع ، تحتاج إلى قيمتي طول على الأقل. سيستخدم المتصفح تلقائيًا تلك الخاصة بـ offset-x و offset-y . إذا أضفت ثلثًا ، فسيتم تفسيره على أنه blur-radius ، ورابع على أنه spread-radius . inset color اختياريًا ويمكن أن يظهر في النهاية أو البداية وبأي ترتيب. سيكون لكل CSS أدناه نفس النتيجة.

 box-shadow: 20px 20px 10px 0 inset rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: inset 20px 20px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 10px 0 inset; box-shadow: rgba(0, 0, 0, 0.5) inset 20px 20px 10px 0; box-shadow: inset rgba(0, 0, 0, 0.5) 20px 20px 10px 0;

تعيين عدة ظلال مربع

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

 box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

يظهر الرمز أعلاه بالشكل التالي:

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

 box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

ينتج عن هذا مخططات بألوان مختلفة:

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

التوافق المتصفح

توافق المتصفح مع box-shadow ليس حقًا أمرًا يجب أن تقلق بشأنه. إنها خاصية CSS راسخة للغاية ومقبولة من قبل كل متصفح تقريبًا ، بما في ذلك الترميز مثل inset والمتعددة.

لدعم الإصدارات القديمة من بعض المتصفحات ، من الشائع تضمين خصائص -webkit-box-shadow و -moz-box-shadow بنفس القيم. ومع ذلك ، بالنسبة لأحدث إصدارات المتصفحات الأكثر شيوعًا ، لم يعد هذا ضروريًا بعد الآن.

أمثلة على ظل مربع CSS

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

أضف ظل إلى زر

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

يبدو الترميز المصاحب كما يلي:

 box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

ظل الصندوق الناعم

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

لتحقيق التأثير أعلاه ، يمكنك استخدام العلامات التالية:

 box-shadow: 0 0 50px 10px #999;

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

مربع متعدد الظلال

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

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

 box-shadow: 10px 10px rgba(0, 0, 0, 0.4), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px rgba(0, 0, 0, 0.05);

يمكنك أيضًا المضي قدمًا في هذا الأمر من خلال تقديم ظلال المربع الأبيض مع قيمة سالبة spread-radius بينهما ، مما يؤدي إلى وهم عدة عناصر فوق بعضها البعض.

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

 box-shadow: 10px 10px 0px -3px rgba(255, 255, 255), 10px 10px rgba(0, 0, 0, 0.4), 20px 20px 0px -3px rgba(255, 255, 255), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px 0px -3px rgba(255, 255, 255), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px 0px -3px rgba(255, 255, 255), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px 0px -3px rgba(255, 255, 255), 50px 50px rgba(0, 0, 0, 0.05);

المثال الأخير للعديد من ظلال مربعات CSS هو الطريقة المذكورة أعلاه لتعيين الإزاحات والتمويه إلى 0 . كما رأينا أعلاه ، ينتج عن ذلك وجود العديد من الخطوط العريضة الملونة في هذه الحالة. ومع ذلك ، يعمل هذا فقط لأن قيمة spread-radius تزداد لكل مربع ظل.

إذا كنت تريد تجربة ذلك بنفسك ، فيمكنك البدء بهذا:

 box-shadow: 0px 0px 0px 3px red, 0px 0px 0px 6px orange, 0px 0px 0px 9px yellow, 0px 0px 0px 12px green, 0px 0px 0px 15px blue, 0px 0px 0px 18px indigo, 0px 0px 0px 21px violet;

أفضل مولدات Box Shadow

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

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

فيما يلي أفضل الخيارات لمولدات Box Shadow:

• box-shadow.dev - تحتوي هذه الأداة أحادية الغرض على جميع الوظائف التي تحتاجها وأفضل واجهة مستخدم في المجموعة. يمكنك استخدام inset ، وإنشاء عدة ظلال مربعة ، والتحكم في الإزاحات ، والتمويه ، والانتشار عبر أشرطة التمرير ، وإدخال الألوان يدويًا. عندما تشعر بالرضا ، انقر فوق إظهار الرمز لنسخ ترميز CSS. الجانب السلبي الوحيد هو أنه لا يوفر رمزًا للمتصفحات القديمة.
• CSSmatic Box Shadow CSS Generator - على غرار ما ورد أعلاه. يسمح لك بالتحكم في خصائص box-shadow عبر أشرطة التمرير وأيضًا إدخال الأرقام يدويًا. لديه تحكمه الخاص في التعتيم ، وهو أمر جيد. من ناحية أخرى ، فإنه يفتقد وظائف الظلال المتعددة. يتضمن ترميز الشفرة الذي تحصل عليه المتصفحات القديمة.
• Box Shadow CSS Generator - خيار قوي له أيضًا إمكانية اختيار الألوان ويمنحك رمزًا لمتصفح أقدم أيضًا. يمكنك نسخه بنقرة بسيطة. يحتوي على تحكم في العتامة ولكن يمكنه فقط إنشاء ظل مسقط واحد.
• CSS3gen CSS3 Box Shadow Generator - مولد الظل المسقط آخر. الميزة الرائعة هنا هي أنه بدلاً من إزاحة x و y ، يمكنك تحديد زاوية الظل والمسافة وستقوم الأداة بالباقي تلقائيًا. لسبب ما spread-radius inset لهما قائمة خاصة بهما. يتضمن CSS الذي يمكنك نسخه ولصقه أيضًا ترميزًا لأجيال المستعرضات الأقدم.

الأفكار النهائية: CSS Box Shadow

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

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

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

كيف تستخدم CSS box shadow على موقع الويب الخاص بك؟ هل هناك حالات استخدام مثيرة لم نقم بتغطيتها أعلاه؟ اسمحوا لنا أن نعرف في التعليقات أدناه!