Cookie

TheJoe.it Into the (open) source

25mar/114

Bottoni menu di navigazione con CSS Sprites

dito_cattelan2

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.

24dic/102

CSS Sprites: il rollover con una sola immagine usando i CSS

contattaci_shoot

Torniamo a parlare di CSS. Oggi vediamo una tecnica da sempre consigliata per alleggerire le pagine e velocizzare i tempi di caricamento (non per niente da anni è utilizzata sulla homepage di Google).

In breve si tratta di includere la maggior parte degli elementi di navigazione della pagina all'interno di un unico file immagine, per poi richiamarlo tante volte quante ne richiederà la pagina evitando così il caricamento di più immagini differenti.