Återvinning och animering ikoner med CSS
I det inte så avlägsna förflutet lärde vi oss om revolutionerande tekniker för att spara både HTTP Request och KBs genom användning av bildsprites. Dessa sprites bestod av tiotals eller till och med hundratals ikoner arrangerade i en bildfil som senare splitsades och serverades på olika sätt på en webbplats.
Vi har utnyttjat tekniken bra, och nästan alla webbplatser som berör skalbarhet använder det.
Tack vare adventen av CSS3: s Transform och Transition-egenskaper kan vi ta det här ett steg längre och använda några korta kodkod, omvandla basikonmallar till nya ikoner för framtida användning - och till och med kasta animering i mixen för en extra bonus !
Tekniken är lika enkel och intuitiv som bilden sprites, och tillåter användning för att snabbt distribuera nya ikoner utan att någonsin behöva ändra bildsprites.
Återvinning ikoner med CSS
Ta en titt på den här spriten från jQuery UI-biblioteket. När du bläddrar igenom märker du att många av de ikoner som listas här är faktiskt variationer på basmallar. En enda ikon kan representeras på ett dussin olika sätt och placeras i samma fil. Många ikoner är bokstavligen bara roterade versioner av sina föräldrar. Den goda nyheten är att när vi använder CSS kan vi använda exakt samma teknik utan att behöva inkludera variationerna i bildsprite.
Från exemplet ovan kan vi ta en enda ikon och återskapa den för egna ändamål, säg en enkel chevron från den andra raden ner. Med transformationsegenskapen kan vi rotera denna chevron 45deg, 90deg, 180deg, uppenbarligen och obestämt för att skapa många olika former från samma mall.
Basmall (uppåtpil):
Följande kod kommer att dra chevronen vänd uppåt från bildsprite, och kommer att fungera som vår basmall.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Skapa rätt arr ow
Omvandlar vår pil 90deg pekar pilen till höger, som visar nedan:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Skapa högra pil upp
Vrid det bara 45deg och du får en trevlig liten övre högra hörnpil:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
Det är så enkelt. Med hjälp av den här metoden kan vi börja med en enkel två ikonsprite, och med mycket liten ansträngning skapar vi sex gånger så många ikoner för användning i vårt gränssnitt, vilket givetvis bara är början på vad som kan göras.
Några transformationer, lite fina positioner och vår ikonfamilj har vuxit ganska lite!
Lägger till animering i mixen
För en mördareupplevelse kan vi lägga till animering i mixen. Inte bara ska vi förvandla ikonerna, vi överför dem för att göra omvandlingen synlig för användaren. Låt oss titta på ett annat exempel, med början på plustecknet sett ovan.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
En enkel 45deg rotation kommer att omvandla vår plus-ikon till en praktisk, nära ikon.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Nu när vår omvandling fungerar korrekt kan vi lägga till en övergång till mixen. Tänk dig att du har en funktion på din webbplats för att dela den aktuella sidan via en mängd olika sociala nätverk. Om du klickar på plus- ikonen öppnas listan över delningsalternativ och medan listan öppnas övergår pluset till en nära ikon genom en subtil animering. Det bästa genomförandet jag hittat för detta är på FontBooks iPad-app. Kolla in deras genomförande:
Det är stjärnligt. Låt oss ta en titt på hur man gör denna skönhet till liv. Börja med att använda vår plus-ikon som skapats ovan. För att animera det, lägg bara till övergångsegenskapen i din ikon. I vår övergång specificerar vi egenskapen (transform), längden (0.2s) och slutligen vilken tidsfunktion vi vill använda (linjä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;}Återigen är det så enkelt. Inte bara kan vi skapa nya ikoner för vårt bibliotek med endast CSS, vi kan animera och ge livet till ett visst element!
Använda opacitet för mer variation
Den sista delen av ikonen återvinning kommer att spela i form av opacity egendom. Duplicera dina kärnikoner för svartvitt gör att du kan skapa ett oändligt antal nyanser / varianter för användning över hela din webbplats eller applikation.
En fyrbildsvariant (se nedan) av spritet ovan kan enkelt användas för att skapa ett dussin gånger så många ikoner, och genom att öka eller minska opaciteten kan du placera dem där så är nödvändigt och fortfarande få dem att se bra ut.
Det är dags att gå grönt: återvinna med CSS
Eftersom CSS3 har fått dragkraft har min kopia av Photoshop CS5 börjat samla damm och med god anledning! Denna teknik för återvinning av dina ikoner gör att du kontinuerligt kan distribuera nya versioner och varianter till dina gränssnitt utan att behöva öppna källfiler och lägga till tunga ikoner för ständigt växande sprites.
Underhållstiden går ner, och din tid på att läsa böcker som 4 timmars arbetsvecka går upp! Det är allt guld.
Självklart är den uppenbara nackdelen med allt detta webbläsarstöd, men med den senaste pressen, ja, alla som använder moderna webbläsare, kommer vi att kunna dra nytta av nya och spännande progressiva tekniker. Känn dig fri att bläddra igenom några exempel av denna teknik.
Vilka andra sätt har du kunnat återvinna webbplatsens tillgångar?