🌟 مقدمة تحفيزية:

“أهلاً بك يا مبدع ! هل لاحظت في المواقع العالمية أن الأزرار ‘تتفاعل’ معك ؟ يتغير لونها أو تكبر قليلاً بمجرد أن تضع الفأرة عليها ؟ هذا التفاعل هو ما يعطي الزائر شعوراً بأن الموقع حيّ وذكي .

اليوم في ‘أكاديمية قياوي’ ، سنتعلم كيف نجعل أزرارنا ‘تتحدث’ مع الزوار . سنضيف لمسة جمالية تجعل تجربة التعلم في أكاديميتنا ممتعة واحترافية !”

🏗️ 1. المفهوم البرمجي (الحالة الافتراضية والحالة التفاعلية)

في CSS ، نستخدم أداة تسمى Pseudo-class، وأشهرها هي :hover .

•     الحالة العادية : كيف يظهر الزر عند فتح الصفحة .

•       حالة الـ Hover: كيف يتغير الزر عندما تمر الفأرة فوقه .

💻 2. التطبيق العملي (اجعل أزرارك تنبض بالحياة)

تذكر أزرارنا في الدرس السابق؟ لنضف إليها “تأثير الحركة”. انسخ هذا الكود في ملف الـ CSS :

/* الزر في حالته العادية */
                          { btn-academy .
    background-color: #2c3e50;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    transition: 0.3s; /* هذا هو سر النعومة في الحركة */
    cursor: pointer;
}

/* الزر عندما تمر الفأرة فوقه (Hover) */
                                      }btn-academy:hover.
    background-color: #e67e22; /* يتغير اللون للبرتقالي الجذاب */
    transform: scale(1.1);    /* يكبر حجم الزر بنسبة 10% */
    box-shadow: 0px 5px 15px rgba(0,0,0,0.3); /* إضافة ظل خفيف */
{

💡 لماذا نستخدم transition؟

هذا السطر الصغير transition : 0.3s ; هو الفرق بين المبرمج الهاوي والمحترف . بدونه ، سيتغير اللون فجأة بشكل مزعج . معه ، سيتغير اللون بنعومة وانسيابية مريحة للعين .

🎯 تحدي المصمم التفاعلي : “الآن حان دورك! اذهب إلى ملفك ، وأضف خاصية :hover لزر الاستشارات القانونية law-btn . اجعله يتغير من اللون الذهبي إلى اللون الأبيض ، واجعل النص بداخله يصبح أسود عند مرور الفأرة . هل شعرت بالفرق في شكل موقعك ؟”

🚀 ماذا ننتظر في الدرس القادم؟ أنت الآن تتحكم في الألوان والحركات . لكن.. كيف نوزع هذه الأزرار بشكل مرتب؟ واحد يميناً وواحد يساراً أو في منتصف الصفحة؟ موعدنا في الدرس الرابع: فن التوزيع (Flexbox)، حيث ستتعلم كيف ترتب عناصر موقعك كالمحترفين !

📌 ما هو Hover ؟
Hover هو ملي الزائر يدوز الفأرة (Mouse) فوق عنصر فالموقع (زر، صورة، نص…)
وكيوقع تغيير فالشكل ديالو .

مثال :  زر يتبدل لونو  ،  صورة تكبر شوية  ،  نص يتغير لونه  ،  عنصر يتحرك حركة خفيفة  .

🎯  هاد الشي كيخلي الموقع احترافي .

🎨 1️⃣ تغيير لون زر عند المرور عليه  :

html

<button class="btn">اضغط هنا</button>

Css

.btn {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
transition: 0.3s;
}

.btn:hover {
background-color: green;
}

🔎 هنا استعملنا :

:hover

و transition باش تكون الحركة ناعمة .

🖼 2️⃣ تكبير صورة عند Hover

<img src="image.jpg" class="photo">

.photo {
  width: 300px;
  transition: 0.4s;
}

.photo:hover {
  transform: scale(1.1);
}

📌 scale(1.1) يعني تكبر 10%

✨ 3️⃣ إضافة ظل (Shadow) عند المرور

.card {
  width: 250px;
  padding: 20px;
  background: #f2f2f2;
  transition: 0.3s;
}

.card:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

🚀 4️⃣ تحريك العنصر قليلاً

.box {
  transition: 0.3s;
}

.box:hover {
  transform: translateY(-5px);
}

📌 العنصر كيطلع شوية للفوق عند المرور عليه .