Ce este un sprite html. Crearea unui sprite css - marcaj css. Ce imagini ar trebui combinate în sprite-uri CSS?
Sprite nu este doar o băutură dăunătoare, ci și o caracteristică CSS foarte utilă care va îmbunătăți starea site-ului dvs. și, de asemenea, va oferi o mulțime de idei noi în ceea ce privește utilizarea acestuia.
Vorbim despre o metodă binecunoscută de a combina toate imaginile de serviciu, cum ar fi butoanele, pictogramele, părțile de fundal și chiar siglele într-una singură imagine mare, care este exact ceea ce se numește sprite (css sprite).
De ce ai nevoie de un sprite pe un site web?În primul rând, permite tuturor imaginilor decorative să fie afișate corect. Aceasta nu înseamnă imagini în articole, ci designul site-ului în sine. Acest lucru este valabil mai ales pentru
Dacă utilizați două imagini separate pentru un astfel de buton, browserul va încărca mai întâi doar prima. Și când treceți mouse-ul peste acest buton, este posibil să observați o întârziere în apariția celei de-a doua imagini, deoarece se va încărca numai după acțiunea dvs. Așa sunt concepute browserele.
În al doilea rând, sprite-ul vă permite să simplificați designul fișierului de stil în ceea ce privește adresarea imaginilor de fundal. De fapt, tuturor va primi aceeași imagine, adică sprite-ul în sine. Tot ce trebuie să faceți este să indicați coordonatele corecte pentru fiecare detaliu al site-ului și partea vizibilă a acestei imagini de ansamblu.
Și în al treilea rând, este pur și simplu frumos, ordonat și modern.
Cum funcționează un sprite pe un site webDeci, care este esența metodei. Avem o imagine mare în care toate detaliile de design sunt așezate într-o grămadă. Iată, de exemplu, un sprite al binecunoscutului Amazon (fragment):
Și acum să ne amintim creditele de deschidere ale vechiului nostru film sovietic despre Sherlock Holmes și Doctor Vaston. Acolo, dacă vă amintiți, un șablon negru cu fante a fost plasat peste o grămadă de litere amestecate și un text complet lizibil a devenit vizibil prin ele.
Sprite funcționează pe același principiu. Dintr-o mulțime de imagini apropiate, una este selectată pentru a afișa un detaliu specific:
Cum se alege? Simplu si usor!
Orice imagine de pe un sprite are propriile dimensiuni în lățime și înălțime. Și, de asemenea, oricare dintre ele este situat într-un loc strict definit. Aceasta înseamnă că, cunoscând dimensiunea imaginii și coordonatele acesteia, puteți spune cu ușurință browserului unde să o caute și ce anume să arate:
Buton (
latime: 180px;
înălțime: 20px;
fundal: url(sprite.png) no-repeat;
fundal-poziție: 0 -80px;
}
Această intrare înseamnă că butonul cu clasa .button are dimensiuni de lățime și înălțime și o imagine de fundal, care este sprite-ul însuși. Punctul cheie iată ultima linie a regulilor:
fundal-poziție: 0 -80px;
Acesta spune doar browserului coordonatele părții dorite a imaginii. Coordonatele sunt setate pentru stânga colțul de sus partea selectată a imaginii. Primul număr înseamnă distanța orizontală, al doilea - verticală.
Dacă luăm colțul din stânga sus al întregului sprite ca punct zero inițial, principiul în sine devine evident. Numărăm pur și simplu numărul necesar de pixeli pentru partea selectată a imaginii și îi înlocuim în linia de reguli de mai sus.
Cum se creează un sprite pentru un site web?În cazul nostru, partea selectată se află la marginea din stânga a sprite-ului (0 pe orizontală) și la 80 de pixeli în jos de la marginea de sus a sprite-ului.
Specificând ca a doua valoare un număr negativ, astfel „tragem în sus” întregul sprite cu 80 de pixeli în sus. Și din moment ce anterior am setat cu strictețe dimensiunea imaginii vizibile la 180x20 pixeli, nu întregul sprite va fi vizibil, ci doar butonul de care avem nevoie:
Coordonatele tuturor imaginilor de pe sprite pot fi scrise în avans folosind rigle în Photoshop.
Dacă sunteți prea leneș să-l jucați, puteți încerca să utilizați serviciu special- generator de sprite. Hrănește-l fișier Zip cu toate imaginile tale, le va plasa pe un sprite obișnuit și le va scoate împreună cu un fișier de stil deja proiectat și calculat.
Există multe metode de optimizare a paginilor web. Unii dintre ei funcționează, alții nu. Cu toate acestea, există câteva metode care sunt obligatorii pentru orice site web și blog. Am vrut să vă vorbesc despre unul dintre ei.
Una dintre principalele metode de optimizare a paginilor site-ului. Prin urmare, astăzi vom vorbi despre cum să combinați sprite-urile de imagine pe un site web în CSS, crescând astfel viteza de încărcare a acestora.
Puțină istorieÎn trecutul îndepărtat, îndepărtat, când modemurile sunau în apartamente și vitezele de conectare nu depășeau 5 Kbps, oamenii studiau cu atenție sarcina dificilă de a face site-urile să se încarce mai repede fără a plăti sume exorbitante pentru traficul de intrare. S-au gândit, adică au gândit, și le-a venit ideea de a compune imaginile folosite pe pagină în sprites.
Și plecăm...
Combinarea imaginilor într-un spriteȘi așa, așa cum am aflat anterior, un sprite este mai multe imagini aranjate într-una singură pe un fundal transparent, accesate folosind Proprietăți CSS fundal-poziție. Dar te rog nu-l confunda cu un colaj. Sprite ≠ colaj.
Pentru a obține un sprite, trebuie să încadrezi toate butoanele, pictogramele, gloanțele și alte prostii cât mai compact posibil într-unul singur Fișier PNG. Nu uita, fundalul trebuie să fie transparent. Acum să ne uităm la asta cu un exemplu.
Să zicem că avem Fișier PSD Oh, cu un buton atât de frumos în 3 stări.
Ce face bloggerul mediu de layout autodidact? Taie butonul în fiecare stare și îl stochează fişiere separate. Adică un buton face 3 poze de la acest om drăguț. Și dacă te încordezi, amintește-ți că fiecare poză de pe site este un plus Solicitare HTTP, care încarcă serverul și blogul tău rulează din ce în ce mai lent și mai lent și mai lent și mai lent și mai lent și mai lent...
Pentru a preveni acest lucru, este mult mai logic să salvați butonul într-un singur . Pentru a face acest lucru, deschidem același fișier PSD, eliminăm săgețile inutile, etichetele și fundalul din acesta și aranjam toate stările butoanelor cât mai aproape una de cealaltă, fără a se suprapune.
Cu asta am ajuns. Sub nicio formă butoanele nu trebuie să se suprapună.
Grozav, fisier grafic l-am pregătit, acum permiteți-mi să vă arăt cum să-l aranjați.
Aspect spriteAspectul sprite-urilor CSS nu este diferit de aspect poze obisnuite, cu excepția unui DAR. Trebuie să știți nu numai dimensiunea exactă a imaginii pe care doriți să o afișați, ci și coordonatele acesteia. De exemplu, întregul nostru sprite are 330 px lățime și 150 px înălțime.
Dar trebuie doar să afișăm un buton care are 227 px lățime și 41 px înălțime, specificând coordonatele exacte ale acestuia. Daca nu ai html bun editor - Pot.
Creați un fișier index.htmlși scrieți în el liniile de cod necesare, doctype și toate astea.
După toate acțiuni standard Gata, să încercăm să afișăm butonul nostru.
După etichetă corp creați un container div cu clasa buton– acesta va fi butonul nostru.
| 1 |
Aici se termină html-ul nostru și acum trebuie să adăugăm stiluri CSS pentru buton.
Codul de mai jos arată că mai întâi declarăm o clasă buton. Apoi folosind proprietăți înălțime și lățime setați dimensiunea butonului nostru. Proprietate fundal ne permite să selectăm fișierul pe care îl vom folosi ca sprite și fundal-poziție setați coordonatele imaginii de care avem nevoie în acest sprite. E simplu.
| 1 2 3 4 | .button (înălțime: 41px; lățime: 227px; fundal: url (img/sprite.png); fundal-poziție: 0px -12px; ) |
Să aruncăm o privire mai atentă asupra proprietății fundal-poziție.
După cum puteți vedea din codul de mai sus, are două semnificații. Prima valoare vă permite să setați coordonatele imaginii de-a lungul axei X, iar a doua, prin urmare, de-a lungul axei Y Butonul nostru nu sare nicăieri de-a lungul axei X, deoarece toate stările sunt situate una sub cealaltă. Prin urmare, pentru ca a doua stare a butonului să apară la hover, trebuie să schimbăm valoarea responsabilă pentru axa Y.
| 1 2 | .button:hover (poziția de fundal: 0px -56px; ) .button:activ (poziția de fundal: 0px -98px; ) |
După cum știți, și dacă nu, atunci da, fiecare buton are mai multe stări.
Am profitat de aceste proprietăți.
Dacă vă este prea lene să faceți sprite-uri manual și, în general, vă deranjați cu Photoshop, o minunată serviciu gratuit: spritepad.wearekiss.com. Doar aruncă-l înăuntru Zona de lucru pozele necesare și el va crea un sprite pentru tine.
In custodieSprite-urile CSS sunt foarte etapa importanta pe cale de a accelera site-ul. Tratează-l cu respectul și încearcă să-l folosești peste tot.
I-a placut:
27
Ne-a plăcut: 4
Nici o traducere disponibilă.
sprite
înainte sau după „înainte” „după” „după”
angry_bird angry.png. index.html
Nici o traducere disponibilă.
Sprite-urile CSS sunt grafice pentru site-ul dvs. Web, combinate într-un singur fișier grafic. — De ce un singur dosar? - tu intrebi. Faptul este că această abordare a stocării imaginilor vă permite să îmbunătățiți performanța paginilor web, precum și să stocați imagini grafice mai organizat. Să aruncăm o privire la unele dintre cele mai bune practici folosind sprite-uri. Însuși numele sprite-urilor vă poate aminti de sprite-uri de jocuri, retro consolă de jocuriși chiar jocuri de browser care sunt atât de populare astăzi:
Deci, aplicabil designului web, un sprite este doar unul dosar mare, care conține mai multe imagini pentru site-ul dvs., economisind timp pentru descărcarea și transferul fișierului prin rețea. Când un sprite, de exemplu, conține 20-30 de imagini, acest lucru poate ușura în mod semnificativ sarcina pe server, deoarece dacă aceste imagini ar fi stocate separat, serverul ar trebui să facă 20-30 de solicitări separate pentru a obține fiecare astfel de imagine. Datorită sprite-ului, doar o singură cerere HTTP este trimisă către server - pentru a primi o singură imagine. Este posibil ca un sprite să nu fie „lizibil” vizual pentru ochi, deoarece sarcina sa principală este doar să asamblați diferitele „piese” ale designului dumneavoastră. De exemplu, un sprite ar putea arăta astfel:
Sprite-urile sunt folosite de majoritatea site-urilor moderne, iar binecunoscutul VKontakte nu face excepție. De exemplu, așa stochează „bucăți” din interfață într-un singur fișier - și anume pictograme familiare:
Lucrul minunat despre utilizarea sprite-urilor CSS este că trebuie să trimiteți serverului doar un fișier grafic care conține toate imaginile dvs., mai degrabă decât multe imagini individuale - și prin CSS puteți afișa orice segment mic din acel fișier grafic ca fundal pentru un element. Unii oameni cred că imaginile individuale se încarcă mai repede, dar acest lucru nu este adevărat. Când încărcăm un fișier grafic cu multe imagini, trimitem o singură cerere către server, iar când încărcăm un număr mare de imagini, trimitem mai multe solicitări către server. Combinarea imaginilor într-un singur fișier nu numai că poate reduce semnificativ numărul de solicitări HTTP, ci și poate reduce dimensiune totală fișier imagine.
Permiteți-mi să vă dau un alt exemplu de sprite. Așa se face că un renumit site web occidental dedicat elementelor grafice magazine de design:
Puteți întreba când în cel mai bun mod posibil pregateste un sprite? Există două abordări diferite pentru aceasta.
Abordări diferite - crearea unui sprite înainte și după crearea site-uluiExistă două abordări comune atunci când creați o foaie de sprite - faceți-o înainte sau după crearea site-ului. Puteți plasa toate imaginile într-o foaie de sprite înainte de a crea site-ul. Aceasta este ceea ce numim abordarea „înainte”. În plus, puteți crea toate imaginile ca fișiere separate, ușurând editarea acestora. Odată ce site-ul este construit și toate imaginile sunt pregătite, puteți crea rapid și ușor o foaie de sprite, fie manual, fie folosind unul dintre mai multe instrumente. Vom numi aceasta abordare „după”. Dacă foile de sprite sunt noi pentru dvs. sau sunteți nou în design web, atunci abordarea „după” va fi mai potrivită pentru dvs. Există multe utilități, servicii și programe care vă ajută să creați sprites, dintre care majoritatea sunt distribuite și disponibile gratuit.
Aranjarea imaginilor în sprite într-o manieră organizatăAtunci când creați un sprite în Photoshop, este indicat să plasați imediat toate imaginile într-o manieră organizată și într-o anumită secvență aleasă de dvs., astfel încât mai târziu lucrul cu ele să fie ușor și simplu. Încercați să rotunjiți întotdeauna spațiul pentru fiecare imagine sprite la cei mai apropiați 10 pixeli sau părăsiți mai mult spatiuîn jurul lor dacă sunt toţi aceeași mărime. Când vine vorba de scrierea stilului CSS, nu va trebui să notați măsurătorile de coordonate și va fi mai puțin probabil să uitați numerele de coordonate imaginile necesare. Iată un exemplu de plasare cu succes a diferitelor imagini într-un singur sprite:
Deci, ne-am familiarizat cu conceptul de sprite în web design, dar teoria fără practică este nimic. Prin urmare, acum tu și cu mine vom crea primul nostru sprite și vom învăța cum să facem animație simplă pe pagina HTML. Exemplul nostru se va baza pe un personaj din jocul Angry Birds - aceasta este o pasăre roșie amuzantă. Mai întâi, să pregătim o imagine sprite în format .PNG care conține 4 faze de animație a păsărilor:
Să creăm un director angry_bird undeva pe disc - vom plasa fișierele noastre exemplu acolo. Salvăm sprite-ul cu păsări în acest director și numim fișierul angry.png. Urmatorul pas- creați un fișier în același director numit index.html - aceasta va fi pagina noastră de testare cu animație. Apoi, deschideți acest fișier în editor și plasați următorul cod acolo:
Lecție de site - Demonstrație de lucru cu sprites $(document).ready(function() ( // aici va fi codul jQuery care creează animația ));
Lasă-mă să explic puțin ce am făcut acum. În primul rând, setăm documentul nostru HTML la codificarea UTF-8, ceea ce înseamnă că trebuie să salvam index.html în codificarea respectivă. De asemenea, puteți seta altul, de exemplu, Windows-1251 - pentru sarcina noastră acest lucru nu este important. Apoi, am conectat fișierul style.css la document (nu se află încă în directorul nostru angry_bird, îl vom crea puțin mai târziu). Am oferit și un link către script externși conectat biblioteca jQuery- Cu folosind jQuery Vom schimba în mod dinamic imaginile păsării noastre și vom schimba „fazele” acesteia din sprite. De asemenea, am pregătit un bloc JavaScript intern, unde vom plasa apoi codul care animă pasărea. Și, în sfârșit, corpul principal al documentului conține un singur hyperlink, în interiorul căruia se află un bloc DIV, iar ID-ul său este setat la birdImage , iar clasa implicită este bird-sleeping . Aceasta înseamnă că pasărea noastră va „adormi” atunci când deschide pagina - aceasta corespunde imaginii din stânga jos din interiorul sprite-ului - unde ochii îi sunt închiși. Acum este momentul să ne „tăiem” sprite-ul, adică. selectați imagini individuale din acesta.
Decuparea unui sprite folosind serviciul SpriteCow.ComSarcina de a „taia” un sprite este destul de laborioasă - necesită grijă pentru a nu greși coordonatele care definesc fiecare imagine din sprite. Din fericire, astăzi există servicii care îndepărtează complet această durere de cap de la designer și designer de layout. Folosesc serviciul http://spritecow.com pentru feliere și vi-l recomand. Esența serviciului este simplă și foarte convenabilă - selectăm fiecare imagine de pasăre cu mouse-ul, iar SpriteCow ne oferă cod CSS gata făcut cu coordonate. Tot ce trebuie să facem este să setăm pur și simplu 4 stiluri pentru fiecare fază a păsării! După ce am intrat pe site, vedem 2 butoane - „Deschide imaginea” și „Afișează exemplu”. Avem nevoie de primul buton, faceți clic pe el:
În dialogul care se deschide, selectați fișierul nostru de sprite angry.png, după care vedem cum a fost încărcat sprite-ul nostru pe site. Apoi, trebuie să determinăm culoarea de fundal, pentru a face acest lucru, faceți clic pe bara de instrumente „Alege fundal” și indicați spre zona albă a sprite-ului nostru - acest lucru ne va permite să tăiem corect fiecare fază a păsării:
Selectați prima imagine și obțineți automat codul CSS pentru ea:
Acum, este timpul să creați un fișier style.css în directorul nostru angry_bird. Acolo inserăm secvenţial 4 bucăţi de cod CSS generate, dar în loc de clasa standard .sprite oferită nouă de SpriteCow, să ne numim stilurile mai clar. De asemenea, deoarece stocăm imaginea sprite direct în rădăcina directorului, vom elimina elementul cale inutil - imgs/ din proprietatea de fundal. am prins asa:
/* pasăre „obișnuită”. Imagine din stânga sus în sprite */ .bird-normal ( fundal: url("angry.png") no-repeat -12px -16px; lățime: 97px; înălțime: 94px; ) /* Pasăre „Fericită”. Imagine din dreapta sus în sprite */ .bird-happy ( fundal: url("angry.png") no-repeat -118px -17px; lățime: 97px; înălțime: 94px; ) /* Pasăre „dormită”. Imagine din stânga jos în sprite */ .bird-sleeping ( fundal: url("angry.png") no-repeat -12px -120px; lățime: 97px; înălțime: 94px; ) /* Pasăre „Angry”. Imaginea din dreapta jos în sprite */ .bird-angry ( fundal: url("angry.png") no-repeat -118px -120px; lățime: 97px; înălțime: 94px; )
Ultimul pas- Scriem cod jQuery care creează animație.
Acum că am tăiat cu succes sprite-ul și am plasat 4 stiluri pentru fiecare imagine în fișierul nostru style.css, tot ce trebuie să facem este să scriem un cod jQuery care va adăuga o animație atunci când hyperlinkul nostru este trecut peste și când linkul se face clic. După cum ne amintim, în mod implicit avem clasa bird-sleeping , i.e. pasărea noastră roșie va „adormi” când deschide un document :)
Toată animația se va baza pe 3 metode jQuery:
- hover - handler pentru trecerea cursorului peste o legătură și pentru mutarea cursorului departe de legătură. Când trecem cursorul, pasărea se va „trezi” - adică. clasa va deveni normală la păsări
- mousedown - handler pentru a face clic pe butonul stâng al mouse-ului pe un link. În același timp, pasărea va deveni „fericită” - adică. Blocului DIV i se va atribui clasa bird-happy
- mouseup - handler de eliberare a butonului stâng al mouse-ului. Când este eliberată, pasărea va deveni „furios” - adică. Blocului DIV i se atribuie clasa bird-furios
Deci, lipiți următorul cod în locul în care ne-am pregătit Unitate interioară JavaScript plasat pe pagină:
$(document).ready(function() ( // aici este codul jQuery care creează animația $("#birdImage").hover(function() ( $(this).removeClass("bird-sleeping"); $ (this).removeClass("pasăre-furios"); $(this).removeClass("pasăre-fericit"); ).removeClass("pasăre-normal"); $(this).removeClass("pasăre-furios"); " "); )); $("#birdImage").mousedown(function() ( $(this).removeClass("pasăre-dormit"); $(this).removeClass("bird-normal"); $ ( asta).removeClass("pasăre-furios"); $(this).addClass("bird-happy"); ).removeClass("pasăre-normal"); $(this).removeClass("pasăre-fericit");
Gata! Testarea animației
OK, totul sa terminat acum! Pasărea noastră este gata și a adus viață paginii cu animația ei! :) Puteți vizualiza demonstrația. Descărcați arhiva cu un exemplu în partea de jos a articolului.
Cuvântul sprite (în engleză sprite - fairy, ghost) a fost folosit pentru prima dată de animatorii Disney într-o capacitate ușor diferită, animatori pentru mai rapid și creație convenabilăși „revitalizand” personajele de desene animate, au desenat mai întâi toate fazele mișcării lor pe filme transparente, apoi au suprapus aceste filme pe fundalul principal - scena și au primit cadre ale desenului animat, economisind astfel timp, bani și nervi artiștilor. .. au numit chiar aceste filme sprite .
Apoi a fost introdus termenul sprite în grafica pe computerși s-a răspândit mai ales în jocuri pe calculator- dar nici asta nu este exact ceea ce vreau să vă spun.. Astăzi vreau să vă povestesc despre așa-numitele sprites CSS..
Deci, sprite-urile în CSS sunt de obicei numite o singură imagine, care constă din mai multe „părți” care sunt afișate separat, în funcție de acțiunile utilizatorului.
Sunt prea multe cuvinte... Vă arăt un exemplu...
Acesta este un sprite care este prezent pe fiecare pagină a acestui site:
Doar că într-o stare „calmă” ți se arată o parte din ea, iar când treci cu cursorul pe alta.
Cum să o facă? De fapt, este destul de simplu.
ÎN în acest exemplu pentru un bloc cu dimensiuni fixe, încărcăm o imagine „dublă” ca fundal, dar deoarece blocul în sine, datorită dimensiunilor care i-au fost atribuite, are exact jumătate din înălțimea imaginii, browserul arată doar prima „parte” a imaginii de fundal, iar când treceți cursorul, pseudo-clasa :hover este declanșată cu proprietatea background-position care mută fundalul în sus cu distanta necesara, arătând astfel a doua parte a imaginii.
Bine, să-mi lăsăm logo-ul în pace, mai ales că te-am mințit puțin... hai să-ți facem ceva mai util, de exemplu acest buton:
Să deschidem Photoshop și să desenăm ceva de genul acesta în el:
Principalul lucru aici este să nu faceți o greșeală cu dimensiunile! a doua parte a imaginii, unde butonul nostru este activ, trebuie să aibă exact aceeași dimensiune cu prima parte a imaginii, altfel mai târziu, când treceți cursorul, totul va „sări”. Cel mai bine este să desenezi mai întâi o parte a imaginii, apoi să o copiezi, să o treci prin filtre, să termin de desenat ceva și să lipești două imagini într-una singură... cu toate acestea, lecțiile de Photoshop nu sunt treaba mea...
Deci, avem o imagine „dublă” de 175 pe 80 pixeli, amintiți-vă aceste dimensiuni și începeți să scrieți cod.
Am prins așa... uită-te la rezultat și citește comentariile din cod:
Sprite-uri CSS
corp (culoare de fundal: #020)
h1 (dimensiune font: 24px; culoare: #ddd)
/* Creați o clasă separată pentru link-uri cu butoane */
un.sprite(
display:bloc; /* Link-urile vor fi blocuri. */
lățime: 175px; /* Lățimea blocului 175 pixeli pe lățimea imaginii noastre „duble” */
înălțime: 40px; /* Înălțimea blocului 40 este jumătate din înălțimea imaginii noastre duble */
background:url("sprite.png"); /* face imaginea pe fundal (știind că doar jumătate din imagine va fi vizibilă) */
margine: 3px; /* „spații” între butoane */
text-align:center; /* centrat pe text */
înălțimea liniei: 40px; /* Distanța dintre linii este de 40 de pixeli, astfel încât textul să fie centrat în butonul */
dimensiunea fontului: 18px; /* font 18 pixeli */
culoare:#ddd; /* culoarea gri este mai aproape de alb */
text-decor: niciunul /* nu vom sublinia linkurile acestei clase */
}
/* Stilul linkului când trece cu mouse-ul */
a.sprite:hover (
fundal-poziție:0 -40px; /* TOATA FICTIUNEA ESTE AICI! mutăm fundalul cu 40 de pixeli în sus, cu o valoare negativă a poziției fundalului, arătând astfel a doua parte a imaginii în care butonul nostru este activ */
culoare: #fff /* culoare albă */
}
Acesta este meniul pe care l-am primit:
Butonul 1
Butonul 2
Butonul 3
Butonul 4
Cred că mulți cititori se întreabă: „De ce sunt necesare aceste sprite-uri dacă același lucru poate fi făcut folosind două poze individuale, unde un fundal este doar pentru o legătură, iar al doilea este pentru o legătură cu :hover, fără a fi nevoie să lupți cu Photoshop și fără a calcula coordonatele de fundal pentru CSS??
În primul rând: viteza de încărcare a imaginilor crește semnificativ!! În ciuda faptului că o imagine „dublă” cântărește la fel ca două imagini mici „single” separate, încărcarea unei imagini mari este mai rapidă, deoarece browserul nu creează solicitări HTTP suplimentare către server.
Îți amintești când ți-am arătat logo-ul meu de sprite și am spus că mințeam? Deci viclenia mea constă în faptul că această imagine conține nu două părți logice ale imaginii, ci optsprezece!!
Și arată complet așa:
Adică aproape toate graficele pe care le vezi pe acest site chiar îți vin sub forma unei singure imagini! fișier CSS Nu o voi arăta, îmi este frică de asta..)),
Deci, iată solicitările HTTP... dacă ar fi 18 imagini în loc de una, atunci dialogul browserului cu serverul ar arăta cam așa:
Browser: Salut Server! Sunt aici de la tine, la cererea mea, primind HTML și documente CSS, așa că indică faptul că în folderul tău „grafică” ar trebui să existe o imagine cu numele: „picture1” aruncă-o, nu?
Server: Bună, Browser, de mult nu văd, o să arunc o privire acum... da, am o astfel de poză! Captură!!
Browser: Mulțumesc, am înțeles! Dar mai am nevoie de „picture2” în același folder..
Server: Da, și există unul.. trimit..
Browser: încărcat.. dar „picture3” este, de asemenea, listat aici.
Server: Și nu poți dormi! Păstrează-ți poza!!
Browser: Mulțumesc! Da, sincer să fiu, deja m-am săturat de asta, dar utilizatorul meu vrea să încarce pagina complet... pe scurt, ar trebui să ai și „picture4” acolo...
Server: Începi să mă stresezi! La poza ta!!
Browser: Îmi pare rău, dar nu sunt vina mea că sunt atât de multe imagini aici!!! Am nevoie de „picture5”!
Server: Deja îmi faci să fiarbă procesorul!! Am ezitat!! Ia poza ta!!
... ... ...
Nu voi mai exprima dialogul, pentru că ceea ce urmează este un limbaj obscen...
De ce toată această discuție între server și browser (client), care necesită mult timp și trafic și, de asemenea, încarcă serverul atunci când cantitati mari vizitatorii site-ului, dacă este mult mai rapid și mai economic să faci o singură solicitare HTTP și să primești toate cele 18 poze într-un singur pachet!!
În al doilea rând: Încărcarea celei de-a doua imagini atunci când se utilizează pseudo-clasa :hover are loc numai în momentul în care utilizatorul trece cu mouse-ul peste legătura cu prima imagine. Dacă aceasta este o imagine mică, precum un buton din exemplul de mai sus, atunci nu se va întâmpla nimic deosebit de rău - a doua imagine se va încărca rapid și utilizatorul nu va observa nimic... dar dacă aceasta este o imagine mare în greutate și dimensiune? ? Apoi utilizatorul va urmări cum se încarcă, deși era pregătit din punct de vedere psihologic pentru schimbarea rapidă a imaginilor! Un alt plus pentru sprite! ... deși, sincer, este și acesta un minus... un minus în cazul în care utilizatorul nu a trecut niciodată cursorul cu cursorul în timpul sesiunii... imaginea s-a încărcat, dar nu i-a fost de folos... dar credeți eu, această „victimă a traficului” dă roade aproape întotdeauna!
Și în al treilea rând: Oricât de ciudat ți se pare, este convenabil!! Este convenabil să indicați calea către aceeași imagine în cod, este convenabil să o editați în Photoshop, de exemplu, pentru a face întregul site mai luminos sau mai întunecat lucrând cu o singură imagine, este convenabil să stocați, este convenabil să încărcați în server și chiar și în CSS este convenabil să lucrezi cu un sprite mare! - deși acest lucru necesită anumite abilități și obiceiuri..
Bine, decideți singur dacă folosiți sprite-uri sau nu... și afacerea mea este mică, doar pentru a vă aduce informațiile în atenție, ca să zic așa.. dacă apar întrebări suplimentare, vă aștept la
Înainte ca pseudo-clasa:hover să apară în CSS, crearea unui rollover - un element care își schimbă aspectul atunci când trece cu mouse-ul - era implementată prin limbaj JavaScript. În zilele noastre, acest lucru se face mult mai ușor, dar există un dezavantaj: dacă o imagine de fundal ar trebui să apară în starea:hover (adică atunci când treceți cursorul peste un element), atunci începe să se încarce în momentul în care cursorul este plasat, și nu când sarcina totala pagini.
Din acest motiv, este posibil să existe o ușoară întârziere când imaginea apare pentru prima dată. Și deși această întârziere nu mai apare la toate trecerile ulterioare ale cursorului, mulți dezvoltatori s-au gândit cum să remedieze această problemă. De exemplu, cu folosind JavaScript Vă puteți asigura că toate imaginile de fundal sunt încărcate în avans. Dar există o modalitate care nu necesită cunoașterea unui limbaj de programare și este să folosești sprite.
Ce sunt sprite-urile CSSUn sprite CSS este un singur fișier grafic care conține multe diverse imagini. Poate conține, de exemplu, toate elemente grafice interfață, cum ar fi pictograme, butoane etc. De asemenea, sprite-urile combină adesea imagini de fundal împreună cu variațiile lor pentru starea:hover. Exemple tipice sprites:
Un sprite care conține toate pictogramele utilizate. Un sprite cu pictograme de rețele sociale și variațiile acestora pentru: hover 
- Sprite-ul CSS conține imagini de fundal pentru diferite stări de elemente și este încărcat în întregime atunci când pagina web este încărcată. Acest lucru previne încetinirea răsturnării atunci când treceți pentru prima dată peste element.
- Numărul de apeluri către server este redus. La urma urmei, pentru a încărca fiecare pictogramă mică de care aveți nevoie cerere separată, iar cu cât sunt mai puține solicitări, cu atât mai bine. Pentru a încărca un sprite, aveți nevoie de o singură solicitare către server.
- Un alt avantaj al stocării multor imagini într-un sprite este că, dacă au o paletă de culori similară, atunci o imagine mare va cântări mai puțin decât imaginile mici individuale combinate.
- Toate acestea au, în general, un efect pozitiv asupra vitezei de încărcare a site-ului.
În cazul clasic, sprite-urile sunt create într-un editor de imagini. Imaginile mici sunt plasate secvenţial pe o pânză mare (adesea cu fundal transparent), care este apoi salvat ca fișier grafic.
Metoda manuală de a crea sprite-uri este o sarcină destul de consumatoare de timp. Prin urmare, atunci când utilizarea de sprites a început să câștige amploare, servicii online pentru crearea automată foi de sprite, de exemplu, Spritegen, RetinaSpriteGenerator si altii. Încărcați imaginile necesareîn fișiere separate pe site și este generat un sprite pentru dvs., pe care îl puteți descărca imediat pe computer.
Cum să utilizați sprite-urile CSSAcum este timpul să învățați cum să folosiți sprite-urile CSS în practică. Vă vom arăta mic exemplu folosind un sprite care conține pictograme retele sociale(am aratat-o mai sus). În starea normală a legăturii, pictograma rețelei sociale va fi colorată ( rândul de sus sprite), iar când treceți cursorul acesta va deveni gri (ca în rândul de jos).
Marcajul HTML arată astfel:
Am creat propria noastră clasă pentru a face legătura cu fiecare rețea socială. Deoarece acesta este un exemplu de testare, nu pierdem timpul completând atributele href - în loc de link-uri către site-uri reale, punem substituenți. În interiorul etichetei nu postăm nimic pentru că aspect link-urile vor răspunde cu imaginile lor de fundal cu pictograme de social media.
Să trecem la CSS. În primul rând, să scriem stiluri generale pentru toate link-urile:
A ( imagine de fundal: url(https://goo.gl/1t18Rz); repetare de fundal: fără repetare; înălțime: 98 px; lățime: 100 px; afișare: bloc inline; margine-dreapta: 10 px; )
Următoarele două linii sunt înălțimea și lățimea fiecărui element . Cum au fost determinate aceste valori? Aici am pornit de la dimensiunea pictogramelor din sprite. Înălțimea fiecărei pictograme este de 98 de pixeli, iar lățimea este de 100 de pixeli. Apoi, vom poziționa imaginea de fundal pentru fiecare link, ajustând fundalul astfel încât pictograma să se potrivească exact în „fereastra” de 98x100 pixeli a link-ului.
A.facebook (poziția de fundal: stânga sus; )
Să mergem mai departe: poziționați fundalul pentru link-ul Twitter. Pictograma Twitter este poziționată în partea dreaptă a Facebook-ului și o flanchează fără a crea spații goale. Trebuie să mutăm sprite-ul la stânga suficienți pixeli pentru a ascunde pictograma Facebook și a umple complet zona de link cu pictograma Twitter. Deoarece lățimea fiecărei pictograme este de 100 de pixeli, deplasăm fundalul la stânga cu 100 de pixeli. Încă nu schimbăm poziționarea verticală nicăieri, dar lăsăm valoarea în partea de sus:
A.twitter (poziția de fundal: -100px sus; )
Vom face o acțiune similară pentru link-urile rămase, adăugând la fiecare ulterioară poziționare orizontalăîncă 100 de pixeli, deplasând astfel sprite-ul din ce în ce mai mult spre stânga. Veți obține această imagine:
A.youtube ( poziția fundalului: -200px sus; ) a.instagram ( poziția fundalului: -300px sus; ) a.linkedin ( poziția fundalului: -400px sus; ) a.tumblr ( poziția fundalului: -500px sus ; ) a.google ( background-position: -600px sus; )
Rezultatul acestui cod este afișat în captura de ecran de mai jos:
Acum să ne uităm la comportament imagini de fundal când treci cu mouse-ul peste un link. Trebuie să deplasăm sprite-ul vertical în sus, astfel încât pictograma din rândul de jos al sprite-ului să cadă în zona de vizualizare. Totul aici este destul de simplu și poate fi rezolvat cu unul singur regula CSS, și anume prin atribuirea valorii de jos proprietății background-position-y:
A:hover ( fundal-poziție-y: jos; )
În cazul nostru, acest stil poate fi scris unul pentru toate linkurile și va funcționa corect. Cu toate acestea, în alte situații în care elementele din sprite sunt într-o ordine diferită, poate fi necesar să scrieți mai mult cod.
Vedeți demonstrațiile de mai jos pentru rezultatul sprite-urilor de lucru (pentru a face exemplul mai frumos, am făcut ca fundalul să se schimbe mai fin când trecem cursorul):
Dacă ați fost interesat, iată linia care este responsabilă pentru schimbarea lină a pictogramelor (nu vă faceți griji, puțin mai târziu vom studia animația CSS și în special proprietatea de tranziție):
A (tranziție: toate cele 0,2 secunde se eliberează; )
Deci acum știi ce sunt sprite-urile CSS și cum pot fi utile. Pe lângă prevenirea întârzierilor la încărcarea imaginilor de fundal, utilizarea sprite-urilor ajută la reducerea încărcării pe server. Mai mult, asta mod convenabil stocați toate elementele interfeței grafice într-un singur loc.
Așa că ne-am uitat la principalele metode de stilare a linkurilor. Vă recomandăm să exersați în continuare pentru a vă consolida cunoștințele dobândite. Iar următorul capitol al cărții noastre este dedicat animației CSS, a cărei implementare a fost posibilă datorită proprietăților care au apărut în CSS3. Și în prima lecție vom analiza proprietatea de transformare -
