مرحبًا بك في الدرس الرابع من سلسلة تعلم HTML وCSS! 🎉

في هذا الدرس، سنركز على تقنيات CSS المتقدمة التي ستتيح لك إنشاء تصميمات أكثر احترافية وديناميكية. سنتعلم كيفية استخدام Flexbox وGrid لإنشاء تخطيطات حديثة ومرنة، بالإضافة إلى الرسوم المتحركة (Animations) والظلال (Shadows).

1. مراجعة سريعة

في الدرس السابق، تعلمنا:

• كيفية تنسيق الصفحات باستخدام CSS.
• الألوان، الخطوط، الهوامش، الحاويات، والتصميم المتجاوب.

الآن، سننتقل إلى تقنيات أكثر تقدمًا مثل Flexbox وGrid، بالإضافة إلى تأثيرات بصرية مثل الرسوم المتحركة والظلال.

2. Flexbox: نظام التخطيط المرن

ما هو Flexbox؟

Flexbox هو نظام تخطيط يسمح لك بتوزيع العناصر بشكل مرن داخل حاوية أفقية أو عمودية. يتميز Flexbox بسهولة الاستخدام وإمكانية التحكم في ترتيب العناصر وتوزيع المساحات.

خصائص Flexbox الأساسية:

1. Container Properties (خصائص الحاوية):

   • display: flex;: تحويل الحاوية إلى نظام Flexbox.
   • flex-direction: تحديد اتجاه العناصر (row, column).
   • justify-content: توزيع العناصر أفقيًا (center, space-between, flex-start).
   • align-items: توزيع العناصر عموديًا (center, flex-start, flex-end).

2. Item Properties (خصائص العناصر):

   • flex-grow: تحديد مدى توسع العنصر.
   • flex-shrink: تحديد مدى انكماش العنصر.
   • flex-basis: تحديد حجم العنصر الأساسي.

مثال عملي:

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

.container {
display: flex;
flex-direction: row; /* ترتيب العناصر أفقيًا */
justify-content: space-around; /* توزيع العناصر بالتساوي */
align-items: center; /* توسيط العناصر عموديًا */
height: 200px;
border: 1px solid black;
}


.item {
background-color: lightblue;
padding: 20px;
margin: 5px;
border: 1px solid #333;
}

3. Grid: نظام التخطيط الشبكي

ما هو Grid؟

Grid هو نظام تخطيط آخر يتيح لك إنشاء تخطيطات معقدة باستخدام شبكة من الصفوف والأعمدة. يتميز Grid بأنه مناسب للتخطيطات ذات الأبعاد الثابتة أو المرنة.

خصائص Grid الأساسية:

1. Container Properties (خصائص الحاوية):

   • display: grid;: تحويل الحاوية إلى نظام Grid.
   • grid-template-columns: تحديد عدد الأعمدة وعرضها.
   • grid-template-rows: تحديد عدد الصفوف وارتفاعها.
   • gap: تحديد المسافة بين الصفوف والأعمدة.

2. Item Properties (خصائص العناصر):

   • grid-column: تحديد موقع العنصر ضمن الأعمدة.
   • grid-row: تحديد موقع العنصر ضمن الصفوف.

مثال عملي:

<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* عمودين بعرض متساوٍ */
grid-template-rows: auto; /* ارتفاع الصفوف تلقائي */
gap: 10px; /* المسافة بين العناصر */
border: 1px solid black;
}


.item {
background-color: lightcoral;
padding: 20px;
text-align: center;
border: 1px solid #333;
}

4. الرسوم المتحركة (Animations)

كيف تعمل الرسوم المتحركة؟

تستخدم الرسوم المتحركة لتغيير خصائص العنصر تدريجيًا على مدار فترة زمنية معينة.

خطوات إنشاء الرسوم المتحركة:

1. @keyframes : تعريف مراحل الحركة.
2. animation : تطبيق الحركة على العنصر.

مثال عملي:

/* تعريف الحركة */
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}


/* تطبيق الحركة */
.box {
width: 100px;
height: 100px;
background-color: lightgreen;
animation: slide-in 2s ease-in-out;
}

5. الظلال (Shadows)

أنواع الظلال:

1. Text Shadow : ظلال النصوص.
2. Box Shadow : ظلال العناصر.

مثال عملي:

/* ظلال النصوص */
h1 {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}


/* ظلال العناصر */
.box {
width: 100px;
height: 100px;
background-color: lightblue;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

6. تمرين عملي

حاول إنشاء صفحة HTML تحتوي على العناصر التالية:

1. تخطيط باستخدام Flexbox :

   • صفوف وأعمدة مرنة.
   • عناصر متوسطة أفقيًا وعموديًا.

2. تخطيط باستخدام Grid :

   • شبكة تحتوي على 3 أعمدة وصفين.
   • عناصر بمسافات متساوية.

3. رسوم متحركة :

   • صندوق يتحرك من اليسار إلى اليمين.

4. ظلال :

   • نصوص وعناصر بظلال جميلة.

7. ما التالي؟

في الدرس القادم، سنتعلم:

• كيفية إضافة تأثيرات تفاعلية باستخدام JavaScript .
• إنشاء زر "إظهار/إخفاء" للنصوص.
• إنشاء شريط تمرير ديناميكي.

📌 نصيحة: لا تتردد في تجربة الأكواد بنفسك وتعديلها لترى النتائج. الممارسة هي مفتاح الإتقان! 🚀