CSS Boxes di Notifica
Oggi vorrei mostrarvi come è possibile creare dei boxes di Notifica tramite l’utilizzo del CSS e del HTML.
Vedremo come creare i seguenti box:
1. Box Errore 2. Box Successo 3. Box Pericolo 4. Box Notizia
1° Fase
Per prima cosa creiamo il layout per ogni box
.box-not { color:#555; border-radius:10px; font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px; padding:10px 10px 10px 36px; margin:10px; }
Diamo un’occhiata ad ogni riga: color:#555; – Questo codice è utilizzato per il colore del testo. border-radius:10px; – Applichiamo un raggio di 10px al bordo del box font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px; – E ‘il nome del font che useremo. padding:10px 10px 10px 36px; – E’ lo spazio che diamo all’interno del box, 10px per sopra, destro e inferiore, 36px per la sinistra. margin:10px; – Il margine intorno alla box sarà 10px
2° Fase
Ora diamo alla proprietà span un aspetto personalizzato per ogni singolo box.
.box-not span { font-weight:bold; text-transform:uppercase; }
Diamo un’occhiata ad ogni riga: font-weight:bold; – Tutto il testo all’interno della proprietà “span” sarà in grassetto. text-transform:uppercase; – Questo codice trasformerà il testo in lettere maiuscole.
3° Fase
In questa fase aggiungiamo un po ‘di colore ed icone ad ogni box.
.errore { background:#ffecec url('immagini/errore.png') no-repeat 10px 50%; border:1px solid #f5aca6; } .successo { background:#e9ffd9 url('immagini/successo.png') no-repeat 10px 50%; border:1px solid #a6ca8a; } .pericolo { background:#fff8c4 url('immagini/pericolo.png') no-repeat 10px 50%; border:1px solid #f2c779; } .notizia { background:#e3f7fc url('immagini/notizia.png') no-repeat 10px 50%; border:1px solid #8ed9f6; }
Diamo un’occhiata ad ogni riga: background:… – Specifica il colore di sfondo e l’icona utilizzata per l’avviso border:… – Specifica la larghezza del bordo, lo stile e il colore
4° Fase
Infine abbiamo bisogno di un po ‘di codice HTML per visualizzare le caselle di avviso.
<div class="box-not errore"><span>errore: </span>Messaggio di errore.</div> <div class="box-not successo"><span>successo: </span>Messaggio di successo.</div> <div class="box-not pericolo"><span>pericolo: </span>Messaggio di pericolo.</div> <div class="box-not notizia"><span>notizia: </span>Messaggio notizia.</div>
Spero che tutto ciò possa ritornarvi utile 🙂
Per chi è registrato può scaricare il codice direttamente in formato zip.

Salve il mio nome come avrete notato e Giueppe Alessandro De Blasio e questo è il mio blog, tutto nasce dalla passione per la tecnologia e per il web in generale, ed oggi lo utilizzo come mezzo di condivisione. Spero che la vostra permanenza sul mio blog vi sia utile e che decidiate di diventare miei affezionati lettori.
Restiamo in contatto
Ricevi gli ultimi articoli o offerte speciali sugli ultimi sviluppi ...
Se ti iscrivi alla Newsletter per te tantissimi vantaggi!
Se ti iscrivi alla Newsletter per te tantissimi vantaggi!