Notification flottante

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 76 sur 76.

Défi

Facile

Dans ce défi, vous allez recréer une notification flottante qui ressemble à l’image ci-dessous (ou à un design similaire). Il s’agit d’un exercice récapitulatif : vous appliquerez donc ce que vous avez appris sur le positionnement en CSS afin de placer correctement la notification et son bouton de fermeture.

Suivez les étapes ci-dessous pour styliser la notification flottante :

1. Stylisez la boîte de notification :

Placez-la près du haut de la page, approximativement au milieu.
Définissez une largeur fixe et ajoutez un peu d’espace intérieur.
Utilisez les couleurs de votre choix pour l’arrière-plan, la police et les bordures afin de créer un style d’alerte distinct.
Ajoutez des coins arrondis et une légère ombre pour la faire ressortir.

2. Stylisez le bouton de fermeture :

Utilisez position: absolute pour placer le bouton de fermeture dans le coin supérieur droit du conteneur de notification.
Choisissez un arrière-plan et ajustez la taille de la police.
Assurez-vous qu’il semble cliquable et qu’il se distingue de l’arrière-plan.

💡 Expérimentez avec les couleurs, l’espacement et le positionnement pour obtenir le design souhaité !

Essayez vous-même

<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>