Bottoni menu di navigazione con CSS Sprites
Attenzione
Questo articolo è stato pubblicato più di un anno fa, potrebbero esserci stati sviluppi.
Ti preghiamo di tenerne conto.
Nel tutorial di oggi torniamo a parlare di grafica HTML ed integrazione CSS. In un mio articolo di qualche mese fa parlavo della tecnica (largamente usata anche da Google) dei CSS sprites. In pratica consiste nell’inserire la maggior parte di immagini ripetute più volte all’interno della pagina in un’unica grande immagine, che verrà richiamata più volte con il nostro CSS.
Per una questione di preferenze personali tendo ad evitare di usare Gimp ogni volta che devo creare una diversa voce del menù di navigazione, preferisco creare i soli sfondi dei bottoni e poi ragionare sugli stili tramite i CSS. In questo modo innanzitutto il menù è meglio indicizzato dai motori di ricerca, in secondo luogo evito di “sprecare” il tempo per crearmi ad ogni bottone una nuova immagine.
Quella dei CSS sprites è una tecnica ormai consolidata, che non solo velocizza i tempi di load della pagina, ma ne aumenta la compatibilità su browser differenti.
Oggi vediamo come creare un semplice, quanto accattivante menù di navigazione con questa tecnica. Quello che segue è il risultato.
Iniziamo creando lo “scheletro” del nostro menù in una pagina HTML.
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<a href="#" class="button">Info</a>
<a href="#" class="button">Chi siamo</a>
<a href="#" class="button">Contattaci...</a>
</div>
</body>
</html>
Come vedete ho già richiamato un file CSS esterno chiamato “style.css“.
Ora possiamo creare lo sfondo per il nostro bottone. Il seguente (qui a lato) è quello che ho adottato io, ingrandito del 550%. Le dimensioni reali sono 2px di larghezza x 56px di altezza. Anche se non è semplice da notare si tratta di un file verticale diviso a metà; quella superiore sarà quella visibile normalmente, quella inferiore verrà caricata al passaggio del mouse. Per entrambe le metà ho usato un gradiente con colori differenti, ma lo vediamo meglio ora.
Una volta creato il nostro “sprite” dovremo richiamarlo all’interno del CSS.
a.button {
float: left;
height:20px;
padding: 5px 10px;
border: 1px solid #c96111;
background: #e2721b url(images/button_sprites.png) repeat-x 0 0;
text-decoration: none;
font-size: 15px;
font-weight: bold;
font-family:'Hoefler Text',Constantia,Cambria,Georgia,serif;
line-height: 20px;
color: #fff;
}
a.button:hover {
border: 1px solid #2f4c13;
background: #4a781d url(images/button_sprites.png) repeat-x 0 -30px;
}
Le righe che ci interessano sono la #6 e la #16: le voci “background”. Come vedete il file immagine richiamato è solo uno: “button_sprites.png” con differenti coordinate. Ho impostato la ripetizione in orizzontale ed un background per entrambi i casi.
Il resto delle istruzioni altro non fa che aggiungere un bordo di un pixel più scuro a seconda che il mouse sia sopra il bottone o altrove. Ho anche impostato dimensioni e font specifici.
Il risultato è semplice ma attraente, con un tocco di glossy.
4 commenti
Apache 72 · 13 Agosto 2012 alle 10:11 AM
volevo farlo per velocizzare un po’ il sito, le immagini non sono così tante come sembra, il problema è che non ho sezione con id “container” li.
quindi prima di imbattermi ti chiedo se si può fare comunque
grazie!
TheJoe · 13 Agosto 2012 alle 10:58 AM
Per potersi fare si può fare, ma se non sai cosa sia un “id” forse è meglio che prima ti eserciti un po’. 😉
Comunque ti consiglio di tenere d’occhio questo blog, probabilmente nel prossimo articolo pubblicherò un breve tutorial che ti interesserà sicuramente.
Apache 72 · 13 Agosto 2012 alle 7:57 AM
ho utilizzato css generator ed ho ottenuto i codici per un’unica immagine css spriter.
Come faccio ora ad inserirla nel sito?
ho caricato la nuova immagine ottenuta con css spriter in …/miotema/images, dove ci sono anche le altre.
ora nel foglio di stile mi dice css generator di inserire
#container li { background: url(csg-50289151dcb6a.png) no-repeat top left; }
e le css rules per le immagini.
la domanda è:
nel mio foglio css ci sono varie sezioni di background che richiamano le varie immagini (che io ho assemblato), su righe diverse e non in un solo richicamo , quindi come devo fare?
TheJoe · 13 Agosto 2012 alle 8:44 AM
Vedo che il tema del sito (se si tratta del sito che hai linkato) è molto complesso, può essere lungo e frustrante improvvisarsi designer con un tema così complicato. Detto ciò, se proprio vuoi cimentarti, passiamo alla pratica.
Non amo soluzioni come i generatori automatici, tuttavia le regole per l’inclusione di uno sprite restano sempre le stesse.
0_ (opzionale) creare una copia di backup prima di iniziare. Potrebbe salvarci la vita,
1_ caricare le immagini nella directory delle… appunto delle immagini,
2_ caricare il nuovo css nella directory dei… appunto dei css,
3_ controllare che il css riferisca alle immagini e non a path assoluti,
4_ includere il nuovo css nella sezione “head” del sito,
5_ verificare che non ci siano istruzioni nei diversi css che vadano in conflitto le une con le altre,
6_ caricare tutto online.
Nel tuo caso verifica di avere una sezione con id “container” che abbia al suo interno un elenco “li”. Solo così la regola css può funzionare. Se poi ci sono conflitti devi assegnare un “id” o una “classe” diversa ad ogni rispettivo tag. Detto così può sembrare facile, ma il più delle volte è un lavoro lungo che le prime volte comporta anche una ingente perdita di tempo. Ti consiglio di farti aiutare da qualcuno che sappia lavorare con i css, oppure di dedicarci più tempo che puoi, perché il problema non si può risolvere con un commento all’articolo. 🙂