Pubblicato da
Fino a non molto tempo fa, tutti i web designer dovevano utilizzare immagini per dare uno stile grafico personalizzato ai bottoni ed ai pulsanti sui loro siti web!
Le tecniche possibile erano 2: creare una sola immagine di sfondo per il pulsante oppure utilizzare due in combinazione!
Con la prima soluzione si evitava di affollare l’HTML con <span> utilizzati ai soli fini grafici, col problema poi di avere dei pulsanti dalle dimensioni fisse.
<a href="#">Testo del link</a>
a { display:block; width:100px; height:50px; margin:5px; padding: 5px; background: url(immagine-di-sfondo) no-repeat scroll 0 0; color:#000; overflow:hidden; text-decoration:none; line-height:50px }
La seconda tecnica, invece, consentiva di creare bottoni dalle dimensioni anche molto diverse; in questo caso, però, si dovevano aggiungere elementi Html solo per il design e realizzare immagini composite.
<a href="#"><span>testo del link</span></a>
a { display:block; height:50px; margin-left:5px; padding: 5px; background: url(immagine-di-sfondo-sinistra) no-repeat scroll left center; color:#000; text-decoration:none; line-height:50px } a span { display:block; height:40px; margin-left:20px; margin-right:5px; padding: 5px; background: url(immagine-di-sfondo-sinistra) no-repeat scroll right center; }
Oggi tutto questo non serve più!
Il CSS è, infatti, andato molto avanti e ci dà la possibilità di dare uno stile personalizzato ai link, ottenendo fantastici bottoni, senza dover complicare troppo il codice ne realizzare immagini con Photoshop o con Illustrator!
Il vantaggio, non è solo una maggiore pulizia del codice, ma anche una grande facilità nel fare dei cambiamenti anche radicali alle dimensioni, colori e stile dei nostri pulsanti. Lavorando solo con il CSS potremmo, infatti, modificare i bottini in tutte le loro parti grafiche!
Ecco un esempio di pulsante realizzato solo con il CSS
Creare pulsanti CSS
Iniziamo con il codice html base di un pulsante.
<a class="pulsante" href="/link">testo del link</a>
Non vi servirà altro per visualizzare sulla vostra pagina web qualcosa di simile a questo.
Primo passo: sfondo e dimensioni del pulsante
Prima di tutto dobbiamo informare il browser che il nostro link ha dimensioni specifiche e deve essere visualizzato, pertanto come un blocco. Quindi impostiamo i colori per lo sfondo ed il testo, i margini, sia interno che esterno, e lo stile di base del testo!
a.pulsante { height: 30px; width: 150px; display: block; background-color: #505050; color: white; text-decoration: none; padding: 10px; margin: auto; }
Secondo passo: diamo uno stile all’ancor text del link
Il testo risulta troppo piccolo e decentrato rispetto al suo contenitore. Quello che manca è la definizione del font, sia per il carattere da utilizzare che per le dimensioni, ed il posizionamento all’interno del bottone che stiamo creando.
Per il font, abbiamo scelto di non utilizzare quelli standard, ma quelli forniti direttamente dalle ottime librerie di Google Fonts: nel nostro caso useremo il font chiamato Belleza
La posizione orizzontale la impostiamo con text-align=”center”, mentre quella verticale dando a line-height un valore pari alla metà dell’altezza di tutto il pulsante. Nel nostro caso quindi imposteremo line-height:25px, visto che l’altezza del bottone è 30px più i 10 pixels di padding in alto ed in basso.
Infine, per rendere il testo più visibile gli diamo un po’ di grassetto e lo modifichiamo, in modo che tutte le lettere diventino maiuscole, sempre attraverso solo il css.
a.pulsante { height: 30px; width: 150px; display: block; background-color: #505050; color: white; text-decoration: none; padding: 10px; margin: auto; line-height: 25px; text-align: center; font-family: 'Belleza', arial, sans-serif; font-weight: bold; font-variant: small-caps; font-size: 20px; }
Terzo passo: bottone con gli angoli arrotondati
Con l’introduzione del css3 è stata codificata definitivamente la proprietà border-radius, che ci permette di arrotondare gli angoli di un qualunque elemento html. Purtroppo però, ancora in molti fanno uso di browser vecchi, che, non riescono ad interpretare la nostra istruzione.
La soluzione è fare ricorso ai diversi standard proprietari di ogni produttore di browser: per Firefox useremo -moz-border-radius, mentre per Chrome e Safari -webkit-border-radius. Purtroppo Explorer ha aggiunto il supporto per border-radius solo nella versione 9, mentre le precedenti versioni non sono in grado di arrotondare gli angoli. Esiste comunque uno script che consente di far interpretare correttamente anche alle vecchi versione di Internet Explorer: lo ho testato e riesce a risolvere qualche problema, anche se purtroppo dovrete lavorare molto per ottenere effetti simili. In ogni caso, per chi volesse il link è questo fetchak.com/ie-css3/
Per mantenere la compatibilità anche con le vecchie versioni di Internet Explorer consiglio in ogni caso di creare un foglio di stile alternativo, dove usare ancora le vecchie immagini!
Scegliamo di arrotondare tutti gli angoli di 15 pixels:
a.pulsante { height: 30px; width: 150px; display: block; background-color: #505050; color: white; text-decoration: none; padding: 10px; margin: auto; line-height: 25px; text-align: center; font-family: 'Belleza', arial, sans-serif; font-weight: bold; font-variant: small-caps; font-size: 20px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; }
Quarto passo: effetto 3D, bordi ed ombreggiature
A questo punto al nostro pulsante manca solo il bordo. L’effetto che vogliamo ottenere è una sorta di cordoncino in rilevo, che giri tutto attorno al bottone.
La proprietà css che useremo è box-shadow: di solito si usa solo per creare una ombreggiatura al di sotto di un elemento html, ma può essere utilizzato anche in modo più creativo.
Analizziamo per un attimo il suo utilizzo, partendo da un esempio, box-shadow: 1px 1px 3px #000000: come vedete prende 4 parametri.
La posizione dell’ombra è gestita dai primi due parametri: il primo misura lo spostamento in orizzontale, mentre il secondo quello in verticale ed entrambi accettano anche valori negativi. Con il terzo parametro controlliamo la sfumatura: maggiore sarà la dimensione è più l’ombra sarà grande e sfumata. L’ultimo parametro, infine, è il colore: nel caso in questione è un bel nero (#000000) pieno, ma potremmo anche impostarne la trasparenza, modificandolo in rgba(0,0,0,0.5), dove 0.5 è l’opacità del colore, con valori da 0 (trasparente) a 1 (opaco).
Fino a qui, era l’uso standard di box-shadow. Ma in pochi sanno, che box-shadow accetta più quartine di valori, e può creare effetti anche molto complessi.
Prima di impostare i valori, ragioniamo bene su quello che vogliamo fare, e sull’effetto di illuminazione da dare. Pensiamo ad una fonte di luce in alto a sinistra rispetto ad elemento in rilievo, ed a come quest’ultimo sarebbe illuminato. Essendo in rilievo, i lati esposti alla luce dovrebbero essere un po’ più chiari, mentre i lati opposti saranno in ombra, e quindi più scuri!
Tradotto in css dovremmo riuscire a creare una sfumatura che va dall’angolo in alto a sinistra verso quello in basso a destra. Per farlo iniziamo ad impostare più quartine di valori per box shadow:
box-shadow: 3px 3px 1px #C4C4C4,3px -3px 1px rgba(136, 136, 136, 0.7), -3px 3px 1px #BBB, -3px -3px 1px #888;
Il bordo e grigio, con una larghezza di 3px ed una sfumatura appena accennata: con la prima quartina controlliamo l’ombra nell’angolo in basso a destra, un grigio chiaro; la seconda si occupa invece nell’angolo in alto a destra. Notate il colore con una leggera trasparenza, per dare un effetto sfumato. La terza mostra il bordo nell’angolo in basso a sinistra. L’ultima, infine, genera il cordoncino in alto a sinistra, un po’ più scuro di tutti gli altri!
Manca però l‘effetto tridimensionale, che otterremo aggiungendo un effetto di illuminazione più netto al box-shadow:
box-shadow: 1px 1px 1px white, -1px -1px 1px black, 3px 3px 1px #C4C4C4,3px -3px 1px rgba(136, 136, 136, 0.7), -3px 3px 1px #BBB, -3px -3px 1px #888;
Come è facile notare abbiamo semplicemente aggiunto un sottile bordo bianco nella parte illuminata, ed uno nero nella parte in ombra. Il nostro pulsante ora ha un bell’effetto tridimensionale!
Con un’ultima modifica aggiungiamo un po’ di ombreggiatura tutto attorno al pulsante, per esaltarlo rispetto allo sfondo grigio del sito.
box-shadow: 1px 1px 1px white, -1px -1px 1px black, 3px 3px 1px #C4C4C4,3px -3px 1px rgba(136, 136, 136, 0.7), -3px 3px 1px #BBB, -3px -3px 1px #888, 0px 0px 15px black;
Anche in questo caso i vecchi browser potrebbero non interpretare correttamente le istruzioni: usate anche -moz-box-shadow e -webkit-box-shadow con gli stessi valori per mantenere la compatibilità con quanti più browser possibili!
Pulsante CSS: il codice finale
Riassumendo ecco il codice finale per iniziare a creare pulsanti solo con il css. Giocate tranquillamente con colori e dimensioni per scoprire altri fantastici effetti
<a class="pulsante" href="/link">testo del link</a>
a.pulsante { height: 30px; width: 150px; display: block; background-color: #505050; color: white; text-decoration: none; padding: 10px; margin: auto; line-height: 25px; text-align: center; font-family: 'Belleza', arial, sans-serif; font-weight: bold; font-variant: small-caps; font-size: 20px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; box-shadow: 1px 1px 1px white, -1px -1px 1px black, 3px 3px 1px #C4C4C4,3px -3px 1px rgba(136, 136, 136, 0.7), -3px 3px 1px #BBB, -3px -3px 1px #888, 0px 0px 15px black; -webkit-box-shadow: 1px 1px 1px white, -1px -1px 1px black, 3px 3px 1px #C4C4C4,3px -3px 1px rgba(136, 136, 136, 0.7), -3px 3px 1px #BBB, -3px -3px 1px #888, 0px 0px 15px black; -moz-box-shadow: 1px 1px 1px white, -1px -1px 1px black, 3px 3px 1px #C4C4C4,3px -3px 1px rgba(136, 136, 136, 0.7), -3px 3px 1px #BBB, -3px -3px 1px #888, 0px 0px 15px black; }
