Corsi on-line

CSS: notifica messaggi non letti in stile Facebook

Chi frequenta il social network più grande della Rete ha visto spesso comparire in corrispondenza di alcune voci di menù un piccolo “badge” rosso circolare contenente un numero, quest’ultimo viene utilizzato per notificare la presenza di richieste di amicizia alle quale non si ha ancora risposto, l’arrivo di messaggi da visualizzare o l’inserimento di contenuti di nostro interesse da parte degli altri contatti. Riprodurre questo sistema tramite CSS non è particolarmente complesso, e la procedura necessaria ad ottenere tale risultato verrà riportata in questo post.

CatturaInnanzitutto, la figura precedentemente mostrata consente di osservare quello che dovrà essere l’output desiderato (molto simile a quanto visualizzabile su Facebook), nello specifico l’esempio riguarda la notifica di messaggi in sospeso, ma è chiaro che quanto esposto potrà essere utilizzato per qualsiasi altro tipo di segnalazione che preveda un conteggio; i secondo luogo, per ottenere questo tipo di risultato non si dovrà far ricorso ad alcuna immagine, saranno invece sufficienti alcune regole di stile.

Per comodità del lettore presentiamo un esempio di pagina HTML completa contenente sia il codice CSS da utilizzare che il markup su cui le regole andranno ad agire, nello specifico il “badge” contenente il numero dei messaggi in coda di lettura sarà posto al di sopra di un semplice button:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
   .notifica {
   position:relative;
}
.notifica[value]:after {
   content:attr(value);
   position:absolute;
   top:-10px;
   right:-9px;
   font-size:.8em;
   background:red;
   color:white;
   width:16px;height:16px;
   text-align:center;
   line-height:18px;
   border-radius:40%;
   border: 1px solid #ccc;
}
</style>
</head>
<body>
<br><br>
<button class="notifica" value="10">Messaggi</button>
</body>
</html>

Prima di utilizzare questo snippet non dimenticate che il valore che verrà visualizzato all’interno del “badge” dovrà essere passato al parametro value del pulsante, chiaramente esso potrà essere estratto da una qualsiasi fonte di dati, a partire dal conteggio dei record di un database. Nello stesso modo, il “badge” potrà essere associato ad una diversa componente di pagine, come per esempio un link.

Post correlati
I più letti del mese
Tematiche