إشعار عائم

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 76 من 76.

التحدي

سهل

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

اتبع الخطوات أدناه لتنسيق الإشعار العائم:

1. تنسيق مربع الإشعار (notification):

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

2. تنسيق زر الإغلاق (close button):

استخدم position: absolute لوضع زر الإغلاق في الزاوية العلوية اليمنى لحاوية الإشعار.
اختر خلفية واضبط حجم الخط (font size).
تأكد من أنه يبدو قابلاً للنقر ويبرز عن الخلفية.

💡 جرب الألوان والتباعد والتموضع لتحقيق التصميم المطلوب!

جرّب بنفسك

<html>
    <head>
        <title>Floating Notification</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="notification">
        <button class="close-btn">&times;</button>
        <p>This is a floating notification! Click the "X" to close.</p>
    </div>
    </body>
</html>