CSS Boxes di Notifica

Tempo lettura: 2 minuti, 10 secondi
Difficoltà: Principiante
Attenzione:
scritto tempo fa

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

errore: Messaggio di errore.
successo: Messaggio di successo.
pericolo: Messaggio di pericolo.
notizia: Messaggio 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 :-)

Ricevi le ultime novità

Condividi:

Circa l'autore

Giuseppe Alessandro De Blasio

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.

Commenti