لافتات الإشعارات

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 24 من 35.

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

رسائل النجاح – على سبيل المثال، “تم تحديث ملفك الشخصي بنجاح.”
رسائل الخطأ – على سبيل المثال، “حدث خطأ ما، يرجى المحاولة مرة أخرى.”
تنبيهات المعلومات – على سبيل المثال، “لقد قمنا بتحديث سياسة الخصوصية الخاصة بنا.”

لنقم بإنشاء شريط إشعارات بسيط. ابدأ بحاوية أساسية:

<div class="notification">
  This is a notification message!
</div>

أضف بعض التنسيقات لجعله يبرز:

.notification {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

يؤدي هذا إلى إنشاء لافتة إشعار خضراء بنص أبيض.

التحدي

سهل

لقد تم تزويدك بكود HTML لراية إشعار (notification banner). مهمتك هي تنسيقها لتبدو كرسالة نجاح حقيقية.

مهمتك:

ضع الأيقونة والنص بجانب بعضهما البعض باستخدام display: flex و align-items: center.
أضف padding داخل الراية لجعلها أكثر قابلية للقراءة.
امنح الراية خلفية خضراء (#4CAF50) واجعل النص باللون الأبيض، بما أنه إشعار نجاح.
قم بتدوير الزوايا.
أضف box shadow لتعطي الراية بعض العمق.
أضف مسافة بين الأيقونة والنص باستخدام margin-right.
اجعل الأيقونة أكبر قليلاً باستخدام font-size: 18px.

الهدف: يجب أن تبدو الراية الخاصة بك كرسالة نجاح نظيفة مع أيقونة علامة الصح على اليسار والنص على اليمين.

ورقة مرجعية

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

أنشئ لافتة إشعار أساسية:

<div class="notification">
  This is a notification message!
</div>

قم بتنسيق لافتة الإشعار:

.notification {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

بالنسبة للافتات التي تحتوي على أيقونات، استخدم flexbox لمحاذاة المحتوى:

.notification {
  display: flex;
  align-items: center;
}

أضف عمقاً باستخدام ظل الصندوق (box shadow) والتباعد بين العناصر:

.notification {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.notification .icon {
  margin-right: 10px;
  font-size: 18px;
}

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Notification Banners</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    
    .notification {
    
    }
    
    .notification_icon {
        
    }
  </style>
</head>
<body>
  <div class="notification notification--success">
    <span class="notification_icon">✓</span>
    <div class="notification_message">Your changes have been saved successfully!</div>
  </div>
</body>
</html>