الدرس الرابع: التنسيقات المتقدمة في CSS – اجعل صفحتك احترافية

الدرس الرابع: التنسيقات المتقدمة في CSS – اجعل صفحتك احترافية 🌟

العنوان:

إتقان التنسيقات المتقدمة – واجعل مواقعك تنبض بالحياة!

المقدمة:

بعد ما أضفنا لمسات جمالية باستخدام CSS، دلوقتي جاي الوقت ننتقل لمستوى جديد. في الدرس ده، هنتعلم التنسيقات المتقدمة اللي بتدي لصفحتك مظهر احترافي، زي التحكم في الأبعاد، الظلال، الحواف، وتأثيرات الحركة (Animations).

أهم خصائص CSS المتقدمة:

1. التحكم في الأبعاد (Dimensions):

تحديد العرض (Width) والطول (Height):
```
div {
  width: 200px;
  height: 150px;
  background-color: lightblue;
}
```
- العرض والطول ممكن تكون بوحدات مثل:
  - px (بكسل): وحدة قياس ثابتة.
  - % (نسبة مئوية): تعتمد على حجم العنصر الرئيسي.

2. الحواف (Borders):

إنشاء حواف للعناصر:
```
div {
  border: 2px solid black;
}
```
- أنواع الحواف:
  - solid: خط متصل.
  - dashed: خط متقطع.
  - dotted: نقاط.
- تحسين الحواف:
  - border-radius: يجعل الحواف مستديرة.
  - مثال:
```
div {
  border-radius: 10px;
}
```

3. الظلال (Box Shadows):

إضافة ظلال للعناصر:
```
box-shadow: 5px 5px 10px gray;
```
- التفسير:
  - 5px: المسافة الأفقية.
  - 5px: المسافة الرأسية.
  - 10px: مدى التشويش.
  - gray: لون الظل.

4. تأثيرات الانتقال (Transitions):

تجعل التغييرات على العناصر سلسة:
```
div {
  transition: all 0.5s ease;
}
div:hover {  background-color: lightgreen;
}
```
- التفسير:
  - all: تطبق التأثير على كل الخصائص.
  - 0.5s: المدة الزمنية.
  - ease: نوع التأثير (سلس).

5. الحاويات المرنة (Flexbox):

تنظيم العناصر بسهولة:
```
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```
- الخصائص المهمة:
  - justify-content: تحديد المحاذاة أفقياً.
  - align-items: تحديد المحاذاة رأسياً.

6. الشبكة (CSS Grid):

لتصميم تخطيطات متقدمة:
```
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}
```
- التفسير:
  - grid-template-columns: تحديد الأعمدة.
  - gap: المسافة بين العناصر.

7. الخلفيات المتقدمة:

خلفيات متدرجة (Gradients):


background: linear-gradient(to right, red, yellow);

خلفيات متعددة:


background: url('image1.jpg'), url('image2.jpg');

تطبيق عملي:

ملف HTML:


<!DOCTYPE html>
<html>
  <head>
    <title>Advanced CSS</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="card">
      <h2>مرحبًا بكم!</h2>
      <p>هذه صفحة بتنسيقات CSS متقدمة.</p>
    </div>
  </body>
</html>

ملف CSS:


body {
  font-family: Arial, sans-serif;
  background: linear-gradient(to right, #74ebd5, #acb6e5);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.card {  background-color: white;
  padding: 20px;
  border: 2px solid #ddd;
  border-radius: 15px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {  transform: scale(1.05);
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
}

النتيجة:

صفحة ببطاقة مركزية مميزة، تحتوي على ظل ناعم، وتأثير تكبير عند التمرير عليها.

أفكار للتطبيق العملي:

صمم بطاقة تعريفية عن نفسك.
أضف تأثيرات حركية لعناصر الصفحة عند التمرير.
جرب استخدام الشبكات (Grid) لتنسيق صفحتك.

وختامًا:

شفنا معًا إزاي CSS بتقدر تخلي صفحاتنا أكتر احترافية وجاذبية. في الدرس القادم، هنبدأ في التعرف على JavaScript، ونضيف التفاعل لموقعنا. استعد للمرحلة الجديدة! 🚀

تعديل المقال

WiseSyntax