Kierrä ja animoida kuvakkeita CSS: llä
Vielä kaukaisessa menneisyydessä oppimme vallankumouksellisia tekniikoita tallentamaan HTTP-pyyntöä ja KBS: ää samanaikaisesti käyttämällä kuvan spritsejä. Nämä spritit koostuivat kymmeniä tai jopa satoja kuvakkeita järjestetty kuvatiedosto, joka oli myöhemmin yhdistetty ja palvellut eri tavoin koko sivuston.
Olemme käyttäneet tekniikkaa hyvin, ja käytännössä jokainen skaalautuvuuteen liittyvä sivusto käyttää sitä.
Kiitos CSS3: n Transform and Transition -ominaisuuksien tuloksesta, voimme ottaa tämän askeleen eteenpäin ja käyttää muutamia ytimekkäitä koodilinjoja muuntamaan peruskuvakuvamalleja uusiksi kuvakkeiksi tulevaa käyttöä varten - ja jopa heittää animaatiota sekaan lisäbonuksen ansiosta !
Tekniikka on yhtä yksinkertainen ja intuitiivinen kuin kuvasyskirjoitus, ja sen avulla voidaan nopeasti ottaa käyttöön uusia kuvakkeita ilman, että koskaan on tarpeen muuttaa kuva-aihioita.
Kierrä kuvakkeita CSS: llä
Tutustu jQuery UI -kirjastoon otettuun spriteeseen. Selatessasi näet, että monet tässä luetelluista kuvista ovat todellisia muunnelmia perusmalleissa. Yhden kuvakkeen voi edustaa kymmenkunta eri tapaa ja sijoittaa samaan tiedostoon. Monet kuvakkeet ovat kirjaimellisesti vanhempiensa pyörivät versiot. Hyvä uutinen on CSS: n hyödyntäminen, mutta voimme käyttää täsmälleen samaa tekniikkaa ilman, että siihen on sisällytettävä kuvaviiveen muunnelmia.
Edellä olevasta esimerkistä voimme ottaa yhden kuvakkeen ja luoda sen omille tarkoituksillemme, sanoa yksinkertainen kaveri toisesta rivistä alaspäin. Muunnosominaisuuden avulla pystymme kääntämään tämän kruunun 45deg, 90deg, 180deg, ilmeisesti ja loputtomiin luoda monia eri muotoja samasta mallista.
Perusmalli (ylöspäin):
Seuraavalla koodilla vedetään kaveri päin kuvapisteen yläpuolelta ja se toimii peruspohjana.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Luo oikea säätö
Nuolen 90deg muuttaminen osoittaa nuolen oikealle, kuten alla näytetään:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Luo oikealle ylhäältä nuoli
Kierrä sitä vain 45deg ja saat mukavan pienen oikean yläkulman nuolen:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
Se on niin yksinkertaista. Käyttämällä tätä menetelmää voimme aloittaa yksinkertaisella kahdella kuvakkeella, ja hyvin vähän vaivaa luoda kuusi kertaa useampia kuvakkeita käytettäväksi käyttöliittymässä, mikä tietenkin on vasta alkua mitä voidaan tehdä.
Muutama muunnos, hieno paikannus ja ikoni-perheemme ovat kasvaneet melko vähän!
Animaation lisääminen sekoitukseen
Saat tappaja kokemus, voimme lisätä animaatio osaksi sekoitus. Ei vain, että muutetaan kuvakkeita, siirrämme ne muutoksen tekemiseksi käyttäjälle. Katsotaanpa toinen esimerkki, alkaen ylhäällä olevasta plusmerkistä.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
Yksi helppo 45deg kierros muuntaa plus -kuvakkeen kätevästi lähellä kuvaketta.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Nyt kun muutos toimii oikein, voimme lisätä siirtymisen sekoituskohtaan. Kuvittele, että sinulla on ominaisuus sivustossasi jakamaan nykyinen sivu erilaisten sosiaalisten verkostojen kautta. Kun napsautat plus- kuvaketta, avaat luettelon jakamisvaihtoehdoista, ja kun lista avautuu, plus siirtyy suljettuun kuvaketta hienon animaation kautta. Paras toteutus, jonka olen löytänyt, on FontBookin iPad-sovelluksessa. Tarkista niiden toteutus:
Se on tähti. Katsotaanpa, miten tämä kauneus tulee eloon. Aloita käyttämällä yläpuolella olevaa ylimääräistä kuvaketta. Jos haluat animoitua, lisää siirtymäominaisuus kuvakkeen päälle. Siirtymistämme määritellään ominaisuus (muunnos), kesto (0.2s) ja lopuksi mitä ajoitustoimintoa haluamme käyttää (lineaarinen).
.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;}Jälleen, se on niin yksinkertaista. Ei vain, että voimme luoda uusia kuvakkeita kirjastomme kanssa vain CSS: llä, voimme animoida ja antaa elämää mille tahansa elementille!
Käyttämällä opasiteettia enemmän lajikkeita
Viimeinen kuvakkeen kierrätysohjelma tulee olemaan läpinäkymättömyyden muodossa. Kun kopioit ydinkuvakkeet mustavalkoiseksi, voit luoda loputtoman määrän sävyjä / muunnoksia käytettäväksi koko sivustossasi tai sovelluksessasi.
Yllä olevan spriteen nelikuvamuunnos (kuten nähdään alla) voitaisiin helposti käyttää tusina kertaa niin monien kuvakkeiden luomiseksi ja lisäämällä tai vähentämällä opasiteettia, jonka voit sijoittaa tarpeen mukaan, ja silti ne näyttävät hyviltä.
On aika mennä vihreiksi: kierrättää CSS: llä
Koska CSS3 on saanut vetokuvan, Photoshop CS5: n kopio on alkanut kerätä pölyä ja hyvästä syystä! Tämä kuvakkeiden kierrätystekniikka mahdollistaa uusien versioiden ja versioiden käytön jatkuvasti käyttöliittymiin ilman, että sinun tarvitsee avata lähdetiedostoja ja lisätä hankalia kuvakkeita jatkuvasti laajentaviin spritteihin.
Kunnossapitoaika laskee, ja aikaa viettää kirjoja lukemalla kuten 4 tunnin työviikko nousee! Se on kaikki kulta.
Tietenkin kaikkein selkein haittapuoli kaikelle tämä on selain tuke, mutta viimeaikaisella työnnolla, jokainen käyttää moderneja selaimia, voimme hyödyntää uusia ja jännittäviä progressiivisia tekniikoita. Vapaasti selaa joitain esimerkkejä tämän tekniikan.
Millaisia muita tapoja olet voinut kierrättää sivustosi sisältöä?