لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم
يُعدّ تأثير الظل من الخصائص المُستخدمة في CSS الذي يبدو بسيطًا عند النظر إليه، إلا أن النتيجة التي تظهر تشبه أعمال التصميم من عام 2008. فإن القواعد المُستخدمة في التصيغ قصيرة، لكن ما يفعله كل قيمة من هذه القواعد — وكيف تتفاعل — ليس واضحًا. إليك كيفية كتابة أشكال للظل تبدو مدروسة، وليس مُصقولة بشكل مُباشر.
التركيب، المُفسّر
box-shadow: offset-x offset-y blur-radius spread-radius color;خمسة قيم. دعنا نكون دقيقين في كل قيمة:
- offset-x: كم يُدفع الظل إلى اليمين أو اليسار. يتحرك إلى اليمين عند القيم الموجبة، ويتحرك إلى اليسار عند القيم السالبة.
- offset-y: كم يُدفع الظل إلى الأسفل. يتحرك إلى الأسفل عند القيم الموجبة.
- blur-radius: يُخفّف من حافة الظل. عند
0، تكون الحافة صلبة. عند القيم الأعلى، يُستخدم تأثير الغلاف الغاوسي لتوسيع الظل على شكل الظل. - spread-radius: يتوسع أو يُقلل من حجم الظل 🔒 فحوصات الأمان: بمجرد تطبيق تأثير التباعد. عند القيم الموجبة، يصبح أكبر من العنصر؛ عند القيم السالبة، يصبح أصغر.
- color: لون الظل. من الأخطاء الشائعة استخدام لون أسود مُجرد.
- inset: مصطلح اختياري يعكس الظل داخل العنصر.
التباعد مقابل التوسع: الارتباك الذي يُسبب مشاكل في الظلال
هذه القيمتين هي مصدر معظم "لماذا يبدو هذا غريبًا" في التصميم.
التباعد يُخفّف من الظل. يُحاكي تباعد الضوء — كلما ابتعد المصدر، كلما توسّع الظل. عند عنصر صغير، يبدو تأثير التباعد مختلفًا عن عنصر كبير. blur-radius ) والتسجيل المستمر ( 8px التوسع
يُوسع أو يُقلل من شكل الظل الأساسي. إذا كنت ترغب في إنشاء شعور بأن الظل "بعيد" وناعم، فإن زيادة التباعد دون توسع سالب يعني أن الظل يتوسع خارج حدود العنصر، مما قد يبدو غير مُثبت. تقليل التوسع بقيمة سالبة يُعيد تثبيت الظل داخل الحدود، بحيث يبدأ التباعد من قاعدة طبيعية. التركيب الصحيح عادةً يكون تباعد معتدل مع توسع صفر أو سالب قليلاً. هذا هو الطريقة التي تعمل بها الظلال في الواقع — تكون أكثر نعومة مع الابتعاد، لكنها لا تتوسع خارج العنصر الذي يُنتجها.
إيجاد ظلال تبدو طبيعية
ثلاثة قواعد لظلال تبدو مُدروسة:
1. لا تستخدم لون أسود مُجرد.
تُأخذ الظلال من البيئة المحيطة. لون داكن من نوع النايفي أو لون داكن دافئ من يُظهر الظل دون أن يبدو كشكل مُطبّق. جرب 0.10–0.15 كأول خطوة، ثم قم بتعديل اللون بدرجة دافئة أو باردة لتتناسب مع لوحة التصميم. rgba(0, 0, 0, 0.12) 2. اختر مصدر ضوء واحد.
إذا اتجهت الظلال في اتجاهات مختلفة على عناصر مختلفة، فإن الصفحة تبدو غير متسقة. اختر اتجاهًا — عادةً الاتجاه الموجب (الضوء من الأعلى) — واحتفظ به على مستوى النظام. offset-y 3. احتفظ بدرجة الشفافية منخفضة.
يُظهر الظل عند درجة شفافية كاملة كحافة. إذا كان يمكنك رؤية حافة صلبة، فهذا يعني أنك ارتفعت درجة الشفافية أو أنك قمت بتجاهل التباعد. الظلال التي تبدو طبيعية تكون خفيفة — فهي تُعطي حجمًا، وليس حدودًا. إضافة طبقات متعددة من الظلال لخلق عمق
يسمح CSS بوضع طبقات متعددة من الظلال على عنصر واحد. هذا هو المكان الذي تُخلق فيه الأبعاد الحقيقية دون تأثير بصري.
بدلاً من استخدام ظل واسع، جرب استخدام طبقة محدودة للاتصال، وطبقة متوسعة للارتفاع.
الطبقة الأولى تُثبت العنصر على السطح. والطبقة الثانية تُعطي شعورًا بأنه يُرفع فوق السطح. لا تُعتبر أي طبقة "الظل" منفصلة — معًا يُخلق شعور بالعمق. في الواقع، هذا يُحاكي كيف يُنتج مصدر ضوء قوي قريب ظلًا محدودًا تحته، بينما يملأ الضوء المحيط منطقة ناعمة أكثر بعيدًا.
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.08),
0 8px 24px rgba(0, 0, 0, 0.06);الظلال الداخلية: عندما يُقلب الضوء
مُصطلح يُرسم الظل داخل حدود العنصر بدلًا من خارجه. الاستخدامات الرئيسية هي:
ال inset حالة زر مُضغط
- : الظل الداخلي الضئيل علىيُعطي شعورًا بانكماش حقيقي، مثل الضغط على زر حقيقي.
:activeعمق الحقول المدخلة - : تُشعر الحقول المدخلة والمساحات النصية بأنها مُبتَلَّة من السطح، مع ظل داخلي على الحافة العلوية — نمط يعود إلى التصميم المُشبه للواقع، لكنه يُقرأ بوضوح.الأداء: متى تستخدم filter: drop-shadow بدلًا من ذلك
/* Pressed button */
button:active {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
/* Input field depth */
input {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
}تُحفّز إعادة رسم
box-shadow على كل تغيير — ليس فقط على العنصر، بل على الطبقة المُرسمة تحته. في الحالات التي تتضمن تفاعلات أو واجهات تتحرك كثيرًا، يُضيف هذا تكلفة قابلة للقياس. تُنفذ على مُركّب الرسم المُتَوَسِّط (GPU) وتُعدّ أقل تكلفة في الظلال المتحركة. كما أنّها تتبع الشكل المُرسوم للعنصر (بما في ذلك المناطق الشفافة)، بينما تتبع المربع المُحدد للعنصر دائمًا.
filter: drop-shadow() القاعدة العملية: استخدم box-shadow لأوجه الظل الثابتة على عناصر التصميم. استخدم
على العناصر المتحركة أو على الشكل المُتَوَسِّط (SVG) حيث يجب أن يُتوافق الظل مع الشكل البصري بدلًا من المربع المحدد للعنصر. box-shadow أيقونات الظل للنظام التصميمي filter: drop-shadow يؤدي تدوين القيم المُحددة لكل عنصر إلى عدم التوازن. اجعل مجموعة صغيرة من أيقونات الارتفاع مُحددة مرة واحدة، ثم استخدمها في كل مكان.
تستخدم كل أداة من هذه الأيقونات نهج الطبقتين: ظل محدود للاتصال، وظل متوسّع للارتفاع. تزداد القيمة المُحددة للتباعد والشفافية مع ارتفاع الارتفاع — كلما ابتعد الظل عن السطح، كلما أصبح أكثر نعومة وتوسّعًا.
تُستخدم هذه القيم بشكل جيد على خلفيات بيضاء أو بنيّة فاتحة. على الخلفيات الداكنة، عكّس المنطق — استخدم ألوان أخف وأكثر شفافية للظلال الداخلية بدلًا من الألوان الداكنة للظلال المُلقاة.
:root {
--shadow-sm:
0 1px 2px rgba(0, 0, 0, 0.05),
0 1px 4px rgba(0, 0, 0, 0.04);
--shadow-md:
0 2px 4px rgba(0, 0, 0, 0.07),
0 4px 12px rgba(0, 0, 0, 0.06);
--shadow-lg:
0 4px 8px rgba(0, 0, 0, 0.08),
0 8px 24px rgba(0, 0, 0, 0.06);
--shadow-xl:
0 8px 16px rgba(0, 0, 0, 0.08),
0 16px 48px rgba(0, 0, 0, 0.06);
--shadow-2xl:
0 12px 24px rgba(0, 0, 0, 0.10),
0 32px 80px rgba(0, 0, 0, 0.08);
}امتنع عن التخمين
إذا كنت تُجري تجربة على قيم الظل — خاصةً عند تراكيب متعددة للظلال أو عند اختبارات مختلفة للشفافية — فإن عرضًا مباشرًا يوفر وقتًا كبيرًا. يُمكنك من خلال
في IO Tools أن تُعدّل جميع القيم الستة في الوقت الحقيقي، وتُركّب طبقات متعددة من الظلال، ونسخ الكود المُولّد مباشرة. يُستخدم هذا في تحسين أداة التصميم الجديدة أو التحقق من أن الظل يُظهر بشكل صحيح قبل أن يُدخل إلى الإنتاج.
الفرق بين ظل يبدو مُصممًا وآخر يبدو مُصقولة عادةً يعود إلى ثلاث نقاط: شفافية منخفضة، لون غير أسود مُجرد، وترك التباعد يُفعل ما لم يكن مقصودًا أن يفعله التوسع. مولد ظل صندوق CSS في IO Tools يمكنك تعديل جميع المعلمات الستة في الوقت الحقيقي، ووضع طبقات متعددة من الظل، ونسخ الكود CSS المُولَّد مباشرة. يُستخدم هذا للتعديل الدقيق لرموز التصميم الجديدة أو التحقق من أن الظل يُظهر بشكل صحيح قبل أن يُنشر في الإنتاج.
الفرق بين ظل يبدو مُصممًا وظل يبدو مُنسخًا عادةً يعود إلى ثلاث نقاط: شدة شفافية منخفضة، لون غير بسيط للأسود، واعتماد الظلال على التباعد بدلاً من التمدد الذي لم يكن مقصودًا في البداية.
هل تريد حذف الإعلانات؟
تخلص من الإعلانات اليوم
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
إعلان · حذف؟
أدوات يجب تجربتها
عرض الكلإعلان · حذف؟
شارك
ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة
إعلان · حذف؟