مولد ظل CSS

مولّد ظل CSS

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

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

نصائح لظلال أفضل

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