Box Shadow Generator
Generate box shadows
Generate box shadows يعمل محليا في المتصفح الخاص بك
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
يقوم Box Shadow Generator بإنشاء ظل من الإزاحة والتمويه والانتشار واللون والتعتيم، مع معاينة مباشرة وCSS. الإعدادان اللذان يخلط بينهما الناس هما التمويه والانتشار: يعمل التمويه على تنعيم الحافة للخارج والداخل من شكل الظل، بينما ينمو الانتشار أو يقلص حجم الظل قبل حدوث أي تمويه. الانتشار السلبي هو ما يمنع الظل الناعم من أن يبدو كالهالة، ولهذا السبب تستخدم الإعدادات الافتراضية هنا قيمة سلبية صغيرة.
Where people use the
- بناء مقياس الارتفاع للبطاقات والنماذج والقوائم.
- إنشاء حالة مضغوطة أو مركزة باستخدام ظل داخلي.
- تخفيف الحدود دون إضافة حدود حقيقية.
- التحقق من الشكل الفعلي لقيم الظل لمواصفات التصميم.
How to use the
- 1
تعيين الإزاحات
الإزاحة X تحرك الظل لليمين، والإزاحة Y تحركه للأسفل. القيم السلبية تحركها في الاتجاه الآخر.
- 2
ضبط التمويه والانتشار
طمس يخفف الحافة. يؤدي الانتشار إلى توسيع الظل قبل التمويه؛ استخدم انتشارًا سلبيًا صغيرًا للظل الذي يقع أسفل العنصر وليس حوله.
- 3
اختر اللون والتعتيم
يبدو اللون الأسود النقي عند العتامة الكاملة قاسيًا. يُنظر إلى العتامة المنخفضة، التي تتراوح بين 8 و20 بالمائة، على أنها عمق وليس ترابًا.
- 4
ضع علامة على الصورة الداخلية إذا كنت تريد ظلًا داخليًا
يقوم Inset برسم الظل داخل العنصر بدلاً من خلفه، وهو ما يناسب الحالات والآبار المضغوطة.
- 5
انسخ ملف CSS
تتضمن القاعدة لون rgba، بحيث يمكن لصقه مباشرة في ورقة الأنماط.
النصائح وأفضل الممارسات
- يبدو الظلان ذو الطبقتين أفضل بكثير من الظل الثقيل.
- حافظ على اتساق مصدر الضوء: إذا ألقيت بطاقة واحدة للأسفل إلى اليمين، فيجب أن يتم إلقاء جميع البطاقات.
- انتبه إلى الظلال التي يتم قصها بواسطة أحد الوالدين مع إخفاء الفائض.
الأسئلة المتداولة
ما هو الفرق بين طمس وانتشار؟
يغير الانتشار حجم شكل الظل قبل أي تنعيم، إيجابي للنمو وسلبي للانكماش. يقوم Blur بعد ذلك بتنعيم الحافة بنصف القطر المحدد. للحصول على ظل ضيق أسفل البطاقة، تحتاج إلى تمويه بسيط وانتشار سلبي قليلًا.
لماذا يبدو ظلي رماديًا وقذرًا؟
لأنه أسود نقي بدرجة عتامة عالية. استخدم ألفا منخفضًا، حوالي 0.08 إلى 0.2، وفكر في تلوين الظل باتجاه لون الخلفية، والذي يقرأ بشكل طبيعي أكثر.
هل يمكنني الحصول على أكثر من ظل واحد؟
نعم. افصل بين عدة ظلال بفواصل في نفس الإعلان؛ يتم تكديسها من الأمام إلى الخلف، لذا يكون الأول في الأعلى. الظلال ذات الطبقات هي الطريقة التي يتم بها بناء الارتفاع الناعم والواقعي.
هل يؤثر ظل الصندوق على التخطيط؟
لا، يتم رسم الظلال خارج مربع العنصر ولا تشغل أي مساحة، لذا يمكن قصها بواسطة أحد الوالدين مع إخفاء الفائض أو بواسطة حاوية ضيقة.
هل تحريك ظل الصندوق مكلف؟
نعم نسبيا. يؤدي تغيير التمويه أو الانتشار إلى إجبار المتصفح على إعادة رسم الظل في كل إطار. للحصول على حركة سلسة، قم بتحريك العتامة أو التحويل بدلاً من ذلك، أو التلاشي المتقاطع بين ظلين معروضين مسبقًا.