CSS هي اللغة التي يستخدمها المطورون لتصميم موقع الويب. فهو يتحكم في كيفية عرض عناصر HTML على الشاشة أو على الورق أو في أي شكل آخر من أشكال الوسائط. يوفر CSS قوة التخصيص الكاملة لتصميم موقع الويب في الصور.
يمكنك استبدال الظل التراثي للعنصر، وfont style، font color, وBox-Shadow، وmargin، والعديد من properties الأخرى باستخدام CSS. سنرشدك عبر بعض الاستخدامات الفعالة لBox-Shadow في هذا الدليل.
ما هو box-shadow CSS؟
- Horizontal offset: إذا كانت الإزاحة الأفقية جيدة، فسيكون الظل على يمين الصندوق. وإذا كانت الإزاحة الأفقية سيئة، فقد يكون الظل على يسار المربع.
- Vertical displacement: إذا كانت الإزاحة الرأسية فعالة، فقد يكون الظل أسفل المربع. وإذا كانت الإزاحة الرأسية سيئة، فيمكن أن يكون الظل فوق الحاوية.
- Blur Radius: كلما كان السعر أفضل، كلما كان الظل أكثر ضبابية.
- Spread Radius: يشير إلى مقدار الظل الذي يجب أن ينتشر. تعمل القيم عالية الجودة على زيادة انتشار الظل، بينما تعمل القيم السالبة على تقليل الانتشار.
- Shade: يدل على لون الظل. بالإضافة إلى ذلك، فهو يدعم أي تخطيط ألوان مثل rgba أو hex أو hsla
تعد معلمات detection وcolor اختيارية. الجزء الأكثر إثارة في field-shadow هو أنه يمكنك استخدام فاصلة لفصل قيم ظل الحاوية في أي وقت. سيتم استخدام هذا لإنشاء أكثر من حدود وظلال على العوامل.
01. Box-Shadow CSS 01
المثال 1
معاينة
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
02. Box-Shadow CSS 02
المثال 2
معاينة
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
03. Box-Shadow CSS 03
المثال 3
معاينة
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
04. Box-Shadow CSS 04
المثال 4
معاينة
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
05. Box-Shadow CSS 05
المثال 5
معاينة
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
06. Box-Shadow CSS 06
المثال 6
معاينة
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
07. Box-Shadow CSS 07
المثال 7
معاينة
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
08. Box-Shadow CSS 08
المثال 8
معاينة
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
09. Box-Shadow CSS 09
المثال 9
معاينة
box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
10. Box-Shadow CSS 10
المثال 10
معاينة
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
11. Box-Shadow CSS 11
المثال 1 1
معاينة
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
12. Box-Shadow CSS 12
المثال 12
معاينة
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
13. Box-Shadow CSS 13
المثال 13
معاينة
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
14. Box-Shadow CSS 14
المثال 14
معاينة
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
15. Box-Shadow CSS 15
المثال 15
معاينة
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
16. Box-Shadow CSS 16
المثال 16
معاينة
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
17. Box-Shadow CSS 17
المثال 17
معاينة
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
18. Box-Shadow CSS 18
المثال 18
معاينة
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
19. Box-Shadow CSS 19
المثال 19
معاينة
box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
20. Box-Shadow CSS 20
المثال 20
معاينة
box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
