CSS-sprites: usa ka paghulagway sa nag-unang mga teknik ug mapuslanon nga tips

Modernong site nga mahimong pagpuasa, nindot ug hapsay nga duha sa yugto sa kalamboan, ug sa diha nga nagtrabaho uban sa usa ka kliyente. Ingon sa usa ka pagmando sa, ang matag kompaniya nga nagmugna online nga mga kapanguhaan, nagtinguha nga makabaton sa ilang kaugalingon nga mga nawong, sa pagdani sa mga bisita sa iyang disenyo, estilo, kasaligan, speed ug uban pang mga hiyas.

Mapuslanon nga kabtangan sa sprites

CSS-sprites makapauswag sa mga qualitative kinaiya sa mga site, ug ang larawan sa kompanya. Sa iyang kinauyokan, kini dili kaayo komplikado development nga himan, apan kini gayud nga nagpadali sa proseso ug sa kapanguhaan sa kalamboan, ug ang gikusgon sa ilang buhat.

Lakip sa ubang mga butang, mopayano kini sa code ug, sa usa ka diwa, kini mao ang portable sa ubang mga kapanguhaan nga, tungod sa kamatuoran nga ang gigamit sa CSS-sprites susama sama sa suod nga mga paryente, tungod kay kamo makahimo sa paggamit sa mao usab nga tan-awon nga mga ideya, mga elemento estilo design dialogue, istruktura ug sulod sa tag.

Sa normal nga dalan sa kalamboan sa site sa pagbuhat sa usa ka daghan sa mga hulagway. Very sa kasagaran, kini nga mga larawan sa pagkuha sa kaayo gamay nga luna, apan kanunay sa usa ka linain nga file. Kay bisan unsa nga operating sistema sa bisan unsa nga server abli sa usa ka file - kini nga operasyon, usa ka panahon-nga nagaut-ut, Apan, dili lahi kamahinungdanon uban sa pagtahod ngadto sa panahon sa dihang ang usa ka file nga giablihan sa 13 sa 13 pixels, ug sa diha nga ang mga file nga giablihan gikan sa 16 mga hulagway 52 sa 52 pixels. Sa unang kaso, ikaw 16 file ug 16 bukas / mabasa operasyon, sa ikaduha nga kaso 16 mga larawan nga nakuha nga ingon sa usa ka resulta sa pag-abli sa usa lamang ka payl.

Kon paghimo kanimo nga usa ka hugpong sa mga file diha sa hilisgutan (pinahigda nga menu, matang sa dialogue, ang mga buton calculator kalendaryo design elemento ...) nga ang maong mga larawan mahimong gilangkub nga Dapat mibalhin gikan sa site ngadto sa site.

downside sa

Sa diha nga adunay mga fans, usab abtik nga girekomendar sa paggamit sa CSS sprites mga kinahanglan sa mga tawo nga pag-ayo sa pagtuon sa isyu ug sa tin-aw nga nagpakita nga kini mao ang kanunay nga praktikal nga sa pagtrabaho sa mga daan nga gihimo nga paagi.

Sa pagkatinuod, kon adunay usa ka file sa 16 mga hulagway, sa baylo nga sa 16 ka bukas / pagbasa sa operasyon mahimong usa inay sa 16 hulagway file. Apan ang lansis mao nga ang matag browser adunay usa ka cache, ug kini gilulanan sa usa ka butang lamang nga ingon sa usa ka katapusan nga resort. Dugang pa, sa kasagaran ang mga elemento panid nga loaded sa diha nga ikaw una sa pagbisita sa panid, ug unya loaded lang nausab.

Laing aspeto. Kasagaran, ang mga larawan nga giputol, dili glued sa usa ka file. Paagi kini og usa ka teknolohiya, kini mao ang mas maayo sa pag-ingon, ang batasan. designer Ang nagmugna sa Layout ug layout mogamit sa iyang mga bahin: maayong pagkabuhat nga sliced bahin sa layout. Mga kaaway sprites nagtuo nga namudyot sa pipila nga mga larawan sa usa ka file - nga nagaut-ut nga kalihokan, nga nagdugang sa kinatibuk-design panid.

Adunay mga developers kinsa motuo ug optimize sa gidaghanon sa mga http-hangyo, nagtuo nga kini nga trabaho mao ang mas pragmatic kay sa CSS-sprites.

Ang tanan nga mga panahon gipakita ang mga walay duhaduha importante, apan mas importante mao ang panglantaw: kini kinahanglan nga apply sa sulod sa makataronganong mga limitasyon.

Automation ug CSS-Sprites

Kon kini naghimo wala may salabutan sa pagdagan Sprites CSS generator ug sa matarung nga bahin sa disenyo, nan, walay bisan unsa nga magpugong lamang sa paghimo sa niini nga bahin sa normal nga paagi. Kon conventional teknolohiya kini nga gikinahanglan aron sa pagputol sa gatusan ka mga larawan, kini mao ang mas maayo maghubit sa JavaScript-function, nga sa mga kinahanglan pagapilion gikan sa gitinguha nga dapit sa sprite, ug ipakita kini.

Kini kinahanglan nga nakita, bisan pa niana, nga ang sprite sa duha o tulo ka mga elemento, o sa usa ka dosena sa ubang mga - sa tanan nga matarung, apan sa diha nga sa mga gatusan ka sprite sa mga drowing, ang uban pagsulat problema JavaScript-function, siyempre, dili mahitabo, apan kon sa unsang paagi sa daghan nga buhat kini kuhaon sa paglalang sa ingon nga usa ka dako nga sprite ... Dugang pa, papilit hulagway - kini usa ka CSS pc auto generator ug naghimo sa gitinguha nga larawan, ug CSS-code alang niini, wala siya sa pag-atiman sa unsa nga paagi daghan ang mga constituent mga elemento sa sprite. Mga problema motungha sa dihang paghimo pag-usab sa mga site design kausaban, pagtangtang ug Dugang pa sa bag-ong mga elemento. Pagpalambo sa usa ka auto, nga kamo kinahanglan maghunahuna nga dili mahitungod sa kon unsaon sa paggamit niini, ug sa unsa nga paagi kini unya-usab.

Subject kaayohan sa paggamit sa sprites

Dili sama sa CSS programming mga pinulongan, kini mao ang usa ka medyo nagahunong hugpong sa mga lagda sa tanang mga dynamics sa iyang gitino pinaagi sa mga lagda ug sa ilang mga functional sulod (standard). Tungod sa sprites sa komplikado, ang mga HTML, ang CSS mahimo sa paghimo sa usa ka Ebidensiya-functional design sa librarya.

Kay sa panig-ingnan, sa nahuman nga bersyon sa menu: lamang Sumpaysumpaya daghang CSS-lagda, JS-gimbuhaton ug naglakip sa code gidaghanon sa mga HTML-divs, nga kamo mahimo sa pagkuha sa mga resulta. Pinaagi sa pag-usab sa sulod sa larawan sa sprite, nga imong mahimo sa pag-usab sa pagtan-aw sa menu. Specifying sa lawas sa function, nga imong mahimo sa adjust sa kagamitan, katuyoan.

Na sa usa ka pinasahi nga laing sa butang-oriented programming (oop). Sigurado, kini mahimo nga usa ka hayag nga ideya, apan dili kini mahimong kaayo nga mahayag sa pagbarug batok sa background sa uban nga mga pinulongan oop, diyalekto tinuod. Kini mao lamang ang sa unang bahin sa '90s, sa diha nga sa PLO si nabuhi ug nahimong talagsaon sa madali makaangkon og usa ka dapit diha sa adlaw, kini mao ang usa ka piho nga ideya ug sa usa ka konkreto nga porma sa iyang ekspresyon, apan karon ang mga developers nga moabut sa uban ingon nga sa daghan nga mga diyalekto ingon nga adunay adunay lain-lain nga Russian.

Dulaan - sa usa ka Bonanza alang sa sprites

Kahinam ug programming - incompatible konsepto, apan programa kahanas, pagsulat dula, lahi kaayo obschebytovoy (yano nga encryption) ug mamugnaon (design ug pagpalambo sa bag-o nga mga teknolohiya, mga ideya).

Game Design hangyo sa vector graphic, tungod kay ang kombinasyon sa SVG-sprites + CSS-lagda dili lamang sa panginahanglan, apan sa kasagaran mahimo sa butang sa developer (sa site) ngadto sa tumong sa usa ka tinuod nga duwa. Sa partikular, ang popular nga game Counter Strike sa paggamit sa mga termino sa mga sprites, sprays na makahuluganon Synonyms: blast, dugo, sa panan-aw ...

hugpong sa mga pulong ang "ang mga pc auto CSS v34" alang sa pagsugod mao na normal ug masabtan. Sprites makita dili lamang sa paggamit sa utility, sa diwa, apan usab nag-umol sa usa ka angayang luna, nga mao na bug-os-bahin, barato ug sayon nga masabtan sa usa ka sirkulo sa mga konsumedor.

CSS-sprites: Panig-ingnan

usa ka matang sa mga kapilian alang sa usa ka partikular nga pinulongan sa switch mga panid sa dapit gigamit, apan kon sa pinulongan selector sa pagbuhat ingon nga usa ka icon, ang solusyon sa paggamit sa usa ka auto mahimo nga tan-awon sama niini:

Obvious drawbacks sprites

Una sa tanan, kini mao ang panahon-nga nagaut-ut, ug maid-id nga proseso. Kini mao ang usa ka butang - sa pagputol sa mga disenyo ngadto sa gagmay nga mga bahin, ug ang uban nga mga - sa pagkolekta sa usa ka hulagway sa daghan nga mga gagmay. Ibutang ang ideya sa canvas, ug ibutang kini sa ibabaw sa tanan nga mga larawan nga gigamit sa site mao ang bug-os nga walay kapuslanan.

Bisan sa paggamit sa CSS sprites Generator, mga kalisdanan dili malikayan, ilabi na kon kini mao ang gikinahanglan aron sa pag-usab sa design site. Add sa usa ka pipila ka mga napulo sa sprite mga larawan - kini dili usa ka gubat sa mga elemento, ang mga graphics adunay graphics, kini sa kasagaran lang gipakita sa screen, sa baylo nga sa hagpat sa code sama sa sa usa ka gubat sa pagpangita sa husto nga butang.

Standard ug developers human sa iyang pag-angkon nga sama sa sprites nakig-uban sa usa ka palisiya background Gigamit, kini mao ang lamang usa ka larawan background ug dili sa site elemento. Graphic component mga elemento sa usa ka panid nga kinahanglan pagmaniobra tag sa img.

Kini mao ang lisud nga sa pag-uyon sa mga yano nga nataran nga sa diha nga igo background nga nakasabut nga ingon sa usa ka komon nga background. Kini lang ang background, bisan unsa - sa usa ka gamay nga elemento o sa bug-os nga pahina.

Samtang, ang mga graphic component nagrepresentar sa usa ka seryoso nga babag sa sa paggamit sa mga sprites.

maalamong paggamit

Bisan pa sa kamatuoran nga ang mga termino nga "Internet teknolohiya" ug "taas nga teknolohiya" giisip nga samag kahulogan, sa pagkatinuod, kini mao ang panahon-nga nagaut-ut ug usahay ubos kaayo-tech nga buhat. Sprites dili ilabi nagsul-ob itandi sa ubang mga bottlenecks sa lunsay nga programming sa JavaScript o PhP, ingon man usab sa sa pagpalambo sa sa gikinahanglan nga kagamitan, katuyoan, sa paghimo proseso sa pagpuno sites o impormasyon, sama sa background sa paghimo nga archive kopya.

Gahum ug palaaboton sa paggamit sa sulod sistema sa pagdumala sa sagad leveled nuances sa ilang praktikal nga aplikasyon, ug manwal resource development, ingon sa usa ka pagmando sa, modala ngadto sa sa mga panginahanglan alang sa mga 1001st panahon sa amyendahan sa usa o sa uban nga mga sa usa ka proprietary algorithm.

Sa niini nga konteksto, kini mao ang importante sa lamang makatarunganon sa paggamit sa tanan nga naghatag og usa ka modernong himan. Ayaw kaayo maikagon sa paggamit sa usa sa ibabaw sa uban nga mga, ug ang bulawan nga pagmando sa site building mabasa ingon sa mosunod: nga kamo kinahanglan nga maghunahuna dili mahitungod sa unsa nga paagi sa pag-agi sa buhat sa diha nga sa mahimo, ug sa unsa nga paagi sa pagpahamtang sa niini aron nga sa kaso sa bisan unsa nga wala damhang kahimtang mahimong madali masulbad sa bisan unsa nga problema.