CSS Sprites (Menu con i CSS Sprites)
Pubblicato: 3 August 2012 Mai Modificato
Ed ecco un altro, spero atteso, numero del Video Giornale [OBIV].it !!! Con voi c'è Artur Mamedov e parliamo dei CSS , si dei fogli dei stile. Ho visto che non ostante tutti puntano ad ottimizzare la velocità del proprio sito, non molti conoscono o scelgono di utilizzare i CSS Sprites. E questa tecnica non è da sottovalutare perchè non solo permette di fare menu favolosi che consumano pochissimo spazio, e quindi si caricano in un batter d'occhio, ma studiata e utilizzata su tutta la grafica abituale del sito permette di risparmiare interi megabyte nel caricamento del sito, e questo piace tutti, si, più velocemente si carica il sito più è piacevole navigarci, più google vi considera, più persone , più tutto :) Passiamo ai fatti, la tecnica consiste nel unire tutte le immagini ,della grafica, in una sola immagine e con i CSS ruotare,spostare e visualizzare solo il frammento che ci interessa (es: ImageSpritesMenu , ImageSpritesTwitterBootstrap) Ecco, noi in questo Video Giornale, meglio dire in questi ,per ora, tre VideoLezioni parleremo dei CSS Sprites, li creeremo (dal Web e con Photoshop) e li applicheremo per fare un menu che ha quattro stati normal/hover/active/current ( demo del menu ). Naturalmente tutto spiegato e spezzettato da me ... per voi … Buona visione e buon lavoro!
Cliccate qui per scaricare i file
CSS Sprites Parte1 (Cosa? Dove? Perche? Quando?)
Nella Prima VideoLezione vediamo un introduzione ai CSS Sprites e rispondendo a domande: Cosa sono i CSS Sprites? A Cosa servono? Come funzionano i CSS Sprites? Dove servono? Dove applicarli? Perche usarli? Perche sono cosi importanti? E per l'ultima domanda: Quando? Vi dico ORA! Ora mettete in play e scoprite l'utilità di questa tecnica CSS.
CSS Sprites Parte2 (Creare Image Sprites)
Viste "le basi" dei CSS Sprites passiamo alla loro creazione. Esamineremo diversi metodi per creare CSS Sprites, anzi più correttamente, creare Image Sprites. Il primo e il metodo dal Web, per chi ha già pronte delle immagini, il secondo e da Photoshop sempre con immagini già pronte per chi avesse della grafica sul sito e la volesse riutilizzare. E il terzo modo, il mio preferito e quello con cui continuiamo poi a fare il resto, creare un nostro Image Sprites da zero in Photoshop. Quello che faremo esattamente è disegnare i quattro stati del menu in Photoshop.
CSS Sprites Parte3 (Scriviamo il codice HTML e CSS per il menu)
E siamo arrivati alla fine , sempre se non si vedranno abbastanza domande nei commenti da farmi fare la VideoLezione di completamento. E qui finalmente vediamo, anzi scriviamo i codici HTML e CSS per il nostro menu. Prima una struttura al menu con HTML5 naturalmente, poi passiamo ai CSS e scriviamo lo stato normale con le immagini al suo posto, per lo stato hover basterà cambiare il background-position, stessa cosa per lo stato active: si cambia valore a background-position e abbiamo un nuovo stato menu. E per ultimo, ancora grazie ai CSS Sprites, spostiamo l'immagine con background-posititon nella parte che ci serve per il current e per ogni pagina attiviamolo dal body e i CSS.
E cosi, se avete visto tutte e tre le VideoLezioni, abbiamo creato un menu che ha lo stato hover, active e current. E tutto è in una sola immagine,detta Image Sprites, che viene spostata grazie ai CSS, con la tecnica CSS Sprites.
Grazie dell'attenzione, vi aspetto con piacere nei commenti, Artur Mamedov.
comments powered by Disqus