Notifica flottante

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 76 di 76.

Sfida

Facile

In questa sfida ricreerai una notifica fluttuante simile a quella mostrata nell'immagine qui sotto (o con un design simile). Questo è un esercizio di ripasso, quindi applicherai ciò che hai imparato sul posizionamento CSS per collocare correttamente la notifica e il relativo pulsante di chiusura.

Segui i passaggi seguenti per applicare uno stile alla notifica fluttuante:

1. Applica uno stile al riquadro della notifica:

Posizionalo vicino alla parte superiore della pagina, all'incirca al centro.
Imposta una larghezza fissa e aggiungi un po' di spazio interno.
Usa i colori che preferisci per lo sfondo, il testo e i bordi, così da creare uno stile di avviso ben distinguibile.
Aggiungi angoli arrotondati e una leggera ombra per farlo risaltare.

2. Applica uno stile al pulsante di chiusura:

Usa position: absolute per posizionare il pulsante di chiusura nell'angolo in alto a destra del contenitore della notifica.
Scegli uno sfondo e regola la dimensione del testo.
Assicurati che sembri cliccabile e risalti sullo sfondo.

💡 Sperimenta con colori, spaziatura e posizionamento per ottenere il design desiderato!

Provalo tu

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