كيف يبدو استخدام الخاصية box-shadw في التصميم ؟

من الجيد أنك تستخدم المتغيرات vriables في CSS من خلال :root ، لكنك استخدمتها فقط من أجل الخط، عود نفسك على استخدامها فيمكنك كمثال إنشاء متغير للون الرئيسي وكمثال:

:root {
    font-family: Arial, Helvetica, sans-serif;
  --bg-clr: #eee
}
.parent {
    background-color: var(--bg-clr)
}

حيث يستخدم :root لتعريف الخصائص العامة المتعلقة بالمستند، والتي يمكن الوصول إليها من جميع العناصر في المستند. عند تعريف خصائص في :root، يمكن الاستفادة منها في جميع أنحاء المستند، مما يوفر الوقت والجهد في الكتابة والصيانة.

بالإضافة أيضًا إلى ما ذكره أسامة، يمكن تحسين تباعد العناصر في عنصر الـ parent بحيث تبدو العناصر أكثر اتساقًا وتتناسب بشكل أفضل.

علاوة على ذلك ، يمكنك تحسين مظهر خطوط الأوسط في العناصر النصية ، مثل الـ or ، لجعلها أكثر وضوحًا.

بالنسبة للألوان أنصحك باستخدام https://www.happyhues.co/ فستتعلم منها الكثير بالنسبة لاستخدام ألوان متناسقة ومريحة للعين، وستجد بالموقع لوحات ألوان جاهزة مع شرح كيف يتم استخدام كل لون داخل موقعك.

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

أما بخصوص الأكواد البرمجية فهي مرتبة ومفهومة بشكل جيد  ويمكن لأي مبرمج فهم الأكواد والتعديل عليها . 

مستواك في تطوير و هذا شئ جيد.

لدي تعليق واحد هو يخص الخاصية border-radius يجب أن تضع جميع البدائات حتي تعمل الخاصية في جميع المتصفحات.

بدلاً من:

border-radius: 50%;

قم بوضعها هكذا.

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;

يعتبر تطبيق جيد بالنسبة للمدة التي تعلمت بها css وبالنسبة للخاصية box-shadow  بالطبع ليست أفضل تطبيق لها ولكن المهم في هذه الفترة هو تعلم كيفية العمل بهذه الخاصية لذلك لا يهم التصميم حالياً إنما تجربة وإتقان الخواص الموجودة بال css 

لاحقاً يمكنك استخدام  box-shadow generator ليظهر المكون كما تريد من خلال هذه الخاصية وتساعدك هذه الخدمات في تسهيل تجربة ال box-shadow والحصول على أفضل قيمة له

ومن هذه المواقع 

• Box Shadows

• Box Shadow CSS Generator - CSSmatic

• Box Shadow CSS Generator