Nell’articolo di oggi vedremo un piccolo trucchetto che sfrutta le potenzialità del CSS3 e soprattutto della regola font-face che ci permetterà di realizzare le icone di un menu senza utilizzare immagini ma solo testo.
Vediamo innanzitutto l’idea alla base del tutorial. Utilizzare la regola @font-face ci consente di utilizzare font non standard all’interno delle nostre pagine web e, con apposite regole, di rendere compatibili questi font a tutti i browser (IE6 compreso). Utilizzando font appositi possiamo quindi sfruttare questa proprietà per evitare l’utilizzo di icone in formato immagine.
Questa tecnica consente di sfruttare molteplici vantaggi, come ad esempio la riduzione di richieste HTTP, la possibilità di personalizzare le dimensioni delle icone e tante altre. Vediamo insieme di cosa abbiamo bisogno.
Il font
Innanzitutto dobbiamo realizzare un font contenente le icone di cui abbiamo bisogno. Per comodità ho scelto il font Iconic che contiene diverse icone interessanti. Dobbiamo quindi includere il font nella pagina attraverso il @font-face come nel seguente codice:
view sourceprint?
1
@font-face {
2
font-family: 'iconic_stroke';
3
src: url(iconic_stroke.eot); /* IE */
4
src: local('iconic_stroke'), /* locale */
5
url('iconic_stroke.ttf') format('truetype');
6
}
A questo punto possiamo utilizzare il carattere in ogni parte della pagina semplicemente richiamandolo conl il nome utilizzato nella proprietà font-family.
Il menu
Realizziamo ora il menu. Come colore di sfondo ho scelto un semplicissimo gradiente da #b0372f a #98231c. Il codice HTML che ho utilizzato è il seguente:
view sourceprint?
1
<ul id="menu">
2
<li><a href="#">Home</a></li>
3
<li><a href="#">About Us</a></li>
4
<li><a href="#">Services</a></li>
5
<li><a href="#">Contact</a></li>
6
<li class="right"><a href="#">RSS</a></li>
7
</ul>
Mentre il codice CSS è il seguente:
view sourceprint?
01
body {
02
background-color: #eaeaea;
03
color: black;
04
font-family: Verdana, sans-serif;
05
font-size: 14px;
06
}
07
08
ul#menu {
09
width: 600px;
10
height: 40px;
11
background: url('menu.png') repeat-x;
12
margin: 50px auto;
13
line-height: 40px;
14
font-weight: bold;
15
16
border-radius: 10px;
17
-moz-border-radius: 10px;
18
-webkit-border-radius: 10px;
19
}
20
ul#menu li {
21
float: left;
22
list-style: none;
23
text-align: center;
24
width: 120px;
25
}
26
ul#menu li.right {
27
float: right;
28
text-align: right;
29
width: 50px;
30
padding-right: 10px;
31
}
32
ul#menu li a {
33
color: white;
34
text-decoration: none;
35
}
36
ul#menu li a:hover { color: #FFD1CF; }
Le icone
A questo punto possiamo inserire le icone utilizzando un semplice tag span all’interno del menu. Il menu diventa quindi:
view sourceprint?
1
<ul id="menu">
2
<li><a href="#"><span>!</span> Home</a></li>
3
<li><a href="#"><span>i</span> About Us</a></li>
4
<li><a href="#"><span>W</span> Services</a></li>
5
<li><a href="#"><span>m</span> Contact</a></li>
6
<li class="right"><a href="#"><span>r</span></a></li>
7
</ul>
I caratteri contenuti all’interno del tag span corrispondono alla lettere contenente l’icona che vogliamo utilizzare. Assegniamo ora il font adatto allo span con il seguente codice:
view sourceprint?
1
ul#menu span {
2
font-family: iconic_stroke, serif;
3
font-size: 20px;
4
}
e il risultato finale ottenuto è il seguente:
Pacman
Nostradamus
Magical Cat Adventure
Snake