العربية
صمّم ظلًا متعدّد الطبقات بـ box-shadow مع معاينة مباشرة وانسخ CSS جاهزًا للإنتاج.
آخر تحديث
box-shadow:
0px 8px 24px 0px rgba(0, 0, 0, 0.18);box-shadow خاصية CSS تضيف لأي عنصر ظلًا أو هالةً أو غورًا داخليًا. هي أقوى رافعة لإضافة *الارتفاع* إلى تصميم مسطّح - تنفصل البطاقات عن الصفحة، تطفو النوافذ المنبثقة فوق المحتوى، وتبدو الأزرار قابلة للضغط.
السر أن الظل *الجيد* نادرًا ما يكون طبقة واحدة. الظلال الحقيقية أنعم وتحمل ضوءًا محيطًا - معظم أنظمة التصميم (Material و iOS و Tailwind) تكدّس بياني box-shadow بإزاحات وشفافيّات مختلفة. كتابة ذلك يدويًا متعب؛ والمولّد يتيح ضبط كل طبقة بصريًا ومشاهدة الناتج المجمّع مباشرةً.
يدعم مولّد Coddy عددًا غير محدود من الطبقات وظلالًا *خارجية* و*داخلية*، مع لون وشفافية لكل طبقة، وقوالب جاهزة لأكثر الأنماط شيوعًا: بطاقة هادئة، ظل حاد، توهّج هوية، غور داخلي، وسطح nömorfik. انسخ الـ CSS والصقه في ملف الأنماط - دون رفع أو حساب أو علامة مائية.
box-shadow: [inset] <x> <y> <blur> <spread> <color>. كلمة inset تضع الظل *داخل* العنصر؛ من دونها يقع خارجه.اختر القالب الأقرب إلى الشعور المطلوب - بطاقة هادئة، رفع ناعم، ظل حاد، توهّج هوية، غور داخلي، أو 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 بكسل يضيف حدًّا داخليًا خفيفًا لزيادة الوضوح.
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.