مُنشئ ظلال المربع
مُنشئ ظلال CSS مجاني عبر الإنترنت. تصميم ظلال جميلة بصريًا مع معاينة حية، طبقات متعددة، وناتج CSS فوري.
تصميم ظلال CSS جميلة بصريًا مع معاينة حية.
نسخ ولصق في ورقة الأسلوب الخاصة بك.
box-shadow:
0px 4px 6px -1px rgba(0, 0, 0, 0.1);مولد الظلال المربعة المجاني عبر الإنترنت - مُنشئ الظلال المرئي
صمم ظلالًا مربعةً للـ CSS بشكل مرئي مع معاينة مباشرة. هذا المُنشئ المجاني للظلال المربعة يدعم طبقات متعددة، ومجموعات مسبقة، وظلال داخلية، ويولد كود CSS جاهزًا فورًا.
ما هو مُنشئ الظلال المربعة؟
مُنشئ الظلال المربعة هو أداة مرئية تساعد المُصممين والمطورين على إنشاء قيم CSS box-shadow دون كتابة القيم بالبكسل يدويًا. بدلًا من تخمين الأرقام وإعادة تحميل المتصفح، تُعدّل المُحددات وتراقب النتيجة في الوقت الفعلي.
الخاصية CSS box-shadow تضيف تأثيرات ظلال حول إطار العنصر. إنها واحدة من أكثر خصائص CSS شيوعًا لخلق عمق، ارتفاع، وierarchy بصري في واجهات الويب الحديثة.
كيفية استخدام هذا مُنشئ الظلال المربعة
- اختر نموذجًا مسبقًا — ابدأ مع ظل خفيف، متوسط، أو قوي، أو ابدأ من الصفر.
- عدّل المُحددات — التحكم في الاتجاه الأفقي، الاتجاه الرأسي، البُهتان، التوسع، اللون، والشفافية.
- تبديل الظل الداخلي — تبديل بين ظل خارجي وظل داخلي.
- أضف طبقات — تراكم ظلال متعددة لإنشاء تأثيرات معقدة.
- تخصيص المعاينة — تغيير لون الخلفية ولون العنصر لتتناسب مع التصميم.
- نسخ الكود CSS — اضغط على زر النسخ والصق الكود في ملف stylesheet الخاص بك.
الميزات الرئيسية
| الميزة | الفائدة |
|---|---|
| مُعاينة حية | رؤية التغييرات فورًا أثناء تعديل المُحددات |
| 6 نماذج مسبقة | البدء السريع مع أوضاع ظلال شائعة |
| طبقات متعددة | تراكم الظلال لإنشاء تأثيرات معقدة وواقعية |
| دعم الظلال الداخلية | إنشاء ظلال داخلية لعناصر مغروقة |
| مُحدد الألوان | التحكم الكامل في لون الظل |
| تحكم في الشفافية | تحسين شفافية الظل بدقة |
| نسخ إلى الحافظة | تصدير الكود CSS بضغطة واحدة |
فهم خاصية الظل المربع في CSS
السينتاس
تتبع خاصية box-shadow في CSS هذا السينتاس:
box-shadow: [inset] offsetX offsetY blur spread color;
| القيمة | الوصف | المثال |
|---|---|---|
| inset | (اختياري) يجعل الظل داخليًا | inset |
| offsetX | الاتجاه الأفقي — إيجابي = يمين، سلبي = يسار | 4px |
| offsetY | الاتجاه الرأسي — إيجابي = أسفل، سلبي = أعلاه | 4px |
| blur | نصف قطر البُهتان — الأعلى = ظل أكثر نعومة | 12px |
| spread | توسع الحجم — إيجابي = أكبر، سلبي = أصغر | 0px |
| color | لون الظل مع الشفافية | rgba(0,0,0,0.1) |
ظلال متعددة
يمكنك تراكم ظلال متعددة من خلال فصلها بفواصل:
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.1),
0 10px 20px rgba(0, 0, 0, 0.05);
هذا ينشئ ظلًا مزدوجًا: ظل ضيق وداكن بالقرب من العنصر، وظل ناعم وفاتح يمتد أبعد — مما ينتج تأثير عمق أكثر واقعية.
مقارنة أنماط الظل
| النمط | CSS | حالة الاستخدام |
|---|---|---|
| خفيف | 0 1px 3px rgba(0,0,0,0.08) |
البطاقات، عناصر القائمة |
| متوسط | 0 4px 6px rgba(0,0,0,0.1) |
الأزرار، النوافذ المنبثقة |
| قوي | 0 10px 15px rgba(0,0,0,0.15) |
النوافذ الحوارية، الأبواب المُنبثقة |
| متوهج | 0 0 20px rgba(59,130,246,0.4) |
حالات التركيز، CTAs |
| داخلي | inset 0 2px 4px rgba(0,0,0,0.1) |
المدخلات، الأماكن المائية |
| صلب | 4px 4px 0 rgba(0,0,0,0.25) |
واجهات بسيطة/مجردة |
حالات الاستخدام في الواقع
ارتفاع تصميم ماتريال
يستخدم تصميم ماتريال الظلال لتحديد مستويات الارتفاع. بطاقة مستوى 1 تستخدم 0 1px 3px rgba(0,0,0,0.12)، بينما نافذة حوار مستوى 4 تستخدم 0 12px 17px rgba(0,0,0,0.14).
تأثيرات التحويم
加深 الظل على التحويم لإنشاء تأثير "رفع":
.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.15); }
حالات التركيز
استخدم متوهجًا ملونًا لمؤشرات التركيز القابلة للوصول:
input:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.5); }
نيومورفيسم
دمج الظل الداخلي والخارجي معًا مع لون موحد لإنشاء تأثير نيومورفيسم.
نصائح لتحسين الظلال
| النصيحة | التفسير |
|---|---|
| احتفظ بالبُهتان معتدلًا | تجنب الظلال التي تبدو مفرطة في النعومة |
| استخدم لون الظل المناسب | تأكد من توافق لون الظل مع تصميم العرض |
| تجنب التوسع المفرط | تجنب توسع الظل الذي يلغي هوية العنصر |
| استخدم الظلال الداخية بحكمة | استخدم الظلال الداخية لتعزيز العمق بدلاً من إغفاله |
| تحقق من التوافق عبر الأجهزة | تأكد من أن الظلال تظهر بشكل متسق على جميع الأجهزة |
| تجنب الظلال المفرطة | تجنب استخدام طبقات متعددة من الظلال دون سبب |
الأسئلة الشائعة
ما الفرق بين box-shadow و drop-shadow؟
box-shadow هو خاصية CSS مخصصة للعناصر المربعة، بينما drop-shadow هي خاصية تُستخدم في SVG وتعمل بشكل مختلف.
هل يمكنني استخدام مُنشئ الظلال هذا في مشاريعي؟
نعم، يمكنك استخدامه مجانًا في جميع مشاريعك.
هل يتم دعم جميع المتصفحات؟
نعم، يتم دعم جميع المتصفحات الحديثة، بما في ذلك Chrome، Firefox، Safari، وEdge.
هل يمكنني تخصيص الألوان؟
نعم، يمكنك تخصيص الألوان من خلال المُحددات في الأدوات.
هل يمكنني تصدير الكود؟
نعم، يمكنك تصدير الكود CSS بضغطة واحدة من خلال زر النسخ.