Miniaturebilleder er en af de reneste anvendelsesmuligheder, som den digitale tidsalder har skabt. En miniature er i hovedsagen et eksempel, et løfte om, hvad du vil se, hvis du klikker på linket. Et lille glimt med færre data, hurtigere at indlæse og mindre grådige til skærmfast ejendom end det fulde aktiv. De er ideelle til billeder, men hvad med video?
Nå ved at udvide en teknik, som vi allerede bruger til knapstilstande, kan vi skabe fantastiske animerede miniaturebilleder med grundlæggende CSS og lidt jQuery.
I dag er downloadhastigheder ikke et sådant problem for webudviklere. Selvfølgelig er små filstørrelser stadig ønskelige, men det rigtige resultat på de fleste websteder er antallet af HTTP-anmodninger. Hver gang dit websted indlæser et aktiv, laver browseren en HTTP-anmodning, som sendes, behandles og derefter returneres. Tjek din konsol, du vil se, at meget af forsinkelsen på dit websted ikke er noget at gøre med billedstørrelse, det bruges til at vente på et serverrespons.
Løsningen er CSS sprite teknikken; syning af flere billeder i en enkelt billedfil og derefter selektivt visning af forskellige dele af billedet ved hjælp af CSS.
Traditionelt vil vi oprette tre stater for enhver knap, som vi ikke kan oprette med grundlæggende CSS-stilarter. en off , 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 medføre at tre billeder hentes fra serveren og generere tre HTTP-anmodninger.
Hvis du bygger dette som en CSS-sprite, gemmer vi alle tre billeder ved siden af hinanden i en enkelt fil (så i stedet for at have tre 200px brede billeder, har vi et 600px bredt billede) og ændrer billedets position ved hjælp af CSSs baggrundsstatusegenskab :
.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 et vindue, hvorigennem du ser billedet. Du kan flytte billedet rundt, men vinduet forbliver i samme position. Forudsat at du sikrer, at elementet er af samme størrelse som den del af billedet, du vil vise, er effekten sømløs: