مولد ظل مربع CSS

خيارات
10px
10px
5px
0px
معاينة
كود

مولد ظل مربع CSS

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

يوفر عادةً CSS Box Shadow Generator واجهة سهلة الاستخدام حيث يمكنك ضبط المعلمات المختلفة لظل المربع بشكل تفاعلي، مثل:

  1. الإزاحة: المسافة التي يتم إزاحة الظل فيها من العنصر.
  2. نصف قطر التمويه: مقدار التمويه المطبق على الظل.
  3. نصف القطر المنتشر: حجم الظل. تعمل القيمة الموجبة على توسيع الظل، بينما تقوم القيمة السالبة بتقليصه.
  4. اللون: لون الظل.

تتضمن الأداة غالبًا معاينة مباشرة حتى تتمكن من رؤية مدى تأثير التغييرات التي يتم إجراؤها على المعلمات على مظهر ظل المربع في الوقت الفعلي.

بمجرد تخصيص الظل حسب رغبتك، توفر أداة المولد رمز CSS المقابل الذي يمكنك نسخه ولصقه في ورقة الأنماط الخاصة بك. فيما يلي مثال لما قد يبدو عليه كود CSS الذي تم إنشاؤه:

/* Example CSS for box shadow */ .element { box-shadow: 10px 10px 5px #888888; }

في هذا المثال:

  • 10px هي الإزاحة الأفقية.
  • 10px هي الإزاحة الرأسية.
  • 5px هو نصف قطر التمويه.
  • #888888 هو لون الظل.

يمكن أن يؤدي استخدام CSS Box Shadow Generator إلى توفير الوقت والجهد، خاصة عند تجربة تأثيرات الظل المختلفة. فهو يضمن أن التعليمات البرمجية التي تم إنشاؤها دقيقة ويمكن دمجها بسهولة في مشاريع تطوير الويب الخاصة بك.

مشاركة

أدوات شائعة

بحث
إعلانات
عدد المشاهدات

3488

2024 - 2025, في جميع أنحاء العالم

إعلانات
تقييم

وجدت خطأ أو لديك خاصية تريد أن تطلبها؟ قم بالتقاط صورة للشاشة وقم بالإبلاغ عن الخطأ على هذه الصفحة

إعلانات