طريقة إنشاء الظل
ابدأ بشكل جاهز
اختر ناعم أو بطاقة أو مرتفع أو غيرها، أو ابدأ من الصفر.
عدّل الطبقات
حرّك الإزاحة والتمويه والانتشار واللون والشفافية، وأضف طبقة ثانية لظل أكثر واقعية.
انسخ الكود
انسخ سطر CSS وضعه في قاعدة العنصر، أو انسخ صيغة Tailwind.
أجزاء box-shadow
الصيغة: box-shadow: [inset] x y blur spread color
| الجزء | ماذا يفعل | مثال |
|---|---|---|
| الإزاحة الأفقية x | موجب لليمين، سالب لليسار | 4px |
| الإزاحة الرأسية y | موجب للأسفل، سالب للأعلى | 8px |
| التمويه blur | كلما زاد صار الظل أنعم وأوسع (لا يكون سالبا) | 16px |
| الانتشار spread | يكبّر الظل أو يصغّره قبل التمويه | -4px |
| اللون | غالبا أسود بشفافية خفيفة | rgba(0, 0, 0, 0.15) |
| inset | يجعل الظل داخل العنصر | inset 0 2px 6px ... |
نصائح لظل جميل
ظل خفيف أجمل. شفافية من 8% إلى 20% تكفي غالبا. الظل الداكن جدا يبدو قديما.
طبقتان أو أكثر. ظل قريب حاد مع ظل بعيد ناعم يشبه الظل الحقيقي. جرّب الشكل «متدرج».
اتجاه واحد للضوء. اجعل الإزاحة الرأسية موجبة في كل عناصر الموقع، كأن الضوء يأتي من الأعلى.
أسئلة شائعة
كيف أضيف ظلا لعنصر في CSS؟
أضف خاصية box-shadow لقاعدة العنصر، مثل: .card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }. وفي ووردبريس ضعها في المظهر ← تخصيص ← CSS إضافي.
كيف أجعل الظل داخل العنصر؟
فعّل «ظل داخلي»، فتضاف كلمة inset في أول الظل.
كيف أضع أكثر من ظل لعنصر واحد؟
اضغط «+ طبقة». الظلال تُكتب مفصولة بفاصلة، والأول يُرسم فوق البقية.
ما الفرق بين box-shadow وdrop-shadow؟
box-shadow يرسم الظل حول صندوق العنصر المستطيل (مع انحناء الزوايا). أما filter: drop-shadow() فيتبع شكل الصورة الشفافة PNG أو SVG، ولا يدعم الانتشار ولا الظل الداخلي.
هل يعمل الكود في كل المتصفحات؟
نعم، box-shadow مدعوم في كل المتصفحات منذ سنوات، ولا يحتاج بادئة -webkit-.