CSS  »  Articoli  »  Effetti con CSS 

Uno delle tecniche più sfiziose e utilizzata in molti siti, è quella presentata in Create a valid alert message with CSS.

Si tratta di un modo molto efficace per creare messaggi di informazioni, alert e di errore usando markup minimale, una semplice icona e poche regole CSS. Ho così pensato di riprendere e espandere la tecnica a beneficio dei lettori.

Vediamo subito il primo esempio che accompagna l'articolo, in cui vengono presentati quattro tipologie di messaggi per l'utente: informazione, avviso, domanda ed errore. Procediamo quindi con il markup: in sostanza si tratta di usare un <div> per messaggio, e accompagnarlo da due classi: una dal nome message che racchiuderà le regole comuni, e una specifica per ciascuna tipologia. Ecco l'HTML:

Come si può notare le classi specifiche sono rispettivamente info, warning, question e error. Ora procediamo con l'implementazione.

Per prima cosa le icone, che ho realizzato con InkScape, un programma open source per il disegno vettoriale. Le ho esportate in formato PNG con dimensioni 20x20 pixel, eccole tutte assieme:

Figura 1 - Icone usate per gli alert messages

Siamo così pronti a procedere con il CSS dell'esempio. Il meccanismo delle classi multiple nel markup, usato in diverse occasioni qui su HTML.it, si rivela versatile e potente e ci offre un solido spunto per la personalizzazione con i CSS. Per prima cosa la regola per la classe "message", che accorpa tutte le dichiarazioni comuni, e quella per il paragrafo al suo interno:

Come si può notare, vengono definiti il margine inferiore, il padding sui tre lati (escludendo quindi il lato inferiore, dato che lo spazio relativo sarà lasciato dal margine inferiore dei paragrafi) e un bordo sui due lati orizzontali spesso due pixel. Da notare come sulla sinistra del div class="message" vengano lasciati 50 pixel così da fare posto all'icona.

Altri articoli

Altre guide

Altre newsletter