مثال على الهيكل:

html
CopyEdit
<div class="popup-alert">تمت العملية بنجاح!div>

2. أنماط التنبيه الأساسية

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

css
CopyEdit
.popup-alert {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #4caf50;
  color: white;
  padding: 15px 25px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  font-family: Arial, sans-serif;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
}

3. إضافة الحركيات الأساسية (Fade In & Fade Out)

لإظهار التنبيه بسلاسة، يُستخدم تأثير التلاشي (fade in) عند ظهوره، وتأثير التلاشي أيضًا (fade out) عند اختفائه.

تعريف الحركيات في CSS:

css
CopyEdit
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

تطبيق الحركيات على التنبيه

css
CopyEdit
.popup-alert.show {
  animation: fadeIn 0.5s forwards;
  pointer-events: auto;
}

.popup-alert.hide {
  animation: fadeOut 0.5s forwards;
}

كيفية جعل التنبيه موقوتاً باستخدام CSS فقط

الهدف هو ظهور التنبيه ثم اختفاؤه تلقائيًا بعد فترة محددة، دون تدخل جافاسكريبت. هناك عدة طرق لتحقيق ذلك، وأحد أفضل الحلول هو استخدام خاصية animation-delay مع حركيات متسلسلة.

طريقة التنفيذ:

1. إنشاء حركية متسلسلة تبدأ بـ fadeIn، ثم تبقى ظاهرة لفترة زمنية معينة، ثم تنفذ fadeOut.

2. دمج الحركيات في animation واحدة باستخدام keyframes متقدمة.

مثال على حركية متسلسلة

css
CopyEdit
@keyframes popupAnimation {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

تطبيق الحركية على التنبيه مع مدة زمنية

css
CopyEdit
.popup-alert.show {
  animation: popupAnimation 4s forwards;
  pointer-events: auto;
}

في هذا المثال، تستمر الحركية لمدة 4 ثوانٍ، حيث تبدأ بالتلاشي الداخلي، تبقى ظاهرة لجزء كبير من الوقت، ثم تختفي بسلاسة.

التحكم في توقيت ظهور التنبيه

يمكن ضبط مدة ظهور التنبيه عبر تعديل مدة الحركية animation-duration وكذلك نسب ظهور واختفاء التنبيه داخل keyframes. هذه الميزة تعطي مرونة كبيرة لتلائم متطلبات التصميم والتجربة.

استخدام التأخيرات (Delay) لتسلسل التنبيهات

في حالات وجود عدة تنبيهات، يمكن استخدام خاصية animation-delay لإظهار التنبيهات بشكل متتابع وليس كلها مرة واحدة.

مثال:

css
CopyEdit
.popup-alert:nth-child(1) {
  animation-delay: 0s;
}

.popup-alert:nth-child(2) {
  animation-delay: 5s;
}

.popup-alert:nth-child(3) {
  animation-delay: 10s;
}

بهذه الطريقة، يظهر كل تنبيه بفاصل زمني مميز.

تأثيرات إضافية لجذب الانتباه

يمكن إضافة تأثيرات أخرى لجعل التنبيهات أكثر جاذبية مثل:

• حركة الاهتزاز (Shake Animation): تستخدم لتحذيرات مهمة.

• تكبير وتصغير (Scale Animation): تعطي انطباعاً بحركة نابضة.

• تأثير التلاشي مع الانزلاق (Slide & Fade): التنبيه يظهر ويختفي مع حركة انزلاق لطيفة.

مثال على حركة الاهتزاز:

css
CopyEdit
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}

.popup-alert.shake {
  animation: shake 0.5s;
}

دمج التنبيهات المنبثقة مع خاصية الـ CSS Variables لتخصيص الألوان

يمكن الاستفادة من متغيرات CSS لتسهيل تخصيص التنبيهات بحسب نوعها (نجاح، تحذير، خطأ).

css
CopyEdit
:root {
  --success-bg: #4caf50;
  --warning-bg: #ff9800;
  --error-bg: #f44336;
}

.popup-alert.success {
  background-color: var(--success-bg);
}

.popup-alert.warning {
  background-color: var(--warning-bg);
}

.popup-alert.error {
  background-color: var(--error-bg);
}

تنبيهات منبثقة قابلة للإغلاق باستخدام CSS فقط

يمكن إضافة زر إغلاق ضمن التنبيه، وتطبيق خاصية إخفاء التنبيه عند الضغط عليه باستخدام تقنيات CSS فقط كالـ checkbox hack.

مثال:

html
CopyEdit
<label class="popup-alert success" for="close-popup">
  تمت العملية بنجاح!
  <input type="checkbox" id="close-popup" hidden>
  <span class="close-btn">×span>
label>

css
CopyEdit
#close-popup:checked + .popup-alert {
  display: none;
}

لكن هذا الحل محدود، وأحيانًا يحتاج جافاسكريبت للتحكم الكامل.

مقارنة بين استخدام CSS فقط والجافاسكريبت

• CSS فقط:

  • سهولة التنفيذ.

  • تحميل أسرع.

  • محدودية التحكم والمرونة.

  • مناسب للتنبيهات البسيطة الموقوتة.

• الجافاسكريبت:

  • تحكم كامل في توقيت الظهور والإخفاء.

  • إمكانية التفاعل مع المستخدم.

  • مناسب للتنبيهات المعقدة والمتعددة.

تحديات التنبيهات المنبثقة باستخدام CSS فقط

1. عدم دعم الإغلاق اليدوي بسهولة: يحتاج تدخل جافاسكريبت عادة.

2. التزامن بين التنبيهات المتعددة معقد: خصوصاً عند وجود عدة تنبيهات تظهر في وقت واحد.

3. قيود في التحكم بالزمن الديناميكي: التوقيت ثابت ولا يمكن تغييره حسب الحالة.

4. صعوبات في التوافق مع بعض المتصفحات القديمة: خصوصاً مع بعض خصائص الحركيات.

أفضل الممارسات لتصميم التنبيهات المنبثقة باستخدام CSS

• اختيار مواضع غير معيقة في الشاشة.

• تحديد ألوان واضحة ومتناسقة مع الهوية البصرية.

• استخدام حركيات لطيفة وغير مزعجة.

• تحديد مدة عرض مناسبة (بين 3 إلى 5 ثواني عادة).

• التأكد من وضوح النصوص وسهولة قراءتها.

• اختبار الأداء على مختلف الأجهزة والمتصفحات.

جدول مقارنة بين خصائص الحركيات المستخدمة في التنبيهات المنبثقة

الخاتمة

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

المصادر والمراجع

1. MDN Web Docs – CSS Animations

2. CSS-Tricks – Creating a Popup Notification with CSS Animations