In passato mi è capitato di dover creare delle icone tipo badge, che poi non ho avuto occasione di utilizzare. Così ho deciso di scrivere questa piccola guida. Spero che piacciano. A lato è mostrato il risultato finale. Per i colori del tutorial ho scelto una scala di grigi, ma è semplicissimo personalizzarli.

N.B.: Le dimensioni usate nell'esempio sono molto grandi. Per l'uso pratico è consigliabile quanto meno dimezzarle

Nel processo creativo di un sito web un giusto approccio iniziale e, in particolare,  i momenti della ideazione e della materiale progettazione, sono di fondamentale importanza per garantirgli una "lunga e serena sopravvivenza" all'interno della rete.

In primo luogo, partire con il piede giusto aiuta ad evitare il sopravvenire di grattacapi. Certo si può sempre intervenire con delle correzioni in corso d'opera, però ciò comporta delle perdite di tempo e di risorse.

Inoltre il sito non può essere considerato come qualcosa di statico e definitivo. Dobbiamo tenere in considerazione l'eventualità che debba essere modificato, ampliato o spostato. Il compito si fa molto meno oneroso se la strada è già spianata.

Con Xhtml 1.0 strict e Xhtml 1.1 non è possibile utiizzare l'attributo target per far aprire il link un una nuova finesta (target="_blank").

Sul luogo in cui sia più corretto far aprire i link esterni c'è una diatriba infinita, ma non è questa la sede per approfondire il discorso. Io, da navigatore, trovo più comodo che i collegamenti esterni si aprano in finestre nuove, tant'è che quando clicco ho sempre il dito premuto su Shift (spesso, per la gioia di Windows, anche per aprire i link interni, così da avere contemporaneamente tante finestrelle aperte).

Uno tra gli effetti grafici più comuni che vengono realizzati con l'uso dei css è il rollover, che sfrutta le proprietà dei link. Il rollover può consistere in uno sfondo di solo colore (es.: #ccc o Grey), oppure in uno sfondo realizzato attraverso l'uso di immagini.

In quest'ultimo caso bisogna stare attenti alla tecnica che si utilizza, perchè, il caricamento dell'immagine associata all'evento hover, può provocare uno spiacevole effetto "vuoto".

Infatti se per il rollover su usano 2 immagini differenti, all'apertura della pagina è caricata la sola immagine di a:link (nuovo o visitato), mentre quella dell' a:hover è caricata solo al passaggio del mouse.
Su Internet Explorer 6 il fenomeno si accentua per un bug del browser e  si ripropone ogniqualvolta si apre la pagina.