مولّد ظل CSS (مع معاينة مباشرة)
ستة إعدادات مسبقة شائعة للظلال (ناعم، بطاقة، مرفوع، توهج، neumorphic، داخلي). ضبط دقيق لجميع المعاملات بالأشرطة المنزلقة، مشاهدة النتيجة مباشرة، ونسخ كود CSS جاهز للاستخدام.
كيف تعمل
معاملات الظل الخمسة
إزاحة X: الإزاحة الأفقية. القيمة الموجبة تحرّك الظل يميناً، والسالبة يساراً. لإضاءة قادمة من أعلى اليسار (الافتراض الشائع في واجهات المستخدم)، إزاحة X موجبة صغيرة تحاكي الضوء من أعلى اليسار.
إزاحة Y: الإزاحة الرأسية. القيمة الموجبة تحرّك الظل للأسفل محاكيةً مصدر ضوء علوياً. معظم ظلال واجهات المستخدم تستخدم Y موجبة.
نصف قطر الضبابية: مدى نعومة حافة الظل. 0 = حافة حادة (نادر). 8-30 بكسل هو النطاق الشائع للبطاقات والأزرار. القيم الأعلى تنتج ظلالاً ناعمة ومتلاشية.
الانتشار: يمدد الظل أو يُصغّره بشكل منتظم. القيم الموجبة تجعل الظل أكبر من العنصر؛ السالبة تُصغّره. الانتشار السالب مع الإزاحة يخلق تأثير 'مرفوع'.
اللون والشفافية: الظلال عادةً سوداء بشفافية منخفضة (10-30%). الظلال الملونة رائجة لكن أصعب استخداماً. طابق نطاق قيم خلفيتك — ظلال داكنة جداً على خلفيات داكنة تختفي، وظلال فاتحة جداً على خلفيات فاتحة تفقد التباين.
الظلال الداخلية
الظل الداخلي يُرسم داخل العنصر بدلاً من خارجه. يُستخدم لـ: حالات الزر المضغوط، حقول الإدخال الغائرة، تأثيرات neumorphic ثلاثية الأبعاد المدفوعة للداخل.
الظلال الداخلية تحترم نصف قطر حواف العنصر وتتجاهل الفيض. مفيدة لإضافة عمق بصري لعناصر واجهات المستخدم المسطحة دون تغيير التخطيط الفعلي.
Neumorphism وتوجه 'soft UI'
Neumorphism (الشائع في 2020-2022) يستخدم ظلين متعارضين — أحدهما فاتح والآخر داكن — لجعل العناصر تبدو بارزة من خلفية بنفس اللون. إعداد 'Neumorphic' المسبق يعرض الظل الداكن الواحد؛ لـ neumorphism كامل، اجمع مع ظل داخلي فاتح على الجانب المعاكس: 'inset -8px -8px 20px rgba(255,255,255,0.5), 8px 8px 20px rgba(0,0,0,0.12)'.
ملاحظة: neumorphism النقي له مشاكل إمكانية الوصول — ضعف التباين يجعل العناصر صعبة التمييز. التصاميم الحديثة تستخدمه باعتدال، غالباً مع ظلال تقليدية.
أسئلة شائعة
›هل يمكنني إضافة ظلال متعددة؟
CSS يدعم ظلالاً متعددة مفصولة بفواصل: 'box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)'. أداتنا تولّد ظلاً واحداً في كل مرة؛ اجمع الظلال المتعددة يدوياً.
›كيف أصنع تأثير neumorphic؟
اجمع ظلاً داكناً أسفل اليمين مع ظل فاتح أعلى اليسار، كلاهما داخلي أو كلاهما خارجي. مثال: '8px 8px 20px rgba(0,0,0,0.12), -8px -8px 20px rgba(255,255,255,0.7)'. إعداداتنا المسبقة تعرض النصف الداكن؛ أضف الظل الفاتح يدوياً.
›ما الفرق بين الضبابية والانتشار؟
الضبابية تُليّن حافة الظل (شفافية متدرجة). الانتشار يغيّر الحجم الإجمالي للظل (أكثر أو أقل من العنصر). blur=20 spread=0 هو توهج ناعم بحجم العنصر؛ blur=0 spread=20 هو ظل حاد أكبر بـ 20 بكسل.
›لماذا يبدو ظلي مسطحاً؟
على الأرجح شفافية منخفضة جداً، أو لا إزاحة، أو لون الظل قريب جداً من الخلفية. جرّب Y=8، blur=24، opacity=0.18 كنقطة بداية — هذه القيم تظهر بوضوح على معظم الخلفيات الفاتحة.
›هل يمكنني استخدامه لـ text-shadow؟
تقريباً — text-shadow يستخدم نفس الصيغة باستثناء 'spread' و'inset'. اضبطه يدوياً بعد النسخ: خذ 'X Y blur color' (احذف spread وinset).
›هل الظلال تؤثر على الأداء؟
box-shadow مُعجَّل بمعالج الرسوميات في المتصفحات الحديثة. ظلال كثيرة على عناصر كثيرة قد تُبطئ التمرير. ظل واحد على البطاقات والأزرار: لا قلق إطلاقاً.
›هل أستخدم الظلال أم الحدود؟
لكل منهما استخداماته. الحدود أحدّ وأفضل إمكانية وصول. الظلال تبدو أكثر نعومة وارتفاعاً. واجهات المستخدم الحديثة شبه المسطحة كثيراً ما تستخدم كليهما: حدّ رفيع للحدة + ظل ناعم للارتفاع.
›هل تغادر البيانات متصفحي؟
لا. جميع المعاينات وتوليد CSS يعملان محلياً؛ لا يُرسل شيء للخادم.
أدوات ذات صلة
آخر تحديث: