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