Soft CSS Box Shadow — كود جاهز
أنشئ تعليمات برمجية لظل مربع CSS بشكل مرئي: أشرطة تمرير للإزاحة والتمويه والانتشار واللون مع العتامة والوضع الداخلي وما يصل إلى أربع طبقات مع معاينة مباشرة.
النتيجة
تفتح هذه الصفحة مولد مربع الظل المحمّل مسبقًا بظل ناعم: بدون إزاحة أفقية، و8 بكسل للأسفل، وتمويه كبير يبلغ 24 بكسل، وعتامة سوداء منخفضة بنسبة 12%. تعرضها بطاقة المعاينة على الفور — ادفع أي شريط تمرير وسيتبعه سطر CSS في الوقت الفعلي.
الظلال الناعمة هي العمود الفقري للواجهات الحديثة. يعمل التمويه الكبير المقترن بعتامة منخفضة على رفع البطاقة من الصفحة دون رسم مخطط تفصيلي واضح، ولهذا السبب تحتفظ معظم أنظمة التصميم بظلال الارتفاع الخاصة بها في هذا النطاق بالضبط بدلاً من الظلال الكثيفة والداكنة للتصميم المسطح المبكر.
انسخ خط ظل الصندوق مباشرة إلى ورقة الأنماط الخاصة بك، أو قم بتجميع ما يصل إلى ثلاث طبقات إضافية للحصول على ارتفاع أكثر ثراءً. يعمل المولد بالكامل في متصفحك، ولا يتم تحميل أي شيء في أي مكان.