Questa è la traduzione dell'articolo Shiny Happy Buttons di John Allsopp pubblicato originariamente su 24 Ways il 18 dicembre 2008.
Da quando Mac OS X ha fatto la sua comparsa sui nostri schermi, i bottoni con stile glossy, translucidi, scintillanti sono stati quasi di rigore e, insieme agli effetti con i riflessi e agli angoli arrotondati, sono diventati una sorta di cliché del design in stile Web 2.0. In questo piccolo mio contributo per il calendario dell'avvento prenderemo un classico, noioso bottone HTML per dargli una rinfrescata in stile 2.0.
Ma, e qui viene il bello, non useremo nessuna immagine, né nell'HTML né nel CSS. Niente sliding doors, niente image replacement o altre tecniche simili. Solo e soltanto CSS, CSS3 e un pizzico di CSS sperimentali. Saremo compatibili con quasi tutti i browser (sebbene con un po' di progressive enhancement per quanti adoperano ancora browser non di ultimissima generazione).
La parte HTML
Iniziamo con il codice HTML:
<button type="submit">This is a shiny button</button>
Ok, non è certamente un bottone scintillante, ma lo diventerà.
Prima di applicare gli stili si presenta così.
Ironicamente, a seconda del sistema operativo e del browser che usate, potrebbe già sembrare un bottone molto accattivante, ma non è questo il punto. Noi vogliamo trasformarlo in qualcosa di 2.0 e davvero splendido. Il nostro obiettivo è far sì che diventi così:
Tenete da subito in mente che a seconda del browser che state usando potreste vedere meno effetti CSS di quelli applicati per creare il bottone. Al momento in cui scrivo questo articolo, solo su Safari tutti gli effetti sono supportati.
Dando un'occhiata al prodotto finito, ecco cosa abbiamo fatto:
- Abbiamo dato al bottone un po' di padding e una larghezza definita.
- Abbiamo cambiato il colore del testo e abbiamo dato al testo un'ombreggiatura (text-shadow).
- Abbiamo assegnato al bottone un bordo.
- Abbiamo arrotondato gli angoli.
- Abbiamo dato al bottone un'ombreggiatura.
- Abbiamo assegnato al bottone uno sfondo con effetto gradiente.
E ricordate, tutto senza usare alcuna immagine.
Gli stili del bottone
Mettiamoci al lavoro, dunque. Per prima cosa aggiungiamo del padding e una larghezza:
button {
padding: .5em;
width: 15em;
}
Poi diamo il colore al testo e l'ombreggiatura:
color: #ffffff; text-shadow: 1px 1px 1px #000;
Una nota sulla proprietà text-shadow
Se non avete mai visto ombreggiature sul testo prima d'ora, ecco una breve storia di questa proprietà. text-shadow è stata introdotta per la prima volta nei CSS2, ma è stata supportata solo da Safari (sin dalla versione 1) alcuni anni dopo. È stata rimossa dai CSS2.1, ma poi reintrodotta nei CSS3. È ora supportata da Safari, Opera e Firefox 3.1. Internet Explorer ha un filtro per l'applicazione dell'ombreggiatura, ma la sintassi è del tutto diversa.
E allora, come funziona la proprietà text-shadow? I tre valori valori di lunghezza specificano rispettivamente uno spostamento orizzontale, uno verticale e l'ampiezza dell'ombra (più alto è questo valore più l'ombra sarà espansa). L'ultimo valore definisce il colore dell'ombra.
Arrotondare gli angoli
Ora aggiungiamo un bordo e arrotondiamo gli angoli dell'elemento:
border: solid thin #882d13; -webkit-border-radius: .7em; -moz-border-radius: .7em; border-radius: .7em;
Abbiamo qui usato la stessa proprietà in tre forme leggermente diverse. Aggiungiamo il prefisso specifico del browser per Webkit e Mozilla (e per i browser basati su questi rendering engine) perché oggi entrambi supportano border-radius come proprietà sperimentale. Aggiungiamo anche il nome standard della proprietà per quei browser che la supporteranno pienamente nel futuro.
Il beneficio di un prefisso specifico per browser è che se un browser non supporta totalmente una proprietà, possiamo evitare di usare quella proprietà semplicemente non aggiungendo il prefisso. Al momento, come si può intuire, border-radius è supportato in Safari e Firefox, ma in entrambi è richiesto l'uso del prefisso.
border-radius prende un valore di lunghezza, tipo pixel. In questo caso, come per il padding, abbiamo usato gli em, il che significa che se l'utente scala le dimensioni del testo, anche il raggio dell'angolo scalerà. Potete testare usando un valore di 5px e provando a zoomare la dimensione del testo.
Ora siamo sulla strada giusta. Tutto ciò che dobbiamo fare è aggiungere un'ombreggiatura e applicare il gradiente sullo sfondo.
Nei CSS3 c'è la proprietà box-shadow, al momento supportata solo da Safari 3. È molto simile a text-shadow: si specifica uno spostamento orizzontale, uno verticale, l'ampiezza dell'ombra, un colore:
-webkit-box-shadow: 2px 2px 3px #999; box-shadow: 2px 2px 2px #bbb;
Ancora una volta, notate che è richiesto l'uso del prefisso -webkit-, dal momento che in Safari il supporto per questa proprietà è considerato ancora sperimentale e meno che perfetto.
Sfondo con gradiente
Dunque, ora non ci resta che applicare il nostro splendido sfondo con gradiente. Molti fanno da tempo queste cose con le immagini. Ma se possiamo fare a meno di usarle è meglio. Otteniamo pagine più leggere, download più veloci, design che si adattano meglio alle preferenze dell'utente rispetto alle dimensioni del testo. Ma come possiamo applicare uno sfondo con gradiente senza un'immagine?
Ora daremo un'occhiata all'unica proprietà che non è ancora parte di uno standard CSS: la funzione per i gradienti creata da Apple per essere usata dovunque si possano usare immagini nei CSS (come per gli sfondi). In altre parole, prendiamo i gradienti SVG e li rendiamo disponibili attraverso una sintassi CSS.
Ecco come si presenta la proprietà con i suoi valori:
background-image: -webkit-gradient(linear, left top, left bottom, from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));
Concentrandoci sulla funzione per il gradiente, essa ha questa forma:
-webkit-gradient(type, point, point, from(color), to(color),color-stop(where, color));
Potrebbe sembrare complicata, ma non lo è.
Il nome della funzione è gradient (poiché è sperimentale usiamo il prefisso -webkit-).
Potreste non aver mai visto una funzione CSS, ma ce ne sono altre, tra cui la funzione attr() usata per il contenuto generato. Una funzione restituisce un valore che può essere usato come il valore di una proprietà: qui lo stiamo usando come un'immagine per lo sfondo.
Poi specifichiamo il tipo di gradiente. Vogliamo un gradiente lineare, ma esistono anche i gradienti radiali.
Dopo specifichiamo i punti di inizio e finale del gradiente: nel nostro caso la parte superiore (top) e inferiore (bottom) dell'elemento, su una linea verticale.
Specifichiamo poi i colori iniziali e finali, e infine un colore di stop situato al 40% verso la parte inferiore dell'elemento. Insieme, questo crea un gradiente con una transizione morbida dal colore iniziale nella parte alta, verticalmente fino al colore di stop, con un'altra transizione morbida verso il colore finale.
C'è ancora una cosa da aggiungere. Di che colore sarà lo sfondo del nostro bottone se un browser non supporta i gradienti? Sarà bianco (oppure qualche colore di default per i bottoni), cosa che potrebbe rendere difficile o impossibile la lettura del testo. Aggiungiamo allora un colore di sfondo.
Messo tutto insieme, ecco cosa otteniamo:
button {
width: 15em;
padding: .5em;
color: #ffffff;
text-shadow: 1px 1px 1px #000;
border: solid thin #882d13;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
-webkit-box-shadow: 2px 2px 3px #999;
box-shadow: 2px 2px 2px #bbb;
background-color: #ce401c;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));
}
Il tutto appare così nei vari browser:
Ma è diverso sui vari browser!
Sì, appare diversamente sui diversi browser. Ma la risposta alla domanda la sappiamo già: "i siti web devono apparire identici in tutti i browser?".
Anche se pensate che i siti debbano apparire identici su tutti i browser, spero che questo tutorial abbia stimolato la vostra curiosità per i CSS3 e per i CSS sperimentali già supportati in browser molto usati (e non abbiamo parlato di animazioni e simili effetti).
