الظلال Shadows
CSS Shadows
الظلال في CSS :
الظلال هي من أهم الأمور التي يجب التركيز عليها عند تصميم واجهة المستخدم ui و عند برمجه صفحات الويب front end.
في هذا البوست أشارك معكم طريقة سهله و احترافية لعمل ظل shadow مثل المحترفين 👨🏻💻

من أجل تصميم ظل احترافي يجب التركيز على ثلاث نقاط أساسية:
😌
Basic box with shadow
box-shadow: 5px 5px 8px rgba(0,0,0,8);
😊
Nice box with shadow
box-shadow: 0 8px 20px rgba(0,0,0,1);
✴ مكان الظل:
يتم تعديل اتجاه الظل عمودي و أفقي حسب الحاجة, في أغلب الوقت استخدم القيم التالية : (عمودي 8px , أفقي 0px) يفي بالغرض 😇
الصورة رقم 2 توضح كيف شكل الظل قبل و بعد استخدام القاعدة 🙃

- من المهم تقليل درجة شفافية اللون أفضل قيمة من أجل عمل ظل احترافي بين (10% – 30%)
- قم برفع قيمة الضبابية Blur بين (40px – 16px)
😌
Basic box with shadow
box-shadow: 0 10px 10px black;
😊
Nice box with shadow
box-shadow: 0 8px 24px rgba(0,0,0,15);
✴ درجه شفافية اللون:
من المهم التعديل على درجة الشفافية أفضل قيم بين (%10 – %30)

✴ ضبابية (blur) الظل:
يفضل استخدام قيمه بين (40px – 16px)
😌
Basic box with shadow
box-shadow: 5px 5px 8px rgba(0,0,0,8);
😌
Basic box with shadow
box-shadow: 5px 5px 8px rgba(0,0,0,8);
مثال أخير يقارن عندما تستخدم القواعد (التي ذكرتها فوق) و بدون استخدام القواعد الصورة رقم 3 و 4

في النهاية حدد ما تريد بناءً على عملك
😊
Nice box with shadow
box-shadow: 0 8px 20px rgba(0,0,0,1);
😊
Nice box with shadow
box-shadow: 0 8px 20px rgba(0,0,0,1);
نقلاً عن الأخ المبدع :
Naif Sameer
صانع المجد

0 تعليق