Miniatyrer är en av de renaste användningsområdena som den digitala tiden har skapat. I huvudsak är en miniatyrbild en förhandsvisning, ett löfte om vad du ska se om du klickar på länken. En liten glimt med mindre data, snabbare att ladda och mindre girig för skärmfastigheter än den fullstora tillgången. De är idealiska för bilder, men hur är det med video?
Tja, genom att utöka en teknik som vi redan använder för knapptillstånd, kan vi skapa fantastiska animerade miniatyrbilder med grundläggande CSS och lite jQuery.
Numera är nedladdningshastigheter inte ett sådant problem för webbutvecklare. Självklart är små filstorlekar fortfarande önskvärda, men den verkliga prestationsfliken på de flesta webbplatser är antalet HTTP-förfrågningar. Varje gång din webbplats laddar en tillgång, gör webbläsaren en HTTP-begäran som skickas, bearbetas och returneras. Kontrollera din konsol, du ser att mycket av förseningen på din webbplats inte har något att göra med bildstorlek, det spenderas väntar på ett serverns svar.
Lösningen är CSS sprite tekniken; sy flera bilder i en enda bildfil och sedan selektivt visa olika delar av den bilden med hjälp av CSS.
Traditionellt kan vi skapa tre stater för alla knappar som vi inte kan skapa med grundläggande CSS-stilar. en av , en över och en nedåt :
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}Detta skulle leda till att tre bilder laddas ner från servern och generera tre HTTP-förfrågningar.
Genom att bygga detta som en CSS-sprite lagrar vi alla tre bilderna bredvid varandra i en enda fil (så att istället för att ha tre 200px breda bilder har vi en 600px bred bild) och ändra positionen för bilden med hjälp av CSSs bakåtpositionsegenskap :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Tänk på elementet som ett fönster, genom vilket du ser bilden. Du kan flytta bilden runt, men fönstret stannar i samma position. Förutsatt att du ser till att elementet är lika stort som den del av bilden du vill visa är effekten sömlös: