تعد CSS (أوراق الأنماط المتتالية) واحدة من أكثر التقنيات شيوعًا في تصميم الويب، مما يسمح للمطورين بإنشاء تصميمات مرئية وسريعة الاستجابة. باعتبارك مطور ويب، يعد إتقان CSS أمرًا بالغ الأهمية لإضفاء الحيوية على رؤية التصميم الخاصة بك وضمان تجربة مستخدم جيدة عبر جميع الأجهزة. إليك بعض النصائح التي قد لا تعرفها في CSS:

1. نيومورفسيم:

يشير مصطلح Neumorphsime إلى تصميم واجهة المستخدم الناعمة، وهو اتجاه تصميم شائع يجمع بين التصميم المسطح والتصميم المسطح. يستخدم هذا النمط الظلال والإبرازات لإنشاء مظهر سلس. وإليك كيفية العمل:

أولاً، نقوم بإنشاء خلفية دقيقة: للبدء بـ Neumotphsime، اختر لون خلفية ناعم مثل الرمادي الفاتح،

body {
  background-color: #eee;
  display: grid;
  place-content: center;
  height: 100vh;
}

ثم نقوم بإنشاء عنصر بهذه الأنماط

.element {
  height: 100px;
  width: 100px;
  transition: all 0.2s linear;
  border-radius: 16px;
}

أخيرًا، نضيف ظلًا مربعًا إلى العنصر عند المرور فوقه

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px white;
}

حتى نحصل على هذا المظهر الجميل

ويمكنك القيام بذلك أيضًا

فقط أضف ملحقًا إلى ظل المربع مثل هذا

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white inset;
}

2. الحد الأدنى () والحد الأقصى () والمشبك ():

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

تتيح لك الدالة min() تعيين أصغر قيمة من القائمة هنا كيف

قبل

.container {
  width:800px;
  max-width:90%;
}

بعد

.container{
  width: min(800px,90%);
}

تعمل الدالة max() بنفس وظيفة الدالة min() ولكنها تأخذ القيمة الأكبر من القائمة، وإليك الطريقة:

.container{
  width: max(800px,90%);
}

في بعض الأحيان تقوم بتعيين العرض والحد الأدنى والحد الأقصى للعرض في حاوية واحدة، وهناك وظيفة أخرى تسمى المشبك () هنا كيف تعمل

قبل

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

بعد

.container {
  width: clamp(400px,50vw,800px);
}

3. محدد :Has() و :Not():

يمثل المحدد :not() العناصر التي لا تتطابق مع قائمة المحددات

.container:not(:first-child) {
  background-color: blue;
}

يمثل المحدد :has() عنصرًا في حالة تطابق أي من المحددات النسبية التي تم تمريرها إليها كوسيطة

.container:has(svg) {
  padding: 20px;
}

4. تدرج النص:

لهذه الخدعة، لا يمكننا إضافة تدرج لوني للون النص مباشرة مثل هذا

.text{
  color: linear-gradient(to right, red,blue);
}

ما نفعله بدلاً من ذلك

.text{
  background: linear-gradient(to right, red,blue);
  background-clip:text;
  color:transparent;
}

وفويلا حصلنا على هذا التأثير الرائع

خاتمة:

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

يمكنك التحقق من المزيد في: https://designobit.com/