Torniamo a parlare di sviluppo web. Come ormai avrete capito, non ho frequentato alcuna scuola di informatica o corsi vari, ma ho imparato per conto mio, utilizzando come risorsa l’illimitato mondo di Internet.
E sì, perché in questi ultimi anni si è ingrandito sempre di più, offrendo sempre più risorse e notizie gratuitamente a chi, come me, ha intenzione di imparare i più svariati argomenti senza acquistare un solo libro.
Infatti, grazie ai siti più importanti, che contengono guide ed esempi (tra i quali i fantastici html.it e w3schools), ma anche siti più piccoli, forum e discussioni varie, tra principianti e professionisti del settore.
Grazie a questo chiunque può ottenere qualunque informazione e diventare un abile webmaster.
Ok, dopo questo piccolo tributo alla saggezza del Word Wide Web passiamo a noi.
Quello che voglio proporre oggi è un modo (uno dei tanti) per creare dei pulsanti da utilizzare nel proprio sito, sfruttando l’interazione tra HTML e CSS.
Risultato finale
Solitamente prima si scrive il procedimento e poi si rappresenta il risultato che si otterrà alla fine, però, dato che al giorno d’oggi tutti hanno fretta (me compreso, purtroppo…), propongo subito quello che sarete in grado di fare, una volta terminata la lettura di questo articolo.
[iframe src=”http://robinliberty.com/demos/css_buttons/” height=”100″]
Che ve ne pare? A me sembrano dei pulsanti davvero professionali.
E’ possibile utilizzare anche delle icone, per far comprende ancora meglio, al visitatore, l’azione associata al pulsante.
Il suo utilizzo finale, nella pagina HTML, sarà il seguente:
<!-- Pulsante con immagine -->
<div class="button">
<div class="OK">OK</div>
</div>
<!-- Pulsante senza immagine -->
<div class="button">
<div>Annulla</div>
</div>
Come si può notare dall’esempio riportato poco fa, il pulsante è un contenitore, dentro al quale è possibile metterci qualunque cosa. Aggiungendo al <DIV> interno l’attributo class=”” sarà possibile indicare alla pagina HTML quale icona associare al pulsante, rendendo tutto molto più semplice in fase di creazione e stesura della pagina.
Cominciamo
Occorrono tre immagini che utilizzeremo come sfondo per i nostri pulsanti nelle tre fasi, ovvero:
- Stato normale
- Stato “puntato” (quando il cursore del mouse si posiziona sopra di esso)
- Stato “premuto” (quando si clicca sul pulsante)
Devono essere immagini che abbiano una altezza di 25 pixel, mentre la larghezza non è importante (basta anche 1 pixel, perché poi l’immagine verrà ripetuta orizzontalmente per ricoprire tutto il pulsante).
Volendo è possibile utilizzare le immagini che ho usato per realizzare la demo:
Per realizzare l’immagine di sfondo per lo stato “puntato” ho sovrapposto all’immagine di sfondo normale un layer bianco opacizzato al 50%, per dare un effetto di riflesso.
Invece, per realizzare l’immagine di sfondo per lo stato “premuto” ho semplicemente invertito l’immagine dello stato normale.. un sistema un po’ banale, ma sempre efficace!
Se si vogliono realizzare dei pulsanti con immagine è possibile scaricare delle icone in formato 16 x 16 pixel. Suggerisco, per questo scopo, il sito FindIcons.com.
A questo punto cominciamo a scrivere le regole del foglio di stile CSS.
.preload
{
display: none;
}
/* Classe per lo stato normale del pulsante */
.button
{
display: inline-block;
background: url("btnNormal.png") repeat-x;
height: 25px;
min-width: 50px;
border: 1px solid grey;
text-align: center;
cursor: pointer;
font-family: sans-serif;
font-size: 14px;
/* Disabilito la selezione del testo */
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
/* Classe per lo stato "puntato" del pulsante */
.button:hover
{
background: url("btnHover.png");
}
/* Classe per lo stato "premuto" del pulsante */
.button:active
{
background: url("btnPressed.png");
}
.button > div
{
height: 100%;
padding-top: 6px;
padding-left: 10px;
padding-right: 10px;
width: auto;
}
Le ultime quattro linee, nella definizione della classe “button”, servono per impedire all’utente di selezionare il testo del pulsante.
Logicamente dobbiamo sostituire gli url delle voci “background” con i percorsi esatti delle immagini di sfondo. Nell’esempio, siccome le mie immagini si trovano nella stessa cartella dello foglio di stile o della pagina html, ho scritto solo il nome del file con l’estensione.
A questo punto, se vogliamo, possiamo creare delle classi aggiuntive per usare i pulsanti con l’icona che vogliamo.
Seguono, quindi, le regole CSS delle classi utilizzate nell’esempio di sopra (“Yes”, “No”, “Warning”).
/* Pulsante OK */
.button > div.OK
{
padding-left: 30px;
background: url("btnIconOK.png") 5px 4px no-repeat;
}
/* Pulsante NO/Errore */
.button > div.No,
.button > div.Error
{
padding-left: 30px;
background: url("btnIconNo.png") 5px 4px no-repeat;
}
/* Pulsante Attenzione! */
.button > div.Warning
{
padding-left: 30px;
background: url("btnIconWarning.png") 5px 4px no-repeat;
}
In questo modo, possiamo aggiungere tutte le classi che vogliamo, ricordandoci di associare l’icona giusta (che, lo voglio ricordare, deve essere di dimensione 16 x 16 pixel per non generare errori grafici).
Pre-caricamento delle immagini
Potrebbe capitare che la prima volta che si porta il mouse sul pulsante, si crei un piccolo disguido grafico prima che compaia la giusta immagine (“btnHover.png”). Questo accade perché il browser carica l’immagine nel momento esatto in cui essa viene chiamata dalla pagina. Quindi, quando si porta il mouse sul pulsante, la pagina chiede al browser di visualizzare l’immagine “btnHover.png”, quindi, se non è già stata caricata, lo fa in quel momento.
Per quanto possa essere veloce il server e per quanto l’immagine possa essere piccola e facile da caricare, ci sarà sempre quell’effetto dovuto al caricamento dell’immagine, estremamente fastidioso.
Per evitare questo è sufficiente inserire in cima alla pagina (diciamo subito dopo il tag <BODY>) queste linee:
<div class="preload">
<img src="btnNormal.png">
<img src="btnHover.png">
<img src="btnPressed.png">
</div>
Così facendo il browser sarà obbligato a caricare le tre immagini di stato del pulsante prima della visualizzazione dei pulsanti in modo tale che successivamente, passandoci sopra col mouse, non avverrà alcuno “stacco” perché l’immagine è già stata caricata precedentemente.
Inoltre, le tre immagini non verranno mostrate in quanto la classe “.preload” è stata impostata nel foglio di stile come nascosta.
Utilizzo
Una volta scritte le regole CSS che ho riportato sopra, per inserire il nostro pulsante di “errore” nella pagina HTML non dobbiamo fare altro che scrivere questo codice:
<div class="button">
<div class="Error">Elimina</div>
</div>
Dopodiché possiamo associare le azioni a javascript, o ancora meglio a jQuery.
<div class="button" id="btnDelete" onclick="alert('Articolo eliminato')">
<div class="Error">Elimina</div>
</div>
Codice di esempio
Ecco il codice completo della demo:
[iframe src=”http://robinliberty.com/demos/css_buttons/” height=”100″]
Pagina index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>CSS Buttons Example</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.preload
{
display: none;
}
.button
{
display: inline-block;
background: url("btnNormal.png") repeat-x;
height: 25px;
min-width: 50px;
border: 1px solid grey;
text-align: center;
cursor: pointer;
font-family: sans-serif;
font-size: 14px;
/* Disable text selection */
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.button:hover
{
background: url("btnHover.png");
}
.button:active
{
background: url("btnPressed.png");
}
.button > div
{
height: 100%;
padding-top: 6px;
padding-left: 10px;
padding-right: 10px;
width: auto;
}
.button > div.OK
{
padding-left: 30px;
background: url("btnIconOK.png") 5px 4px no-repeat;
}
.button > div.No,
.button > div.Error
{
padding-left: 30px;
background: url("btnIconNo.png") 5px 4px no-repeat;
}
.button > div.Warning
{
padding-left: 30px;
background: url("btnIconWarning.png") 5px 4px no-repeat;
}
</style>
</head>
<body>
<div class="preload">
<img src="btnNormal.png">
<img src="btnHover.png">
<img src="btnPressed.png">
</div>
<div style="text-align: center">
<div class="button" onclick="$('#showhide').fadeIn()">
<div class="OK"><b>Mostra</b></div>
</div>
<div class="button" onclick="$('#showhide').fadeOut()">
<div class="Error">Nascondi</div>
</div>
<div class="button" onclick="alert('Questo è un messaggio a comparsa!')">
<div class="Warning">Alert</div>
</div>
<div class="button" onclick="alert('Hey, sei sempre così testardo?')">
<div>Non provare a cliccarmi!</div>
</div>
<h3 id="showhide">Usa i pulsanti per visualizzarmi o per nascondermi!</h1>
</div>
</body>
</html>
Bene… ora che anche voi avete imparato questa chicca non mi resta che salutarvi e darvi appuntamento al prossimo articolo. 😀
@MatrixTeo
Hai ragione… Si potrebbe mettere tutto in un’unica immagine. Non ci avevo pensato! 😀
Per quanto riguarda i gradienti, ho preferito usare le immagini proprio per la questione compatibilità. Mi preoccupa sempre troppo Internet Explorer… 🙁
Ottimo! Per fare una cosa in “pure CSS” le sfumature o le ombre si potrebbero creare in CSS3 con le proprietá linear-gradient o box-shadow, si perde in compatibilitá, anche se ormai quasi tutti i browser le supportano, ma almeno si evita il preload delle immagini. Ultima cosa, per comoditá il background si puó salvare in un unico file e si puó richiamare usando background-position, in teoria in quel modo non serve il preload 🙂