كيفية استخدام CSS box-shadow: 13 حيلة وأمثلة

CSS هي اللغة التي يستخدمها مطورو اللغة لتصميم صفحة ويب. يتحكم في كيفية عرض عناصر HTML على الشاشة أو على الورق أو في أي شكل آخر من أشكال الوسائط. يوفر CSS قوة التخصيص الكاملة لتصميم صفحة الويب في صورتك الخاصة.

يمكنك تغيير لون خلفية العنصر ونمط الخط ولون الخط وظل الصندوق والهامش والعديد من الخصائص الأخرى باستخدام CSS. سنرشدك خلال بعض الاستخدامات الفعالة لـ box-shadow في هذا الدليل.

---

---

ما هو CSS box-shadow؟

ال مربع الظل تُستخدم الخاصية لتطبيق الظل على عناصر HTML. إنها واحدة من أكثر خصائص CSS استخدامًا لمربعات التصميم أو الصور.

بنية CSS:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

1. تعويض الأفقي: إذا كانت الإزاحة الأفقية موجبة ، سيكون الظل على يمين الصندوق. وإذا كانت الإزاحة الأفقية سالبة ، فسيكون الظل على يسار المربع.
2. الإزاحة الرأسية: إذا كانت الإزاحة الرأسية موجبة ، فسيكون الظل أسفل المربع. وإذا كانت الإزاحة الرأسية سالبة ، فسيكون الظل فوق المربع.
3. نصف قطر التمويه: كلما زادت القيمة ، زاد تشويش الظل.
4. انتشار الشعاع: يشير إلى مقدار الظل الذي يجب أن ينتشر. تزيد القيم الموجبة من انتشار الظل ، بينما تقلل القيم السالبة من الانتشار.
5. لون: يدل على لون الظل. كما أنه يدعم أي تنسيق لوني مثل rgba أو hex أو hsla.

معلمات التمويه والانتشار واللون اختيارية. الجزء الأكثر إثارة للاهتمام في box-shadow هو أنه يمكنك استخدام فاصلة لفصل قيم box-shadow أي عدد من المرات. يمكن استخدام هذا لإنشاء حدود وظلال متعددة على العناصر.

1. قم بإضافة ظل مربع خافت إلى يسار ويمين وأسفل الصندوق

يمكنك إضافة ظلال قاتمة جدًا إلى ثلاثة جوانب (يسار ويمين وأسفل) من المربع باستخدام مربع الظل التالي CSS مع عنصر HTML الهدف الخاص بك:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

انتاج:

---

---

2. إضافة ظل مربع خافت إلى كل الجوانب

يمكنك إضافة ظلال فاتحة إلى جميع جوانب المربع باستخدام box-shadow CSS التالي مع عنصر HTML الهدف الخاص بك:

---

---

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

انتاج:

3. قم بإضافة ظل مربع رفيع للجانبين السفلي والأيمن

يمكنك إضافة الظلال إلى الجزء السفلي والجانب الأيمن من المربع باستخدام مربع الظل التالي CSS مع عنصر HTML الهدف الخاص بك:

كيفية جعل جهاز الكمبيوتر الخاص بك أسرع windows 10

box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

انتاج:

4. أضف ظل صندوق داكن إلى كل الجوانب

يمكنك إضافة ظل غامق إلى جميع جوانب المربع باستخدام box-shadow CSS التالي مع عنصر HTML الهدف الخاص بك:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

انتاج:

5. إضافة انتشار الظل إلى كل الجوانب

يمكنك إضافة ظل انتشار إلى جميع جوانب المربع باستخدام الأمر التالي مع عنصر HTML الهدف الخاص بك:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

انتاج:

6. أضف ظلًا رفيعًا إلى كل الجوانب

يمكنك إضافة ظل حد بسيط لجميع جوانب المربع باستخدام CSS التالي مع عنصر HTML الهدف الخاص بك:

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

انتاج:

7. إضافة ظل مربع إلى الجانبين السفلي واليسرى

يمكنك إضافة ظل إلى الجانبين السفلي والأيسر من المربع باستخدام مربع الظل التالي CSS مع عنصر HTML الهدف الخاص بك:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

انتاج:

8. أضف ظل مربع خافت إلى الجانبين العلوي والأيسر ، الظل الداكن للجانبين السفلي والأيمن

يمكنك إضافة ظل خفيف إلى الجانب العلوي والجانب الأيسر من المربع بالإضافة إلى ظل غامق على الجانبين السفلي والأيمن من المربع باستخدام CSS التالي مع عنصر HTML الهدف الخاص بك:

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

انتاج:

9. أضف ظلًا رفيعًا وملونًا إلى كل الجوانب

يمكنك إضافة ظل حد ملون بسيط إلى جميع جوانب المربع باستخدام box-shadow CSS التالي مع عنصر HTML الهدف الخاص بك:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

انتاج:

10. إضافة ظلال متعددة ملونة للحدود على الجانبين السفلي واليسرى للمربع

يمكنك إضافة العديد من ظلال الحدود الملونة إلى الجانبين السفلي والأيسر من المربع باستخدام CSS التالي مع عنصر HTML الهدف الخاص بك:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

انتاج:

لا يمكن إيقاف تشغيل بلوتوث windows 10

11. إضافة ظلال متعددة ملونة للحدود إلى الأسفل

يمكنك إضافة العديد من ظلال الحدود الملونة إلى الجزء السفلي من المربع باستخدام مربع الظل التالي CSS مع عنصر HTML الهدف الخاص بك:

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

انتاج:

12. إضافة ظلال متعددة ملونة للحدود على الجانبين السفلي والأيمن من المربع

يمكنك إضافة العديد من ظلال الحدود الملونة إلى الجانبين السفلي والأيمن من المربع باستخدام CSS التالي مع عنصر HTML الهدف الخاص بك:

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

انتاج:

13. أضف الظلال الفاتحة إلى الجانبين الأيسر والأيمن ، وانتشر الظل إلى الأسفل

يمكنك إضافة ظلال فاتحة إلى الجانبين الأيسر والأيمن ونشر الظل إلى أسفل المربع باستخدام ظل مربع الظل التالي CSS مع عنصر HTML الهدف الخاص بك:

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

انتاج:

دمج CSS مع صفحة HTML

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

متعلق ب: 11 أدوات مفيدة لفحص وتنظيف وتحسين ملفات CSS

يمكنك تضمينها في صفحة HTML نفسها أو إرفاقها كمستند منفصل. هناك ثلاث طرق لتضمين CSS في مستند HTML:

CSS داخلي

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

CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

Style 4







مضمنة CSS

يتم استخدام CSS المضمنة لإضافة قواعد نمط فريدة إلى عنصر HTML. يمكن استخدامه مع عنصر HTML عبر ملف نمط ينسب. تحتوي سمة النمط على خصائص CSS بصيغة 'الخاصية: القيمة' مفصولة بفاصلة منقوطة ( ؛ ).

الموضوعات ذات الصلة: تعرف على كيفية إنشاء مواقع ويب ثنائية الأبعاد باستخدام شبكة CSS

يجب أن تكون جميع خصائص CSS في سطر واحد ، أي يجب ألا يكون هناك فواصل أسطر بين خصائص CSS. فيما يلي مثال يوضح كيفية استخدام CSS المضمن مع مستند HTML:

CSS box-shadow

Style 4







CSS خارجي

CSS الخارجية هي الطريقة المثلى لتطبيق الأنماط على مستندات HTML. تحتوي ورقة الأنماط الخارجية على جميع قواعد النمط في مستند منفصل (ملف .css) ، ثم يتم ربط هذا المستند بمستند HTML باستخدام بطاقة شعار. هذه الطريقة هي أفضل طريقة لتحديد الأنماط وتطبيقها على مستندات HTML حيث يتطلب ملف HTML المتأثر الحد الأدنى من التغييرات في العلامات. إليك مثال يوضح كيفية استخدام CSS خارجي مع مستند HTML:

قم بإنشاء ملف CSS جديد بامتداد .css تمديد. أضف الآن كود CSS التالي داخل هذا الملف:

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

أخيرًا ، قم بإنشاء مستند HTML وأضف الكود التالي داخل ذلك المستند:

لماذا لا يعمل imessage الخاص بي على mac

CSS box-shadow

Style 4







لاحظ أن ملف CSS مرتبط بمستند HTML عبر العلامة و href ينسب.

ستعرض جميع الطرق الثلاثة المذكورة أعلاه (CSS الداخلية و Inline CSS و CSS الخارجي) نفس الإخراج-

اجعل صفحة الويب الخاصة بك أنيقة باستخدام CSS

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

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

يشارك يشارك سقسقة بريد الالكتروني 10 أمثلة بسيطة لرموز CSS يمكنك تعلمها في 10 دقائق

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

اقرأ التالي مواضيع ذات صلة

• برمجة
• تصميم المواقع
• CSS

نبذة عن الكاتب يوفراج شاندرا(تم نشر 60 مقالاً)

يوفراج طالب جامعي في علوم الكمبيوتر بجامعة دلهي بالهند. إنه متحمس لتطوير الويب Full Stack. عندما لا يكتب ، فإنه يستكشف عمق التقنيات المختلفة.

المزيد من Yuvraj Chandra

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك