Miniatyrbilder er en av de reneste bruksmulighetene som den digitale tidsalderen har skapt. I hovedsak er et miniatyrbilde en forhåndsvisning, et løfte om hva du vil se hvis du klikker koblingen. Et lite glimt med færre data, raskere å laste og mindre grådige for skjermeiendom enn den fullstendige eiendelen. De er ideelle for bilder, men hva med video?
Vel, ved å utvide en teknikk som vi allerede bruker for knappestater, kan vi lage fantastiske animerte miniatyrbilder med grunnleggende CSS og et lite jQuery.
I dag er nedlastingshastigheter ikke et slikt problem for webutviklere. Selvfølgelig er små filstørrelser fortsatt ønskelige, men den virkelige ytelsen på de fleste nettsteder er antall HTTP-forespørsler. Hver gang nettstedet ditt laster en ressurs, gjør nettleseren en HTTP-forespørsel som sendes, behandles og deretter returneres. Kontroller konsollen din, du får se at mye av forsinkelsen på nettstedet ditt ikke har noe å gjøre med bildestørrelse, det er brukt til å vente på et serverrespons.
Løsningen er CSS sprite teknikken; sy i flere bilder til en enkelt bildefil og deretter selektivt vise forskjellige deler av bildet ved hjelp av CSS.
Tradisjonelt, for alle knapper vi ikke kan lage med grunnleggende CSS-stiler, oppretter vi tre stater; en av , en over og en ned :
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}Dette ville føre til at tre bilder lastes ned fra serveren og generere tre HTTP-forespørsler.
Bygg dette som en CSS-sprite, vi lagrer alle tre bildene ved siden av hverandre i en enkelt fil (slik at i stedet for å ha tre 200px brede bilder har vi et 600px bredt bilde) og endre posisjonen til bildet ved hjelp av CSSs bakgrunnsposisjonseiendom :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Tenk på elementet som et vindu, hvor du ser bildet. Du kan flytte bildet rundt, men vinduet forblir i samme posisjon. Forutsatt at du sikrer at elementet har samme størrelse som delen av bildet du vil vise, er effekten sømløs: