صمّم ظلًا متعدّد الطبقات بـ box-shadow مع معاينة مباشرة وانسخ CSS جاهزًا للإنتاج.
آخر تحديث
يعلّمك Coddy عبر كتابة كود حقيقي في متصفحك: دروس تفاعلية، وملاحظات فورية، ومساعدة بالذكاء الاصطناعي عندما تتعثر.
box-shadow خاصية CSS تضيف لأي عنصر ظلًا أو هالةً أو غورًا داخليًا. هي أقوى رافعة لإضافة *الارتفاع* إلى تصميم مسطّح - تنفصل البطاقات عن الصفحة، تطفو النوافذ المنبثقة فوق المحتوى، وتبدو الأزرار قابلة للضغط.
السر أن الظل *الجيد* نادرًا ما يكون طبقة واحدة. الظلال الحقيقية أنعم وتحمل ضوءًا محيطًا - معظم أنظمة التصميم (Material و iOS و Tailwind) تكدّس بياني box-shadow بإزاحات وشفافيّات مختلفة. كتابة ذلك يدويًا متعب؛ والمولّد يتيح ضبط كل طبقة بصريًا ومشاهدة الناتج المجمّع مباشرةً.
يدعم مولّد Coddy عددًا غير محدود من الطبقات وظلالًا *خارجية* و*داخلية*، مع لون وشفافية لكل طبقة، وقوالب جاهزة لأكثر الأنماط شيوعًا: بطاقة هادئة، ظل حاد، توهّج هوية، غور داخلي، وسطح nömorfik. انسخ الـ CSS والصقه في ملف الأنماط - دون رفع أو حساب أو علامة مائية.
box-shadow: [inset] <x> <y> <blur> <spread> <color>. كلمة inset تضع الظل *داخل* العنصر؛ من دونها يقع خارجه.rgba() (أو hsla()) لتعديل الشفافية لكل طبقة. الأسود الصافي بشفافية منخفضة يُقرأ كرمادي ناعم؛ الأسود الكامل يبدو كقصاصة حادّة.box-shadow، فهو من أرخص التحسينات البصرية. لا يؤثّر على التخطيط - يحتفظ العنصر بحجمه وموقعه.اختر القالب الأقرب إلى الشعور المطلوب - بطاقة هادئة، رفع ناعم، ظل حاد، توهّج هوية، غور داخلي، أو nömorfik. القوالب نقاط انطلاق جيدة للضبط الدقيق.
حرّك شرائط X/Y، blur، spread، اللون، والشفافية. تتحدّث المعاينة فورًا. شفافية أقل + blur أكبر = ظلّ *أنعم*.
اضغط *إضافة طبقة* لتكديس ظل ثانٍ. العمق الواقعي يستخدم تقريبًا دائمًا طبقتين: قصيرة ومحكمة لنقطة التماس، وأخرى طويلة وناعمة كظل محيط.
تفعيل *Inset* يرسم الظل داخل العنصر. اجمعه مع ظل خارجي خفيف لتأثير زر مضغوط.
حين تتطابق المعاينة مع تصميمك اضغط *نسخ CSS*. تتضمّن القاعدة المُولَّدة كل الطبقات النشطة - الصقها مباشرة في ملف الأنماط.
كل قيمة في box-shadow: x y blur spread color ودورها.
| القيمة | التأثير | النطاق النموذجي |
|---|---|---|
| إزاحة X | تحريك الظل أفقيًا؛ موجب = يمينًا | −40px إلى 40px |
| إزاحة Y | تحريك الظل عموديًا؛ موجب = للأسفل | 0px إلى 40px لإضاءة طبيعية |
| Blur | تنعيم حافة الظل | 0px إلى 80px |
| Spread | تسمين/تقليص الظل قبل blur | −30px إلى 30px |
| اللون | أي لون CSS؛ rgba() يعدّل الشفافية لكل طبقة | rgba(0,0,0,0.05–0.3) لظلال طبيعية |
inset | رسم الظل داخل العنصر | - |
| عدة طبقات | مفصولة بفواصل؛ تُكدَّس من الخلف إلى الأمام | طبقتان إلى ثلاث تعطيان عمقًا واقعيًا |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);ظلّ قصير ومحكم يحدّد نقطة التماس، وظل أطول وأنعم يعطي إحساس الضوء المحيط. هذا النمط تستخدمه معظم أنظمة التصميم الحديثة.
box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);اضبط X و Y على الصفر لينبعث التوهج بشكل متّسق. spread موجب صغير يسمّن التوهج قبل أن ينعّمه blur. استخدمه باعتدال - التوهجات الملوّنة تلفت الانتباه بقوة.
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);ظلال inset تُرسم داخل العنصر. ظل ناعم يعطي إحساس الغور، وظل inset بسماكة 1 بكسل يضيف حدًّا داخليًا خفيفًا لزيادة الوضوح.
filter: drop-shadow() و box-shadow متبادلين. drop-shadow() يتبع قناة ألفا لـ SVG أو صورة - مناسب للأشكال غير المنتظمة - بينما box-shadow أسرع وأنظف للأشكال المستطيلة.box-shadow يتجاهل overflow: hidden على العنصر نفسه. إذا كان العنصر الأب لديه overflow: hidden فسيُقتطع الظل.box-shadow؟box-shadow: x y blur spread color. القيمتان الأولى والثانية إزاحتان، و*blur* ينعّم الحافة، و*spread* يغيّر الحجم قبل blur، واللون أي لون CSS (استخدم rgba() للشفافية). إضافة inset في البداية تجعل الظل داخل العنصر.افصلها بفواصل. تُرسم من الخلف إلى الأمام بترتيب كتابتها، فيقع الأول في الأسفل. مفيد لدمج ظل تماس قصير مع ظل محيط ناعم.
box-shadow و filter: drop-shadow()؟box-shadow مستطيل العنصر وسريع في الرسم. أمّا drop-shadow() فيتبع قناة ألفا (ممتاز لـ SVG وصور PNG شفافة) لكنه أكثر تكلفة. استخدم box-shadow للبطاقات والأزرار، وdrop-shadow() للأشكال غير المنتظمة.transform: scale() في عنصر أعلى في الشجرة.box-shadow على التخطيط؟overflow: visible.