Molti siti, incluso il nostro blog, usano dei mini-bottoni per includere link al validatore, al feed RSS e altre risorse. Se non avete pazienza di realizzare la grafica dei mini-bottoni, ci sono molti servizi on-line che offrono gratuitamente la possibilità di crearli: tra i tanti, segnalo l'ottimo Brilliant Button Maker di Luca Zappa.
C'è un'alternativa all'uso della grafica: l'uso dei CSS, e sarà argomento di questo articolo. Presentiamo subito l'esempio che presenta quattro mini-bottoni, di cui due ai validatori CSS e HTML, uno per il feed RSS e uno per MovableType, la piattaforma di blogging con cui è realizzato il blog. Ecco il markup:
<a class="minibutton validator" href="#" title="CSS valido">W3C <span>CSS</span></a>
<a class="minibutton validator" href="#" title="HTML valido">W3C <span>HTML</span></a>
<a class="minibutton mt" href="#" title="questo blog usa MovableType">powered by <span>MT</span></a>
<a class="minibutton rss" href="#" title="sottoscrivi il feed RSS di questo sito">Subscribe <span>RSS</span></a>
Come si può notare ciascun mini-bottone è realizzato con un link alla relativa pagina/servizio. All'interno viene inserito uno span così da consentire la suddivisione cromatica dei mini-bottoni. A ciascun link vengono attribuite due classi, la prima dal nome "minibutton" è comune a tutti e contiene gli stili generici, mentre la seconda serve per i colori dei mini-bottoni: quelle usate nell'esempio sono "validator", "mt" e "rss".
Procediamo quindi con il CSS dell'esempio che è piuttosto semplice. Per prima cosa verrà definita la classe minibutton, la sua fase rollover e la presentazione generica dello span all'interno dei link. Vediamo le tre regole per intero:
a.minibutton{font: 9px arial,sans-serif;
text-transform: uppercase;text-decoration: none;
border: 1px solid;border-color: #CCC #666 #666 #CCC;
padding-left: 0.2em;background: #FFF;color: #555}
a.minibutton:hover{border-color: #333 #999 #999 #333}
a.minibutton span{padding: 0 0.2em}
Qualche parola sull'implementazione: per i minibottoni viene definito un font di 9 pixel, reso in maiuscolo senza sottolineatura. Il colore dei quattro bordi viene definito individualmente così da consentire un effetto tridimensionale, viene infine definito un padding sul lato sinistro e il colore di sfondo e del testo. La direzione dell'effetto ombra dei bordi verrà invertito poi in fase :hover così da dare un discreto effetto
rollover, e sugli span viene definito un padding laterale di 0.2em.
A questo punto non resta quindi che definire le classi specifiche dei mini-bottoni e degli span al loro interno, che conterranno quindi solo le dichiarazioni sul colore di sfondo e del testo dato che le dichiarazioni comuni a tutti i minibottoni sono state accorpate nelle regole appena viste. Ecco quindi le regole CSS specifiche:
a.validator{color:#0C479D}
a.validator span{background: #FC6;color:#000}
a.mt{color:#8DB66D}
a.mt span{background: #4C748C;color:#FFF}
a.rss{background:#F1F1F1;color:#000}
a.rss span{background:#F60;color:#FFF}
Con poche regole CSS abbiamo quindi ottenuto i minibottoni dell'esempio, che non richiedono grafica, sono semplici e con colori facilmente personalizzabili. La compatibilità è piuttosto buona: l'esempio Ë stato testato con successo su IE5.5, IE6, IE7, Opera, Firefox e Safari. Da notare che i mini-bottoni sono inline, ed è quindi possibile disporli in una sezione di testo centrato (come nell'esempio), allineato a destra o a sinistra semplicemente cambiando l'allineamento del testo del contenitore in cui sono inseriti. La pagina di esempio è disponibile per il download. Alla prossima.
