Genbrug og animering ikoner med CSS
I den ikke så fjerne fortid lærte vi om revolutionerende teknikker for at gemme HTTP Request og KB'er gennem brug af image sprites. Disse sprites bestod af titus eller endog hundredvis af ikoner arrangeret i en billedfil, der senere blev splejset og serveret på en række måder på en hjemmeside.
Vi har gjort en god udnyttelse af teknikken, og næsten alle sider, der beskæftiger sig med skalerbarhed, anvender det.
Takket være fremkomsten af CSS3s Transform og Transition egenskaber kan vi tage dette et skridt videre, og ved at bruge et par koncise linjer med kode, omdannes basikonikonskabeloner til nye ikoner til fremtidig brug - og endda smider animation i mixen for en ekstra bonus !
Teknikken er så enkel og intuitiv, som det var billedsprites, og giver mulighed for hurtigt at implementere nye ikoner uden at skulle ændre billedsprites.
Genbrug ikoner med CSS
Tag et kig på dette sprite taget fra jQuery UI biblioteket. Som du gennemser, vil du bemærke, at mange af de ikoner, der er anført her, faktisk er variationer på basisskabeloner. Et enkelt ikon kan repræsenteres på en halv snes forskellige måder og placeres i samme fil. Mange ikoner er bogstaveligt talt bare roterede versioner af deres forældre. Den gode nyhed er, at mens vi bruger CSS, kan vi anvende den nøjagtig samme teknik uden at skulle medtage variationerne i billedsprit.
Fra ovenstående eksempel kan vi tage et enkelt ikon og genskabe det til vores eget formål, sig en simpel chevron fra anden række ned. Med transformationsegenskaben kan vi rotere denne chevron 45deg, 90deg, 180deg, selvfølgelig og på ubestemt tid for at skabe mange forskellige former fra samme skabelon.
Basisskabelon (pil op):
Følgende kode vil trække chevronen vendt opad fra billedsprit, og vil fungere som vores base skabelon.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Opret højre arr ow
Ved at omdanne vores pil 90deg vil pilen pege til højre, som vist nedenfor:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Opret øverste højre pil
Drej det kun 45deg, og du får en dejlig lille øverste højre pil:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
Det er så simpelt. Ved hjælp af denne metode kan vi starte med en simpel to-ikon-sprite og med meget lidt indsats oprette seks gange så mange ikoner til brug i vores grænseflade, hvilket selvfølgelig bare er begyndelsen på hvad der kan gøres.
Et par transformationer, en fancy positionering og vores ikonfamilie er vokset en del!
Tilføjelse af animation til mixen
For en killer oplevelse kan vi tilføje animation til mixen. Ikke alene vil vi forvandle ikonerne, vi overfører dem for at gøre transformationen synlig for brugeren. Lad os se på et andet eksempel, begyndende med plustegnet set ovenfor.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
En nem 45deg rotation vil omdanne vores plus-ikon til et praktisk tæt ikon.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Nu hvor vores transformation fungerer korrekt, kan vi tilføje en overgang til blandingen. Forestil dig, at du har en funktion på dit websted for at dele den aktuelle side gennem en række sociale netværk. Når du klikker på plus- ikonet, åbnes listen over delingsindstillinger, og mens listen åbnes, overføres pluset til et tæt ikon gennem en subtil animation. Den bedste implementering, jeg har fundet herfor, er på FontBooks iPad-app. Tjek deres gennemførelse:
Det er stjernernes. Lad os tage et kig på, hvordan man får denne skønhed til liv. Start med at bruge vores plus-ikon oprettet ovenfor. For at animere det, skal du blot tilføje overgangsegenskaben til dit ikon. I vores overgang specificerer vi ejendommen (transform), varigheden (0.2s) og endelig hvilken timingsfunktion vi vil bruge (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;}Igen er det så simpelt. Ikke alene kan vi oprette nye ikoner til vores bibliotek med kun CSS, vi kan animere og give livet til et bestemt element!
Brug af opacitet for mere variation
Det sidste stykke ikon genbrug kommer til at spille i form af opacitet egenskaben. Duplicere dine kerneikoner til sort / hvid vil give dig mulighed for at generere et uendeligt antal nuancer / varianter til brug over hele dit websted eller applikation.
En fire-billedvariant (som set nedenfor) af spritet ovenfor kunne let bruges til at skabe et dusin gange så mange ikoner, og ved at øge eller formindske opaciteten kan du placere dem, hvor det er nødvendigt, og stadig få dem til at se godt ud.
Det er tid til at gå grønt: Genbruge med CSS
Da CSS3 har fået trækkraft, har min kopi af Photoshop CS5 begyndt at samle støv og med god grund! Denne teknik til genbrug af dine ikoner giver dig mulighed for løbende at installere nye versioner og varianter til dine grænseflader uden at skulle åbne kildefiler og tilføje tunge ikoner til evigt voksende sprites.
Vedligeholdelsestiden går ned, og din tid til at læse bøger som 4-timers arbejdsugen går op! Det er alt guld.
Selvfølgelig er den mest åbenlyse ulempe for alt dette browsersupport, men med den nylige push, vel, alle til at bruge moderne browsere, vil vi kunne udnytte nye og spændende progressive teknikker. Du er velkommen til gennemse nogle eksempler af denne teknik.
Hvad er andre måder, du har været i stand til at genbruge dit websites aktiver?