Le miniature sono uno dei più puri pezzi di usabilità che l'era digitale ha creato. In sostanza una miniatura è un'anteprima, una promessa di ciò che vedrai se clicchi sul link. Un piccolo assaggio con meno dati, più veloce da caricare e meno avido per lo schermo immobiliare rispetto alla risorsa di dimensioni normali. Sono ideali per le immagini, ma per quanto riguarda il video?
Bene, estendendo una tecnica che usiamo già per gli stati dei pulsanti, possiamo creare miniature animate sorprendenti con CSS di base e un po 'di jQuery.
Oggigiorno, le velocità di download non sono un problema per gli sviluppatori web. Ovviamente, sono ancora desiderabili file di dimensioni ridotte, ma il vero problema di prestazioni nella maggior parte dei siti è il numero di richieste HTTP. Ogni volta che il tuo sito carica una risorsa, il browser effettua una richiesta HTTP che viene inviata, elaborata e quindi restituita. Controlla la tua console, vedrai che gran parte del ritardo sul tuo sito non ha nulla a che fare con le dimensioni dell'immagine, è trascorso in attesa di una risposta del server.
La soluzione è la tecnica CSS sprite; cucitura di più immagini in un singolo file immagine e quindi in modo selettivo la visualizzazione di diverse parti di quell'immagine usando CSS.
Tradizionalmente, per qualsiasi pulsante che non possiamo creare con stili CSS di base, creeremmo tre stati; un off , un over e un down :
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}Ciò comporterebbe il download di tre immagini dal server e la generazione di tre richieste HTTP.
Costruendo questo come uno sprite CSS, salviamo tutte e tre le immagini una accanto all'altra in un singolo file (in modo che invece di avere tre immagini di 200px di larghezza abbiamo un'immagine di 600px) e cambiamo la posizione dell'immagine usando la proprietà di background-position di CSS :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Pensa all'elemento come a una finestra, attraverso la quale visualizzi l'immagine. È possibile spostare l'immagine in giro, ma la finestra rimane nella stessa posizione. A condizione che si assicuri che l'elemento abbia le stesse dimensioni della parte dell'immagine che si desidera visualizzare, l'effetto è senza cuciture: