I den ikke så fjerne fortiden lærte vi om revolusjonerende teknikker for å lagre HTTP-forespørsler og kBer ved bruk av bilde sprites. Disse sprites besto av titalls eller til og med hundrevis av ikoner arrangert i en bildefil som senere ble splevert og servert på en rekke måter gjennom et nettsted.

Vi har gjort god bruk av teknikken, og nesten alle nettsteder som er opptatt av skalerbarhet, benytter det.

Takket være adventen til CSS3s Transform og Transition egenskaper, kan vi ta dette et skritt videre, og bruke noen få kontekstlinjer, forvandle basikonikonmaler til nye ikoner for fremtidig bruk - og til og med kaste animasjon i mixen for en ekstra bonus !

Teknikken er så enkel og intuitiv som bildet sprites, og tillater bruk for raskt å distribuere nye ikoner uten å måtte endre bildet sprites.

Gjenvinning ikoner med CSS

Ta en titt på denne spriten hentet fra jQuery UI-biblioteket. Når du blar gjennom, vil du legge merke til at mange av ikonene som er oppført her, faktisk er variasjoner på basismaler. Et enkelt ikon kan bli representert på et dusin forskjellige måter, og plassert i samme fil. Mange ikoner er bokstavelig talt bare roterte versjoner av foreldrene sine. Den gode nyheten er at mens du bruker CSS, kan vi bruke nøyaktig samme teknikk uten å måtte inkludere variasjonene i bildesprite.

Fra eksemplet ovenfor kan vi ta et enkelt ikon og gjenskape det til egne formål, si en enkel chevron fra den andre raden ned. Med transformasjonsegenskapen kan vi rotere denne chevronen 45deg, 90deg, 180deg, åpenbart og på ubestemt tid for å lage mange forskjellige former fra samme mal.

Basemaler (pil opp):

Følgende kode vil trekke chevronen vendt opp fra bildet sprite, og vil fungere som vår base mal.

.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
upArrow

Opprett høyre arr ow

Ved å transformere vår pil 90deg, peker pilen til høyre, som vist nedenfor:

-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
rightArrow

Opprett øverste høyre pil

Roter det bare 45deg, og du får en fin liten øverste høyre pil:

-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
topRightArrow

Det er så enkelt. Ved hjelp av denne metoden kan vi starte med en enkel to-ikon-sprite, og med svært liten innsats opprette seks ganger så mange ikoner for bruk i grensesnittet vårt, som selvfølgelig bare er begynnelsen på hva som kan gjøres.

Noen få transformasjoner, noe fancy posisjonering, og vår ikonfamilie er vokst ganske mye!

Legger til animasjon til blandingen

For en killer opplevelse kan vi legge til animasjon i blandingen. Ikke bare vil vi forandre ikonene, vi overfører dem for å gjøre transformasjonen synlig for brukeren. La oss ta en titt på et annet eksempel, med utgangspunkt i plustegnet sett ovenfor.

.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
plusIcon

En enkel 45deg-rotasjon vil forvandle vårt plussikon til et praktisk, nært ikon.

.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
closeIcon

Nå som vår transformasjon fungerer som den skal, kan vi legge til en overgang til blandingen. Tenk deg at du har en funksjon på nettstedet ditt for å dele den nåværende siden gjennom en rekke sosiale nettverk. Når du klikker på plussikonet, åpnes listen over delingsalternativer, og mens listen åpnes, overgår plussen til et lukkeikon gjennom en subtil animasjon. Den beste implementeringen jeg har funnet for dette, er på FontBooks iPad-app. Sjekk ut gjennomføringen av dem:

FontBookiPad

Det er stjernene. La oss ta en titt på hvordan du får denne skjønnheten til liv. Begynn med å bruke vårt plussikon opprettet ovenfor. For å animere det, legg ganske enkelt til overgangsegenskapen i ikonet ditt. I overgangen spesifiserer vi egenskapen (transformer), varigheten (0.2s), og til slutt hvilken tidsfunksjon vi vil bruke (lineær).

.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;-webkit-transition: -webkit-transform 0.2s linear;-moz-transition: -moz-transform 0.2s linear;transition: transform 0.2s linear;cursor: pointer;}

Igjen er det så enkelt. Ikke bare kan vi lage nye ikoner for biblioteket vårt med bare CSS, vi kan animere og gi liv til et bestemt element!

Bruke opacity for mer variasjon

Det siste stykket med gjenvinning av ikon kommer til å spille i form av opacitetsegenskapen. Dupliserer kjerneikonene dine for svart og hvitt vil gi deg mulighet til å generere et uendelig antall nyanser / varianter for bruk over hele nettstedet ditt eller applikasjonen.

En firebildevariant (sett nedenfor) av spritet ovenfor kan enkelt brukes til å lage et dusin ganger så mange ikoner, og ved å øke eller redusere opaciteten kan du plassere dem der det er nødvendig, og fortsatt få dem til å se bra ut.

fullSpriteInverted

Det er på tide å gå grønt: resirkulere med CSS

Siden CSS3 har fått trekkraft, har min kopi av Photoshop CS5 begynt å samle støv, og med god grunn! Denne teknikken for gjenvinning av ikonene dine gjør det mulig å kontinuerlig distribuere nye versjoner og varianter til grensesnittene dine uten å måtte åpne opp kildefiler og legge til tungvint ikoner til stadig voksende sprites.

Vedlikeholdstiden går ned, og tiden din til å lese bøker som 4-timers arbeidsuke går opp! Det er alt gull.

Selvfølgelig er den mest åpenbare ulempen til alt dette nettleserstøtte, men med den siste pressen, vel, alle som bruker moderne nettlesere, vil vi kunne dra nytte av nye og spennende progressive teknikker. Føl deg fri til å bla gjennom noen eksempler av denne teknikken.

Hva er noen andre måter du har kunnet gjenvinne nettstedets eiendeler?