Web Layout: bottoni css 'liquidi' a risparmio energetico

Quando si realizza un sito web, o un'applicazione, i bottoni sono una parte fondamentale; permettono all'utente di fare le proprie scelte.
Solitamente vengono usati i classici

<input type="button" value="Sono un bottone" />

Che hanno più o meno questo aspetto:

Oppure, per chi ha esigenze geafiche più alte, dei bottoni personalizzati, realizzati solitamente con programmi di grafica come Photoshop.
Questi ultimi possono avere le più svariate forme e colori, l'unico limite è la fantasia: qui alcuni esempi.
Sicuramente questa soluzione offre molta più libertà, ma tuttavia ha un grosso limite: la riutilizzabilità.
Un domani infatti che vorremo modificare il testo di un bottone, o il colore, saremmo obbligati ad aprire il programma di grafica (photoshop o gimp che sia), aggiornare il bottone, salvarlo, e sovvrascriverlo con quello vecchio tramite ftp.

Inoltre, se abbiamo molti bottoni, i nostri utente dovranno scaricare le immagini di ognuno di essi, rallentando a volte i tempi di caricamento della pagina.

Esiste un terzo metodo, che di recente guadagna popolarità (grazie a un bug di IE finalmente risolto con le immagini png).
Si tratta di utilizzare sempre e solo 1 immagine (oppure 3, qualora i vogliamo i nostri bottoni con gli spigoli arrotondati) semi-trasparente; Cambieremo poi tramite CSS il colore di sfondo di ogni bottone per renderlo diverso dagli altri.
Così, con una sola immagine (pensate a quanto sarà facile modificarla in futuro, dovrete aggiornare solo 1 immagine!) potrete avere infiniti bottoni, semplicemente cambiandone il colore di sfondo.

Il css dei nostri bottoni sarà poi molto semplice (esempio veloce veloce):

div.button{
    /*dimensioni del bottone */
    width: 150px;
    height: 24px;
    /*testo del bottone*/
    color: #DFDFDF;
    font-family: "Trebuchet MS";
    font-size: 14px;
    line-height: 21px;
    font-weight: bold;
    text-align: center;
    /*ecco il 'trucco'*/
    background-image: url('button-bg.png');
    background-color: #000000;
    /*per renderlo più piacevole, aggiungiamo i bordi arrotondati (css 3.0)*/
    /*che attualmente però sono supportati solo dai browser mozilla/webkit based (firefox, safari, chrome)*/
    border-width: 1px 1px 1px 1px;
    border-color: #000000;
    border-style: solid;
    /*bordi arrotondari per mozilla*/
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 4px;
    /*bordi arrotondari per chrome, safari*/
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
}
div.button:hover{
    /*quando andiamo sul bottone conl mouse, semplicemente cambiamo il colore di sfondo, del font*/
    /*e la forma del cursore del mouse*/
    background-color: #333333;
    color: #FFFFFF;
    cursor: pointer;
}

E il risultato finale sul browser:
Firefox:
Internet Explorer:

Non male, no?
E cambiando solo il CSS, possiamo modificare il colore di sfondo (e quindi l'aspetto) del bottone, in modo veramente veloce.

Un tutorial scritto molto bene su come realizzare al meglio questo effetto, lo trovate sul blog di soh tanaka, insieme a alcuni esempi con diversi colori.

Posted via email from Kgo