Softonic

مولد الظل لصندوق CSS

خطوة 1 / 2
التالي

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

كيفية تصميم ظل الصندوق

  1. 1

    اضبط قيم الظل

    الإزاحة الأفقية والإزاحة الرأسية ونصف القطر الضبابي والانتشار واللون مع العتامة.

  2. 2

    بدّل inset

    حوّل الظل إلى inset للحصول على ظل داخلي، وهو مفيد للأزرار المضغوطة وتأثيرات التجويف.

  3. 3

    اختر لون الظل

    الأسود ذو العتامة المنخفضة هو الخيار الكلاسيكي. الظلال الملونة (التي تناسب لون العنصر وتكون أغمق) تُقرأ بشكل طبيعي أكثر.

  4. 4

    انسخ CSS

    انسخ قاعدة الظل الواحد وألصقها في ورقة الأنماط. للحصول على ظلال متعددة الطبقات، أنشئ كل طبقة على حدة واجمع القواعد بفاصلة.

بناء جملة مربع الظل

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];
  • إزاحة x: موجب = يمين، سالب = يسار.
  • إزاحة y: موجب = لأسفل، سالب = لأعلى.
  • تمويه: 0 = حافة صلبة، أعلى = أكثر نعومة. الحجم المرئي هو 1.5× تمويه تقريبًا خارج العنصر.
  • الانتشار: حجم إضافي يتجاوز العنصر. الإيجابي ينبت الظل؛ سلبي ينكمش (مفيد للهالات الدقيقة).
  • اللون: يدعم أي لون CSS. rgba(0, 0, 0, 0.15) هو الخيار الأساسي الأكثر استخدامًا.
  • inset: الكلمة الأساسية التي تقلب الظل داخل العنصر.

تبدو الظلال ذات الطبقات حقيقية

ينتج هذا المولّد قاعدة ظل واحدة في كل مرة؛ لبناء ظل متعدد الطبقات، أنشئ كل طبقة على حدة واجمع القواعد بفاصلة.

ظل واحد مع 0 0 40 بكسل يبدو ضبابيًا. هناك ظلان - ظل صغير حاد قريب من العنصر وآخر ناعم أكبر بعيدًا - يحاكيان كيفية تبعثر الضوء الحقيقي.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

السطر الأول يعطي ظل الاتصال الضيق. والثاني هو المحيط الأكثر ليونة. يغطي هذا النمط الفردي 80% من واجهة المستخدم بنمط البطاقة.

أنظمة الارتفاع

يستخدم Material Design ستة مستويات ارتفاع، لكل منها مجموعة ظلال مختلفة. وبشكل مبسط:

الارتفاع الظل
1 (يستريح) 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24)
2 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23)
3 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23)
4 (مرفوعاً) 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22)
5 (عائمة) 0 19px 38px rgba(0,0,0,.30), 0 15px 12px rgba(0,0,0,.22)

اختر واحدًا لكل دور ارتفاع واستخدمه باستمرار.

قراءة الظلال الملونة بشكل طبيعي أكثر

تبدو الظلال السوداء النقية مصطنعة لأن الظلال الحقيقية تكون ملونة بالسطح الموجود أسفلها. حاول:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);
  • لون أزرق رمادي بارد بدلاً من الأسود النقي. على الخلفيات الدافئة، استخدم لونًا أكثر دفئًا.

الأداء

يتم رسم ظلال الصندوق عند كل إعادة طلاء. يمكن أن تؤدي الظلال الكبيرة والثقيلة على العديد من العناصر إلى إبطاء عملية التمرير. التخفيف:

  • استخدم transform: translateZ(0) على العنصر لفرض طبقة مركبة.
  • استبدل الظلال المعقدة بـ filter: drop-shadow() فقط إذا كنت تريد أن يتبع الظل مسار مقطع (وهو أبطأ بشكل عام).
  • الحد من الظلال على العناصر التي يتم إعادة عرضها بشكل متكرر.

inset للحالات المضغوطة

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

تبدو الظلال الداخلية بمظهر غائر - حيث يظهر الزر مضغوطًا على السطح. ادمجها مع transform: translateY(1px) الصغيرة للأسفل للحصول على نقرة لمسية.

الأسئلة الشائعة

عادةً ما يكون سبب ذلك هو أن التمويه منخفض جدًا أو أن الانتشار مرتفع جدًا. يبدو الظل ذو الحواف الصلبة بدون تمويه كعنصر مكرر. قم بزيادة التمويه (20-30 بكسل هي نقطة البداية الشائعة) وحافظ على الانتشار عند 0 أو قيم سلبية صغيرة جدًا.

يتبع Box-shadow مربع حدود العنصر، بما في ذلك نصف قطر الحدود - لذلك تحصل البطاقات المستديرة على ظلال مستديرة بشكل جيد تلقائيًا. بالنسبة لأشكال مسار المقطع، لا يتبع مربع الظل المقطع؛ استخدم filter: drop-shadow() بدلاً من ذلك.

قم بإزاحة الظل بشكل كبير في الاتجاه المختار واستخدم الانتشار السلبي لإخفاء الجانب الآخر. أو استخدم ظلين - أحدهما مرئي على الجانب المستهدف، والآخر بانتشار سلبي “لتناول” الانسكاب غير المرغوب فيه.

ليس هناك حدود صارمة، ولكن كل ظل هو تمريرة طلاء أخرى. ثلاث إلى أربع طبقات هو السقف العملي. أي شيء آخر ويجب أن تفكر في استخدام صورة خلفية أو SVG بدلاً من ذلك.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

منسق JSON

الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.

عارض ملفات HAR

افتح تسجيلات شبكة HAR محليًا، وصفِّ الطلبات، وافحص الرؤوس المحجوبة والتوقيتات، وصدِّر ملخصات منقحة من دون رفع الملف.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

الأداة متاحة بلغات أخرى