مطور / CSS
منشئ CSS box-shadow
أنشئ CSS box-shadow بصريًا: اضبط الإزاحة والتمويه والانتشار واللون والشفافية وخيار inset وعدة طبقات، مع إعدادات مسبقة ومعاينة مباشرة، ثم انسخ CSS.
منشئ CSS box-shadow: تتحول كل طبقة إلى ظل واحد ضمن قائمة box-shadow، وتتضمن الإزاحة الأفقية والرأسية ونصف قطر التمويه والانتشار ولونًا مكتوبًا بصيغة rgb()، مع وضع الشفافية بعد شرطة مائلة. تُرسم الطبقات بحيث تكون الأولى في الأعلى. ويمكن تغيير نصف قطر زوايا صندوق المعاينة ولونه وخلفيته ليتوافق مع تصميمك، ويتبع الظل الزوايا كما سيظهر في صفحتك. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.
- الفئة
- أدوات المطورين
- مرات التشغيل
- في المتصفح
- التكلفة
- مجاني · بلا تسجيل
- التوفر
- جاهز للاستخدام
تعمل بالكامل في المتصفح
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
القيم هي الإزاحة إلى اليمين، والإزاحة إلى الأسفل، والتمويه، والانتشار، واللون. تبدو عدة طبقات رقيقة أكثر طبيعية من ظل واحد كثيف؛ وتُرسم الطبقات اللاحقة أسفل الطبقات السابقة.
الإعدادات المسبقة
الارتفاع
تستخدم أنظمة التصميم الظلال لإظهار مدى ارتفاع العنصر فوق الصفحة: للبطاقة الساكنة ظل صغير ومحدد، بينما للقائمة أو مربع الحوار ظل أكبر وأكثر نعومة. ويساعد الحفاظ على بضعة مستويات ثابتة، بدلًا من استخدام ظل مختلف في كل مكان، على منح الواجهة مظهرًا متسقًا.
تكاد الظلال لا تظهر على خلفية داكنة؛ وفي هذه الحالة يؤدي لون السطح الأفتح أو الحد الرفيع الغرض نفسه. اجمع بين الظلال وتدرج CSS للأزرار والبطاقات.
الظلال والأداء
يحتاج التمويه الكبير إلى موارد رسم أكثر من التمويه الصغير، وهذا مهم عند تمرير أو تحريك عناصر كثيرة ذات ظلال في الوقت نفسه. لتحريك ظل عند المرور، يكون تلاشي ظل ثانٍ أقوى على عنصر زائف باستخدام opacity أكثر سلاسة من تغيير box-shadow نفسه في كل إطار.
طريقة الاستخدام
- ابدأ بإعداد مسبق أو اضبط إزاحة الطبقة الأولى وتمويهها وانتشارها وشفافيتها.
- أضف طبقات أخرى للحصول على ظل أكثر نعومة وواقعية، أو فعّل خيار inset لإظهار الظل داخل الصندوق.
- انسخ تعريف box-shadow.
الخصوصية والقيود
تعمل كل العمليات في المتصفح؛ ولا يُحفظ آخر ظل لك إلا في هذا المتصفح.
أدوات ذات صلة
الأسئلة الشائعة
ما الأرقام الأربعة في box-shadow؟
هي الإزاحة الأفقية، إذ تحرّك القيمة الموجبة الظل إلى اليمين، والإزاحة الرأسية، إذ تحرّكه القيمة الموجبة إلى الأسفل، ونصف قطر التمويه، إذ تجعل القيمة الأكبر الظل أنعم ولا يمكن أن تكون سالبة، والانتشار، إذ تجعل القيمة الموجبة الظل أكبر من الصندوق والسالبة أصغر منه. يأتي اللون في النهاية.
كيف أجعل الظل يبدو طبيعيًا؟
استخدم شفافية منخفضة، وأزح الظل إلى الأسفل كما لو أن مصدر الضوء من الأعلى، وادمج طبقتين أو أكثر: طبقة صغيرة وأكثر حدة قريبة من الصندوق، وأخرى أكبر وأنعم على مسافة أبعد. يساعد الانتشار السالب قليلًا على منع ظهور التمويه الكبير عند الجانبين.
ماذا يفعل inset؟
يرسم الظل داخل الصندوق بدلًا من خارجه، فيبدو الصندوق غائرًا، وهو مناسب لحقول الإدخال والأزرار المضغوطة.
لماذا لا يظهر الظل على صورة؟
يُرسم box-shadow حول صندوق العنصر، وليس حول شكل الصورة الموجودة بداخله. لإظهار حدود PNG الشفاف، استخدم CSS filter drop-shadow() بدلًا منه.
أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا