Disegnare icone e bottoni con i CSS3

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Come da oggetto, in questo articolo vedremo come disegnare icone con i CSS3, in modo da utilizzare del semplice e leggero testo al posto delle immagini. Per l'esempio ho scelto di disegnare icone per lo più sociali, ma ovviamente il concetto può essere applicato a qualsiasi altro tipo di icona.

L'effetto che otteniamo è molto gradevole ed altamente personalizzabile nei colori e si avvale di un semplice true type font.

Segue uno screenshot di esempio:

disegnare icone css3

Come possiamo notare le icone sono rotonde, hanno un bordo, un'ombra, uno sfondo sfumato e (questo dallo screenshot non lo potete vedere) viene gestito un effetto rollover. Il tutto unicamente ed esclusivamente utilizzando i CSS3!

Allo scopo ho utilizzato questo font che vi invito a scaricare, a decomprimere (dovreste ritrovarvi un file di nome social_font.ttf) ed a salvare nella cartella che creerete per testare il vostro esempio.

Entriamo subito nel vivo della questione e scriviamo il codice HTML:

<div id="social">
    <ul>
        <li><a href="#">F</a></li>
        <li><a href="#">t</a></li>
        <li><a href="#">g</a></li>
        <li><a href="#">Y</a></li>
        <li><a href="#">l</a></li>
        <li><a href="#">K</a></li>
        <li><a href="#">b</a></li>
        <li><a href="#">y</a></li>
        <li><a href="#">s</a></li>
        <li><a href="#">o</a></li>
        <li><a href="#">r</a></li>
    </ul>
</div>

Abbiamo un contenitore che identifichiamo come "social" all'interno di cui troviamo un elenco che contiene dei link, il cui testo è semplicemente la lettera o il carattere che identifica un simbolo piuttosto che un altro, come potete comodamente vedere nella pagina che vi o linkato in precedenza.

Passiamo al codice CSS che vi mostrerà in diverse fasi. La prima è quella di dichiarare il font che stiamo utlizzando, definendolo ed assegnandogli un nome nel nostro foglio di stile:

@font-face
{
    font-family: 'social font';
    src: url(social_font.ttf) format(truetype);
}

In secondo luogo, impostiamo il font che abbiamo scelto al nostro contenitore di icone, impostando anche la dimensione del carattere:

#social
{
    font: normal 25px 'social font';
}

Gestiamo quindi l'aspetto dell'elenco, eliminando il classico puntatore, azzerando i vari margini e disponendo le icone in orizzontale piuttosto che in verticale:

#social ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#social li
{
    float: left;
    margin: 0 5px;
}

Non ci resta che disegnare l'icona impostando, come suddetto, colore, il bordo, lo sfondo sfumato, la rotondità e l'ombra:

#social a
{
    color: #333;
    text-decoration: none;
    background: #FFF;
    background: linear-gradient(#FFF 0%, #DDD 100%);
    background: -ms-linear-gradient(#FFF 0%, #DDD 100%);
    background: -o-linear-gradient(#FFF 0%, #DDD 100%);
    background: -moz-linear-gradient(#FFF 0%, #DDD 100%);
    background: -webkit-linear-gradient(#FFF 0%, #DDD 100%);
    padding: 10px;
    border: solid 1px #AAA;
    border-radius: 25px;
    -o-border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    box-shadow: 3px 3px 5px #CCC;
    -moz-box-shadow: 3px 3px 5px #CCC;
    -webkit-box-shadow: 3px 3px 5px #CCC;
}

Invito a notare che il concetto resta lo stesso a prescindere dall'aspetto dell'icona: per cambiare stile è quindi sufficiente agire sul valore dei colori, senza alterare la struttura del codice CSS.

Ultimo passaggio, gestiamo il rollover, quindi lo stile dell'icona al passaggio del mouse:

#social a:hover
{
    background: #EEE;
    transition: background 0.5s;
    -o-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -webkit-transition: background 0.5s;
}

Anche in questo caso è sufficiente agire sul colore dello sfondo al mouse over, senza alterare la struttura del codice proposto.

Passiamo adesso all'altro tema di questo articolo, ovvero disegnare bottoni coi CSS3. La tecnica è sempre la stessa, cambia solo un po' il codice HTML e, di conseguenza, quello CSS.

Vediamo, prima di tutto, un'anteprima del risultato che intendiamo ottenere:

disegnare bottoni css3

Iniziamo dal codice HTML:

<div id="social">
    <ul>
        <li><button class="f"><span>F</span> Seguici su Facebook</button></li>
        <li><button class="t"><span>t</span> Seguici su Twitter</button></li>
        <li><button class="g"><span>g</span> Seguici su Google+</button></li>
    </ul>
</div>

Gestiamo i bottoni in un elenco puntato, come nel caso delle icone. Utilizziamo il tag "button" per creare il bottone in cui scriviamo il testo che ci interessa e, in uno "span", andiamo ad inserire la lettera corrispondente all'icona del font scaricato prima che ci interessa.

La prima parte del codice CSS è uguale: includiamo il font, quindi stilizziamo l'elenco come spiegato in precedenza, ma rimuoviamo la stilizzazione dei link.

Vediamo dunque come impostare la stilizzazione di base dei bottoni:

#social button
{
    color: #FFF;
    font: normal 13px arial;
    padding: 5px 20px 5px 10px;
    border: solid 1px #000;
    border-radius: 25px;
    -o-border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    box-shadow: 3px 3px 5px #555;
    -moz-box-shadow: 3px 3px 5px #555;
    -webkit-box-shadow: 3px 3px 5px #555;
    cursor: pointer;
}
#social button:focus
{
    outline: 0;
}

Definiamo il colore, il carattere, il bordo, gli angolo, l'ombra ed impostiamo il cursore del mouse in modo da renderlo la classica "manina" dei link. In fine, evitiamo l'antiestetica tratteggiature intorno al bottone al click.

Andiamo quindi a gestire le icone associate ai singoli bottoni:

#social span
{
    vertical-align: middle;
    font: normal 25px 'social font';
}

Semplicemente, impostiamo il "social font" come carattere e gestiamo meglio l'allineamento verticale tra l'icona ed il testo.

Ultima operazione, andiamo a stilizzare le diverse classi che, nel codice HTML, abbiamo assegnato ai vari bottoni:

#social .f
{
    background: #44619D;
}
#social .t
{
    background: #00ACEE;
}
#social .g
{
    background: #DC4A38;
}

Semplicemente andiamo ad impostare ad ogni bottone il colore del social network a cui è associato.

Utilizzeremo quindi Javascript o jQuery per impostare il redirect verso la nostra pagina sociale sui singoli bottoni. Ma, in questa sede, lascio a voi questo compito.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (43.222)

:: Referenze dei fogli di stile Css (41.354)

:: Menu ad effetto mouseover con i Css (38.148)

:: Effetti sui link con i Css (27.364)

:: Testo verticale coi Css (19.214)

:: Angoli smussati in un box coi Css (18.509)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (15.734)

:: Box con effetto ombra con i CSS3 (15.452)

:: Stilizzare i form Html con i Css (15.219)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (14.888)

IN EVIDENZA
DOWNLOAD