Manafaingana ny tranokalanao amin'ny CSS Sprites

tranonkala spritemaster

Manoratra momba ny hafainganam-pejy ihany aho amin'ity tranonkala ity ary ampahany lehibe amin'ny famakafakana sy ny fanatsarana ataonay amin'ireo tranokalan'ny mpanjifanay izany. Ankoatry ny fifindrana mankany amin'ny lohamilina matanjaka sy ny fampiasana fitaovana toa Tambajotra fanaterana atiny, misy teknika fandaharana maro hafa azon'ny mpandrindra tranonkala antonony ampiasaina.

Ny fenitra ho an'ny Cascading Style Sheet tany am-boalohany dia mihoatra ny 15 taona ankehitriny. CSS dia fivoarana lehibe teo amin'ny fampandrosoana tranonkala satria nanasaraka ny atiny sy ny endriny. Zahao ity bilaogy ity ary ny hafa ary ny ankamaroan'ny fahasamihafana eo amin'ny fampiasa dia eo amin'ny takelaka misy azy fotsiny. Zava-dehibe ihany koa ny Stylesheets satria voatahiry eo an-toerana ao anaty cache ao anatin'ny browser-nao. Vokatr'izany, rehefa manohy mitsidika ny tranokalanao ny olona dia tsy misintona takelaka fanoritana isaky ny mandeha… ny atin'ny pejy fotsiny.

Singa iray amin'ny CSS izay matetika no tsy ampiasaina CSS Sprites. Rehefa mitsidika ny tranonkalanao ny mpampiasa iray dia mety tsy ho tsapanao fa tsy manao fangatahana iray fotsiny ho an'ilay pejy izy ireo. izy ireo manaova fangatahana maro… Fangatahana pejy, na takelaka misy style, na fisie rakitra JavaScript, avy eo ny sary tsirairay. Raha manana lohahevitra ianao izay manana andian-tsary ho an'ny sisintany, bara fitetezana, fiaviana, bokotra sns ... ny browser dia mila mangataka tsirairay avy isaky ny mpizara tranonkala anao. Ampitomboy izany amin'ny mpitsidika an'arivony ary mety ho fangatahana an'aliny maro hatao amin'ny mpizara anao!

Io indray dia mampiadana ny tranokalanao. A tranonkala miadana dia mety hisy fiatraikany lehibe amin'ny fifamatorana sy ny fanovana izay ataon'ny mpihaino anao. Paikady ampiasain'ny mpandrindra tranonkala lehibe ny fametrahana ny sary rehetra ao anaty rakitra iray… antsoina hoe a sprite. Raha tokony hanao fangatahana isaky ny sary fisie ianao dia izao ihany no mila fangatahana tokana ho an'ny sary sprite tokana!

Afaka mamaky momba izany ianao ny fomba fiasan'ny CSS Sprites ao amin'ny CSS-Tricks or Smash Magazine's CSS Sprite lahatsoratra. Ny tiako holazaina dia ny tsy hampisehoana aminao ny fomba fampiasana azy ireo, mba hanoroana hevitra anao fotsiny mba hiantohana ny ekipan'ny fampandrosoana anao hampiditra azy ireo ao amin'ilay tranonkala. Ny ohatra omen'ny CSS Tricks dia mampiseho sary 10 izay 10 fangatahana ary manampy hatramin'ny 20.5Kb. Rehefa angonina ao anaty sprite tokana dia Fangatahana 1 dia 13kb! Ny fangatahana fitsangatsanganana sy ny fotoana famaliana ho an'ny sary 9 dia tsy eo intsony ary ny habetsaky ny angona dia ahena mihoatra ny 30%. Ampitomboy izany amin'ny isan'ny mpitsidika eo amin'ny tranokalanao ary tena hanaratra loharanom-pahalalana vitsivitsy ianao!

globalnavThe Apple ohatra ny boaty fitetezana. Ny bokotra tsirairay dia misy fanjakana vitsivitsy… na eo amin'ny pejy ianao na eo ivelan'ny pejy, na misafosafo amin'ny bokotra. CSS dia mamaritra ny fandrindrana ny bokotra ary manolotra ny faritra misy ny fanjakana marina amin'ny mpizaha-tranonkala. Ireo fanjakana rehetra ireo dia niara-nirodana tamina sary iray - saingy aseho isam-paritra araka ny voatondro ao amin'ilay takelaka fanoratana.

Raha tia fitaovana ny mpamorona anao, dia misy taonina mahery afaka manampy azy ireo, ao anatin'izany ny Rafitra CSS Compass, RequestReduce ho an'ny ASP.NET, CSS-Spriter ho an'i Ruby, Script CSSSprite ho an'ny Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Project Generator's CSS Sprite Generator, Sprite Master Web, ary ny SpriteMe Bookmarklet.

Screenshot of Sprite Master Web:
tranonkala spritemaster

Martech Zone Tsy mampiasa sary an-tsary nandritra ny foto-keviny, noho izany tsy mila mampiasa an'io teknika io isika amin'izao fotoana izao.

2 Comments

  1. 1

    Andraso… tsy “sary” (na “fiaramanidina”) ve ny fanangonana iray manontolo, ary ny «sub-image» (na ny sokajy misy ny sary raha misy sary mihetsika na miovaova) dia "sprite"?

    Angamba efa nomena anarana indray ny zavatra nanomboka tamin'ny fotoana farany nitantananako izany zavatra izany saingy afaka nianiana tamin'ny Sprite aho fa ny singa dia naseho fa tsy ilay latabatra data lehibe nesorina taminy.

    ("Latabatra Sprite"… tsy izany ve?)

    • 2

      Mety miresaka zavatra roa samy hafa isika, Mark. Miaraka amin'ny CSS, azonao atao ny mamaritra manokana hoe 'ampahany' amin'ny fisie sary asehoy amin'ny fampiasana koordinativa. Io dia ahafahanao mametraka ny sarinao rehetra ao anaty 'sprite' tokana ary manondro fotsiny ilay faritra tianao aseho miaraka amin'ny CSS.

Inona ny hevitrao?

Mampiasa Akismet ity tranonkala ity mba hampihenana spam. Fantaro ny fomba amoahanao ny angona fanehoanao.