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

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

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

ما هو CSS box-shadow؟

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

بنية CSS:

ظل الصندوق: [إزاحة أفقية] [إزاحة رأسية] [نصف قطر طمس] [نصف قطر انتشار اختياري] [لون] ؛

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

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

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

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

مربع الظل: rgba (149 ، 157 ، 165 ، 0.2) 0 بكسل 8 بكسل 24 بكسل ؛

انتاج:

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

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

مربع الظل: rgba (100 ، 100 ، 111 ، 0.2) 0 بكسل 7 بكسل 29 بكسل 0 بكسل ؛

انتاج:

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

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

مربع الظل: rgba (0 ، 0 ، 0 ، 0.15) 1.95 بكسل 1.95 بكسل 2.6 بكسل ؛

انتاج:

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

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

مربع الظل: rgba (0 ، 0 ، 0 ، 0.35) 0 بكسل 5 بكسل 15 بكسل ؛

انتاج:

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

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

مربع الظل: 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) 0 بكسل 12 بكسل 13 بكسل ، rgba (0 ، 0 ، 0 ، 0.09) 0 بكسل -3 بكسل 5 بكسل ؛

انتاج:

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

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

مربع الظل: rgba (6 ، 24 ، 44 ، 0.4) 0 بكسل 0 بكسل 0 بكسل 2 بكسل ، rgba (6 ، 24 ، 44 ، 0.65) 0 بكسل 4 بكسل 6 بكسل -1 بكسل ، rgba (255 ، 255 ، 255 ، 0.08) 0 بكسل 1 بكسل 0 بكسل أقحم ؛

انتاج:

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

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

مربع الظل: rgba (0 ، 0 ، 0 ، 0.1) -4 بكسل 9 بكسل 25 بكسل -6 بكسل ؛

انتاج:

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

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

مربع الظل: rgba (136 ، 165 ، 191 ، 0.48) 6 بكسل 2 بكسل 16 بكسل 0 بكسل ، rgba (255 ، 255 ، 255 ، 0.8) -6 بكسل -2 بكسل 16 بكسل 0 بكسل ؛

انتاج:

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

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

مربع الظل: rgba (3 ، 102 ، 214 ، 0.3) 0 بكسل 0 بكسل 0 بكسل 3 بكسل ؛

انتاج:

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

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

مربع الظل: rgba (50 ، 50 ، 93 ، 0.25) 0 بكسل 30 بكسل 60 بكسل -12 بكسل أقحم ، rgba (0 ، 0 ، 0 ، 0.3) 0 بكسل 18 بكسل 36 بكسل -18 بكسل ؛

انتاج:

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

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

مربع الظل: rgba (240 ، 46 ، 170 ، 0.4) 0 بكسل 5 بكسل ، rgba (240 ، 46 ، 170 ، 0.3) 0 بكسل 10 بكسل ، rgba (240 ، 46 ، 170 ، 0.2) 0 بكسل 15 بكسل ، rgba (240 ، 46 ، 170 ، 0.1) 0 بكسل 20 بكسل ، rgba (240 ، 46 ، 170 ، 0.05) 0 بكسل 25 بكسل ؛

انتاج:

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

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

مربع الظل: rgba (240 ، 46 ، 170 ، 0.4) 5 بكسل 5 بكسل ، rgba (240 ، 46 ، 170 ، 0.3) 10 بكسل 10 بكسل ، rgba (240 ، 46 ، 170 ، 0.2) 15 بكسل 15 بكسل ، rgba (240 ، 46 ، 170 ، 0.1) 20 بكسل 20 بكسل ، rgba (240 ، 46 ، 170 ، 0.05) 25 بكسل 25 بكسل ؛

انتاج:

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

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

مربع الظل: rgba (0 ، 0 ، 0 ، 0.09) 0 بكسل 2 بكسل 1 بكسل ، rgba (0 ، 0 ، 0 ، 0.09) 0 بكسل 4 بكسل 2 بكسل ، rgba (0 ، 0 ، 0 ، 0.09) 0 بكسل 8 بكسل 4 بكسل ، rgba (0 ، 0 ، 0 ، 0.09) 0 بكسل 16 بكسل 8 بكسل ، rgba (0 ، 0 ، 0 ، 0.09) 0 بكسل 32 بكسل 16 بكسل ؛

انتاج:

دمج CSS مع صفحة HTML

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

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

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

CSS داخلي

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

النمط 4

مضمنة CSS

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

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

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

النمط 4

CSS خارجي

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

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

.heading {
محاذاة النص: مركز ؛
}
.image-box {
العرض محجوب؛
الهامش الأيسر: تلقائي ؛
الهامش الأيمن: تلقائي ؛
مربع الظل: rgba (0 ، 0 ، 0 ، 0.35) 0 بكسل 5 بكسل 15 بكسل ؛
}

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

النمط 4

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

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

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

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

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

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

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

اقرأ التالي

عن المؤلف