تعلّم خاصية box-shadow في CSS عبر تصميم زر أنيق واحترافي

مقدمة: لماذا تستحق خاصية box-shadow اهتمامك؟

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

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

فهرس المحتوى

• لماذا نستخدم خاصية box-shadow في CSS؟
• صيغة كتابة خاصية box-shadow
• تجهيز المشروع وبناء الزر
• شرح offset-x وoffset-y
• شرح blur-radius وspread-radius
• تطبيق ظل احترافي على زر
• ما وظيفة inset في box-shadow؟
• موارد إضافية

لماذا نستخدم خاصية box-shadow في CSS؟

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

على سبيل المثال، يمكن لزر عادي بدون ظل أن يبدو مسطحاً وبلا شخصية، بينما يبدو الزر نفسه مع ظل مدروس أكثر جاذبية ويعكس اهتماماً بالتفاصيل.

انظر إلى الفرق بين الزرين التاليين:

الزر الثاني يبدو أكثر ديناميكية وواقعية بفضل ما يُعرف باسم تأثير الظل الخارجي أو drop shadow.

تجهيز المشروع: إنشاء زر بسيط للتجربة

هيكل HTML

ابدأ بإضافة العنصر التالي داخل الصفحة:

<div class="box-1">A Button</div>

إعادة ضبط التنسيق الافتراضي في CSS

يُفضل أولاً إزالة بعض الإعدادات الافتراضية للمتصفح حتى تحصل على نتيجة أكثر استقراراً:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: sans-serif;
}

تصميم الزر الأساسي

الآن أنشئ زرّاً بسيطاً بالمواصفات التالية:

.box-1 {
  margin: 100px 0 0 100px;
  height: 80px;
  width: 200px;
  border: 2px solid black;
  border-radius: 8px;
  font-size: 40px;
  display: grid;
  place-content: center;
}

بهذا أصبح لدينا زر جاهز لتطبيق تأثيرات الظلال عليه.

صيغة كتابة خاصية box-shadow

تُكتب الخاصية بالشكل التالي:

box-shadow: offset-x offset-y blur-radius spread-radius color;

وتتكوّن من القيم التالية:

• offset-x: لتحريك الظل أفقياً يميناً أو يساراً.
• offset-y: لتحريك الظل عمودياً أعلى أو أسفل.
• blur-radius: لتنعيم الظل وزيادة درجة ضبابيته.
• spread-radius: لزيادة انتشار الظل أو تقليصه.
• color: لتحديد لون الظل.

شرح offset-x: تحريك الظل أفقياً

تُستخدم قيمة offset-x لتحريك الظل على المحور الأفقي. إذا كانت القيمة موجبة، يتحرك الظل نحو اليمين. وإذا كانت سالبة، ينتقل نحو اليسار.

/* offset-x | offset-y | color */
.box-1 {
  box-shadow: -50px 0px rgba(0, 0, 0, 0.5);
}

/* أو */
.box-1 {
  box-shadow: 50px 0px rgba(0, 0, 0, 0.5);
}

شرح offset-y: تحريك الظل عمودياً

تتحكم قيمة offset-y في حركة الظل على المحور العمودي. القيم الموجبة تدفع الظل إلى الأسفل، والقيم السالبة ترفعه إلى الأعلى.

/* offset-x | offset-y | color */
.box-1 {
  box-shadow: 0px -50px rgba(0, 0, 0, 0.5);
}

/* أو */
.box-1 {
  box-shadow: 0px 50px rgba(0, 0, 0, 0.5);
}

دمج offset-x وoffset-y معاً

عند استخدام القيمتين معاً، يمكنك تحديد موضع الظل بدقة أكبر، وهو ما يمنحك نتائج أقرب إلى التأثيرات الواقعية.

.box-1 {
  box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
}

بهذا سيظهر الظل إلى يمين الزر وأسفله.

شرح blur-radius: تنعيم الظل وإضفاء واقعية أكبر

تحدد قيمة blur-radius مدى ضبابية الظل. كلما زادت القيمة، أصبح الظل أكثر نعومة وانتشاراً، ما يجعل العنصر يبدو أقل حدة وأكثر أناقة.

/* offset-x | offset-y | blur-radius | color */
.box-1 {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

تجربة هذه القيمة بمرونة ستساعدك على الوصول إلى الشكل المناسب حسب نوع الواجهة التي تصممها.

شرح spread-radius: توسيع مساحة الظل

تُستخدم قيمة spread-radius لجعل الظل أكثر اتساعاً حول العنصر. وهي مفيدة عندما تريد إبراز الزر أو إنشاء تأثير يقترب من التوهج.

/* offset-x | offset-y | blur-radius | spread-radius | color */
.box-1 {
  box-shadow: 0 0 0 50px rgba(0, 0, 0, 0.5);
}

كيفية إضافة ظل احترافي إلى زر

بعد فهم القيم الأساسية، يمكننا الآن دمجها لإنشاء تأثير ظل متوازن يمنح الزر مظهراً عصرياً وجذاباً:

.box-1 {
  box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
}

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

• إزاحة أفقية مقدارها 8px.
• إزاحة عمودية مقدارها 10px.
• تمويهاً بقيمة 10px.
• انتشاراً خفيفاً بقيمة 1px.
• لون ظل شبه شفاف باستخدام rgba().

ما وظيفة inset في خاصية box-shadow؟

الكلمة المفتاحية inset تغير سلوك الظل من ظل خارجي إلى ظل داخلي. أي أن التأثير يظهر داخل حدود العنصر بدلاً من خارجه، وهو أسلوب مفيد في تصميم الأزرار الغائرة أو الحقول الداخلية.

.box-1 {
  box-shadow: inset 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
}

متى تستخدم inset؟

• عند إنشاء أزرار ذات مظهر مضغوط أو غائر.
• عند تصميم حقول إدخال تبدو مدمجة داخل الخلفية.
• عند تنفيذ تأثيرات بصرية دقيقة دون إضافة عناصر إضافية.

موارد إضافية لتطوير مهاراتك

• GetCssScan: للحصول على ظلال جاهزة يمكن الاستفادة منها أو تعديلها.
• keyframes.app: لتجربة القيم واختبارها بشكل مباشر.
• flatuicolors: للوصول إلى لوحات ألوان جميلة ومتناسقة.

نصائح عملية لاستخدام box-shadow باحتراف

1. لا تُبالغ في شدة الظل، لأن الظلال القوية قد تجعل التصميم يبدو قديماً أو غير مريح بصرياً.
2. استخدم ألوان ظل شبه شفافة مثل rgba() للحصول على نتيجة طبيعية.
3. راعِ اتساق مصدر الإضاءة في جميع عناصر الصفحة.
4. اختبر الظلال على الهاتف وسطح المكتب للتأكد من وضوحها في مختلف الشاشات.
5. اجعل الظل خادماً لتجربة المستخدم، لا مجرد مؤثر بصري زائد.

الخلاصة التقنية

تُعتبر خاصية box-shadow من الأدوات الأساسية في تصميم الواجهات الحديثة، لأنها تضيف عمقاً بصرياً وتساعد على إبراز العناصر المهمة دون تعقيد. وعند فهم القيم مثل offset-x وoffset-y وblur-radius وspread-radius، يصبح من السهل بناء أزرار ومكونات تبدو أكثر احترافية. من الناحية التقنية، أفضل استخدام لهذه الخاصية هو الاستخدام المعتدل والمتناسق مع هوية التصميم، لأن الجودة هنا لا تعتمد على كثرة التأثير، بل على دقته وملاءمته للسياق.