الظلال Shadows

CSS Shadows

الظلال في CSS :

الظلال هي من أهم الأمور التي يجب التركيز عليها عند تصميم واجهة المستخدم ui و عند برمجه صفحات الويب front end.

في هذا البوست أشارك معكم طريقة سهله و احترافية لعمل ظل shadow مثل المحترفين 👨🏻‍💻

من أجل تصميم ظل احترافي يجب التركيز على ثلاث نقاط أساسية:

box-shadow: 5px 5px 8px rgba(0,0,0,8);

box-shadow: 0 8px 20px rgba(0,0,0,1);

✴ مكان الظل:

يتم تعديل اتجاه الظل عمودي و أفقي حسب الحاجة, في أغلب الوقت استخدم القيم التالية : (عمودي 8px , أفقي 0px) يفي بالغرض 😇

الصورة رقم 2 توضح كيف شكل الظل قبل و بعد استخدام القاعدة 🙃

• من المهم تقليل درجة شفافية اللون أفضل قيمة من أجل عمل ظل احترافي بين (10% – 30%)
• قم برفع قيمة الضبابية Blur بين (40px – 16px)

box-shadow: 0 10px 10px black;

box-shadow: 0 8px 24px rgba(0,0,0,15);

✴ درجه شفافية اللون:

من المهم التعديل على درجة الشفافية أفضل قيم بين (%10 – %30)

✴ ضبابية (blur) الظل:

يفضل استخدام قيمه بين (40px – 16px)

box-shadow: 5px 5px 8px rgba(0,0,0,8);

box-shadow: 5px 5px 8px rgba(0,0,0,8);

مثال أخير يقارن عندما تستخدم القواعد (التي ذكرتها فوق) و بدون استخدام القواعد الصورة رقم 3 و 4

في النهاية حدد ما تريد بناءً على عملك

box-shadow: 0 8px 20px rgba(0,0,0,1);

box-shadow: 0 8px 20px rgba(0,0,0,1);

نقلاً عن الأخ المبدع :

Naif Sameer

صانع المجد