Endurvinnsla og hreyfimyndir með CSS
Í svo fjarlægu fortíðinni vorum við að læra um byltingarkenndar aðferðir til að spara HTTP Request og KBs eins með því að nota sprites mynda. Þessar sprites samanstóð af tugum eða jafnvel hundruðum tákna sem raðað voru í myndskrá sem síðar var flutt og þjónað á ýmsan hátt á vefsíðu.
Við höfum nýtt okkur tækið vel, og nánast hvert vefsvæði sem fjallar um sveigjanleika, notar það.
Þökk sé tilkomu Transform og Transition eiginleika CSS3, getum við tekið þetta skref lengra og notað nokkrar nákvæmar línur af kóða, umbreyttum grunnmálsskjalum í nýja tákn til framtíðarnotkunar - og jafnvel kasta hreyfimyndum í blandaðinn til viðbótar bónus !
Tæknin er eins einföld og innsæi eins og mynd var sprites og leyfir notendum að flýta nýjum táknum hratt án þess að þurfa að breyta myndinni sprites.
Endurvinnslutákn með CSS
Kíktu á þetta sprite úr jQuery UI bókasafninu. Eins og þú flettir í gegnum, munt þú taka eftir því að mörg táknin sem hér eru taldar eru í raun afbrigði af grunnmálum. Ein stakur tákn gæti verið fulltrúi á tugi mismunandi vegu og settur í sömu skrá. Margir tákn eru bókstaflega bara snúnar útgáfur foreldra sinna. Góðu fréttirnar eru á meðan CSS er notaður, við getum beitt nákvæmlega sömu tækni án þess að þurfa að taka tillit til breytinga á myndsprite.
Frá dæminu hér fyrir ofan getum við tekið eitt tákn og endurskapað það í eigin tilgangi, segið einfalt chevron frá annarri röðinni niður. Með umbreytingareigninni getum við snúið þessu 45deg, 90deg, 180deg, augljóslega og óendanlega til að búa til margar mismunandi gerðir úr sama sniðmáti.
Undirstaða sniðmát (upp ör):
Eftirfarandi kóði mun draga kókruna sem snúa upp frá myndsprite og mun þjóna sem grunnsniðið.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Búðu til réttar reglur ow
Að umbreyta örinni okkar 90deg mun benda á örina til hægri, eins og sýnt er hér að neðan:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Búðu til hægri efst til hægri
Snúðu það bara 45deg og þú færð fallegt lítið efst hægra hornið:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
Það er svo einfalt. Með því að nota þessa aðferð, getum við byrjað með einföldum tveimur táknmyndum, og með mjög litlum fyrirhöfn búið til sex sinnum eins mörg tákn til notkunar í tengi okkar, sem auðvitað er bara upphafið af því sem hægt er að gera.
Nokkrar umbreytingar, nokkrar ímyndaðar stöður og táknmyndin okkar hefur vaxið svolítið!
Bætir fjör við blönduna
Fyrir killer reynslu, getum við bætt fjör í blanda. Ekki aðeins munum við umbreyta táknunum, við munum breyta þeim til að gera umbreytinguna sýnilegt notandanum. Lítum á annað dæmi, byrjaðu með plús skilti sem sést hér að ofan.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
Ein þægileg 45deg snúningur mun umbreyta plús táknið okkar í handhæga lokaáknið.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Nú þegar umbreytingin okkar virkar rétt, getum við bætt við umskipti í blönduna. Ímyndaðu þér að þú sért með eiginleika á vefsvæðinu þínu til að deila núverandi síðu með ýmsum félagslegum netum. Með því að smella á plúsáknið opnast listinn yfir hlutdeildarvalkosti og á meðan listinn er opnaður skiptir plúsin yfir í lokað tákn með lúmskur fjör. Besta framkvæmdin sem ég hef fundið fyrir þessu er á iPadBook forritinu. Skoðaðu framkvæmd þeirra:
Það er stjörnu. Skulum líta á hvernig á að gera þessa fegurð að lifa. Byrjaðu með því að nota plús táknið okkar búið til hér að ofan. Til að laga það, skaltu einfaldlega bæta við umskiptareiginleikanum inn í táknið þitt. Í umskipti okkar tilgreinum við eignina (umbreytinguna), lengd (0.2s) og loks hvaða tímasetningaraðgerð við viljum nota (línuleg).
.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;}Aftur er það svo einfalt. Ekki aðeins getum við búið til nýjar tákn fyrir bókasafnið okkar með aðeins CSS, við getum búið til og gefið líf að einhverju leyti!
Notkun ógagnsæi fyrir fleiri fjölbreytni
Endanlegt stykki táknið endurvinnslu kemur að spila í formi ógagnsæðar eignarinnar. Með því að afrita algerlega táknin þín fyrir svörtu og hvítu leyfir þér að búa til óendanlega fjölda tónum / afbrigði til notkunar á vefsvæðinu þínu eða forriti.
Fjögur myndbrigði (eins og sést hér að neðan) af sprite hér að ofan gæti auðveldlega verið notaður til að búa til tugi sinnum eins mörg tákn og með því að auka eða minnka ógagnsæi sem þú getur sett þeim þar sem þörf er á og ennþá líta vel út.
Það er kominn tími til að fara grænn: endurvinna með CSS
Eins og CSS3 hefur fengið grip hefur afrit mitt af Photoshop CS5 byrjað að safna ryki og af góðri ástæðu! Þessi aðferð við endurvinnslu táknin þín gerir þér kleift að stöðugt senda nýjar útgáfur og afbrigði við tengi þína án þess að þurfa að opna skrár og bæta við óþægilegum táknum til sívaxandi sprites.
Viðhaldstíminn fer niður og tíminn þinn er að lesa bækur eins og 4 klst. Vinnuvikan fer upp! Það er allt gull.
Auðvitað er augljósasta hækkunin á þessu öllu að styðja vafra, en með nýlegum aðferðum, vel, allir að nota nútíma vafra, munum við geta nýtt sér nýja og spennandi framsækna tækni. Feel frjáls til skoðaðu nokkur dæmi af þessari tækni.
Hvað eru nokkrar aðrar leiðir sem þú hefur tekist að endurvinna eignir vefsvæðis þíns?