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.