الظلال Shadows

نشرت من قبل administration_admin في

CSS Shadows

الظلال في CSS :

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

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

CSS Shadows

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

😌

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 توضح كيف شكل الظل قبل و بعد استخدام القاعدة 🙃

CSS Shadows
  • من المهم تقليل درجة شفافية اللون أفضل قيمة من أجل عمل ظل احترافي بين (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)

CSS Shadows

✴ ضبابية (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

CSS Shadows

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

😊

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

صانع المجد

صانع المجد 
GLORY MAKER
GLORY MAKER


0 تعليق

اترك تعليق

%d مدونون معجبون بهذه: