Sprites png. Crearea de sprite-uri CSS

Să terminăm cu lista. Acum să facem linkuri aproximativ în același mod:

A( padding: 0 0 0 20px; background:url("sprites.png") 0 -42px nu-repeat; ) a( padding:0 0 0 20px; background:url("sprites..png") 0 -21px nu se repeta)

Ce înseamnă selectoarele a? Se pare că acest selector obligă browserul să se aplice acest stil la toate linkurile care au un atribut href a cărui valoare începe cu linia http://site/. Sprite-ul în sine este folosit în același mod ca și în cazul unei liste. Voi lua în considerare doar un link - un link către blogul meu.

1. Determinăm linkul necesar prin href.. Puteți pur și simplu să atribuiți o clasă linkului dorit sau să adăugați stiluri la atributul stil direct în codul html. Sau identificați legătura dorită folosind orice altă metodă.
2. Facem o marjă de 20 de pixeli de la marginea stângă a unui anumit link
3. Specificați ca imagine de fundal imagine sprites.png
4. Imaginea pe care am ales-o pentru blogul meu este la 21 de pixeli de marginea de sus, ceea ce înseamnă că trebuie să mutăm fundalul cu 21 de pixeli în jos. În css am scris așa: „0 -21px”

Teme pentru acasă

Sprite-uri cu degrade

Acum să ne uităm la al doilea exemplu.


Această imagine arată o fereastră. O fereastră are un antet, un corp și un subsol. Fiecare dintre aceste elemente are setat un gradient de fundal. Aruncă o privire mai atentă, dacă nu este vizibil imediat, există o tranziție de culoare de la pal la saturat.

Vă voi arăta cum gradienții din această fereastră pot fi transformați în sprite. Antetul și subsolul ferestrei vor avea o înălțime fixă ​​- 30 de pixeli. Corpul ferestrei se va întinde în funcție de lungimea textului.

Acum să scriem codul html pentru fereastră:

Să începem să folosim sprite-uri. Să începem cu titlul ferestrei:

#window-header( înălțime:30px; fundal:#C0C0FF url("gradients.png") 0 0 repetare-x; )

În fișierul gradients.png, mai întâi există un gradient pentru antet, apoi pentru corp și apoi pentru linia de jos. Adică, gradientul pentru titlu începe chiar de sus. Prin urmare, pur și simplu setăm fișierul în sine ca fundal și indicăm poziția ca „0 0”, adică nu ne retragem nicăieri. Pentru a face gradientul să se întindă pe orizontală, scrieți „repeat-x”.

Pentru a vă asigura că întregul gradient se potrivește în antet, setați înălțimea la 30 de pixeli.

Să setăm un gradient pentru subsol în același mod ca și antet:

#window-footer( înălțime:30px; fundal: #C0FFC0 url("gradients.png") 0 -60px repetare-x; )

Doar că de data aceasta vom muta imaginea în jos cu 60 de pixeli.

Situația cu corpul ferestrei este mai complicată. Corpul nostru se va întinde, spre deosebire de antet și subsol. Adică, dacă pur și simplu facem un div pentru corpul ferestrei și punem un gradient acolo, atunci toate gradienții vor apărea în acest div simultan. Alternativ, putem pune gradientul pentru corp ultima vertical, dar ce se întâmplă dacă avem mai multe gradiente pentru blocurile care se întind? Nu poți face totul odată. O vom face un pic mai inteligent.

Codul CSS va fi după cum urmează:

#window-body(poziție:relativ; ) #window-body-gradient(poziție:absolut; stânga:0; sus:0; lățime:100%; înălțime:30px; background:url("gradients.png") 0 - 30px repetare-x ) #window-body-text( poziție:relativ; )

Acum vă voi spune mai detaliat ce am făcut aici. Iată separat codul html al corpului ferestrei:

După cum puteți vedea, mai avem două dive încorporate în corp. Primul „corp de fereastră-gradient” va fi responsabil pentru gradient. Al doilea „text-fereastră-corp” este pentru text. În plus, după cum reiese din codul CSS, am aplicat poziţia: relativ; pentru întreg corpul ferestrei.

Pentru gradient div specificăm poziție:absolut. Astfel, am eliminat div-ul de gradient din fluxul general. Acum acest div nu are niciun efect asupra nimic. Deoarece am specificat poziția: relativă pentru întregul corp, gradientul div nu plutește nicăieri mai departe decât părintele. Atașați-l la marginea din stânga și de sus a corpului ferestrei folosind „left:0; sus:0;". Setați înălțimea div-ului gradient la 30 de pixeli. Adică, aici indicăm înălțimea gradientului pe care îl vom atașa dacă înălțimea div-ului este mai mare decât înălțimea gradientului, atunci alte sprite-uri vor ieși în div. Și, în sfârșit, atașăm fișierul nostru gradients.png la div-ul gradient. Ca de obicei, mutăm fundalul cu distanța necesară în acest caz, mutăm fundalul cu 30 de pixeli în sus;

Acum avem un gradient în corpul ferestrei. Dar întunecă textul. Pentru a preveni ca textul să fie ascuns, vom împacheta întregul text într-un div și îi vom atribui poziția: relativă. Odată atribuit, textul va fi deasupra gradientului.

Asta e practic tot. Acum am plasat toate gradienții în fereastra noastră. Și în antet, și în corp, și în subsol.

Fac explicații atât de lungi, încât totul să fie complet clar. Dar, de fapt, dacă știi puțin despre aspect, atunci probabil că va fi suficient să te uiți la exemplele în sine:

Inca o data am duplicat linkul.

De fapt, puteți veni cu multe exemple de utilizare a sprite-urilor. Am arătat doar două exemple, dar aceste exemple ar trebui să fie suficiente pentru a înțelege cum funcționează sprite-urile. Dacă aveți întrebări, întrebați în comentarii.

Reclame

Sprite este o băutură răcoritoare incoloră, cu lămâie și lime, cu gust, fără cofeină, creată de Coca-Cola. A fost dezvoltat în Germania de Vest în 1959 ca Fanta Klare Zitrone și introdus în Statele Unite ca Sprite în 1961.

(Coca Cola), Fanta, 7 Up, Mist Twst. Băuturile Sprite și Pepsi sunt exemple ale unei clase numite băuturi răcoritoare/răcoritoare. Oamenii beau sifon, din diverse motive, inclusiv; gust dulce, ambalare convenabilă, disponibilitate și altele pentru a-și potoli setea.

O cutie de sifon contine echivalentul a 10 lingurite de zahar. Această cantitate de zahăr, în special sub formă lichidă, o creștere bruscă a zahărului din sânge și a insulinei provoacă reacții în organism. În timp, acest lucru poate duce la diabet sau rezistență la insulină, ca să nu mai vorbim de greutate și alte probleme de sănătate.

Reclame

Care sunt ingredientele din sprite?

Apă carbogazoasă, sirop de porumb bogat în fructoză, acid citric, arome naturale, citrat de sodiu, benzoat de sodiu (pentru a proteja gustul).

Descărcați galeria transparentă de imagini Sprite PNG.

Rezoluție: 800×2352
Dimensiune: 1645 KB
Format imagine: .png

Rezoluție: 409 × 1350
Dimensiune: 127 KB
Format imagine: .png


Rezoluție: 825×825
Dimensiune: 283 KB
Format imagine: .png


Rezoluție: 444 × 853
Dimensiune: 97 KB
Format imagine: .png


Rezoluție: 512×512
Dimensiune: 186 KB
Format imagine: .png

Rezoluție: 256×256
Dimensiune: 41 KB
Format imagine: .png



Rezoluție: 1600×1200
Dimensiune: 625 KB
Format imagine: .png

Rezoluție: 985 × 3524
Dimensiune: 1072 KB
Format imagine: .png


Rezoluție: 901×810
Dimensiune: 711 KB
Format imagine: .png

Pe site-urile web moderne puteți găsi un număr mare de grafice de diferite tipuri: imagini ale produselor, avatare de utilizatori, imagini care formează designul paginilor, butoane, pictograme, logo-uri etc. Și cu cât proiectul este mai mare, cu atât mai multe fișiere grafice sunt folosite. Când deschideți o pagină separată a site-ului în browser, toate elementele acesteia sunt încărcate. Prin urmare, atunci când există prea multe elemente grafice pe el, vitezele de încărcare tind să scadă semnificativ. Care, la rândul său, este plin de inconveniente pentru vizitatorii proiectului dumneavoastră.

Sprite CSS

Pe pagina de start Există un formular pentru încărcarea fișierelor grafice (pentru fiecare fișier există un buton separat). Inițial, sunt vizibile doar trei butoane de descărcare. Dacă aveți nevoie de mai multe, faceți clic pe „Need More”.

După ce toate fișierele pentru viitorul sprite CSS sunt selectate, faceți clic pe butonul „Opțiuni”. În fața ta se va deschide un mic panou cu setări. Aici puteți seta umplutura între elemente în pixeli, puteți adăuga un cadru pentru imagini, puteți alinia toate imaginile din sprite-ul finit la marginea din stânga sau de sus și puteți seta culoarea de fundal în format RGB.

După ce faceți clic pe butonul „Generare”, sprite-ul CSS va fi creat direct. Veți vedea, de asemenea, mici instrucțiuni de utilizare, și anume codul CSS pe care va trebui să îl plasați pe site-ul dvs. Există chiar un exemplu în HTML. Nu cred că este o problemă să-ți dai seama.

Din punct de vedere vizual, Dan’s Tools CSS Sprite Generator este un generator de sprite CSS destul de frumos, cu multe setări. Puteți, de exemplu, să alegeți un tip de inserare verticală sau orizontală a pictogramelor în imaginea de ansamblu.

Sprite CSS

În serviciul CSS Sprites totul este extrem de simplu atât în ​​design, cât și în setări. Există o alegere a formatului de imagine rezultat: PNG, JPEG, GIF. Pagina are un link către o versiune adaptivă de generare de sprite - Responsive CSS Sprites (deși nu am încercat-o).

Total. În principiu, am luat în considerare toate nuanțele despre cum să facem sprite-uri CSS și să le folosim. Generatoarele vor ajuta la accelerarea procesului de creare a elementelor, dar vă puteți descurca cu Photoshop. Dacă aveți întrebări, scrieți în comentarii.

I-a placut:
27

Ne-a plăcut: 4

Nicio traducere disponibilă.

sprite

la sau după"la""după""după"

angry_bird furios.png. index.html

UTF-8 index.html Windows-1251 stil.css angry_bird

http://spritecow.com

supărat.png,

angry_bird fișier de stil stil.css imagini/. am prins asa:

Nicio traducere disponibilă.

Sprite-urile CSS sunt grafice pentru site-ul dvs. Web, combinate într-una singură fisier grafic. — De ce un singur dosar? - întrebi tu. 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 câteva dintre cele mai bune practici folosind sprite-uri. Însuși numele sprite-urilor vă poate aminti de sprite-uri de jocuri, console de jocuri retro și chiar jocuri de browser care sunt atât de populare astăzi:

Deci, aplicabil designului web, sprite este doar un fișier mare care conține mai multe imagini pentru site-ul dvs., economisind timp la 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. La încărcarea unui fișier grafic cu mai multe imagini, trimitem o singură cerere către server și la încărcare cantitate mare poze - trimitem mai multe cereri către server. Combinarea imaginilor într-un singur fișier nu numai că reduce semnificativ numărul de solicitări HTTP, darși reduceți dimensiunea totală a fișierului de 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:

Vă puteți întreba - când este cel mai bun moment pentru a pregăti un sprite? Există două abordări diferite pentru aceasta.

Abordări diferite - crearea unui sprite înainte și după crearea site-ului

Există două abordări comune atunci când creați o foaie de sprite - faceți-ola sau dupăcrearea site-ului dvs. web. Puteți plasa toate imaginile într-o foaie de sprite înainte de a crea site-ul. Aceasta este ceea ce numim abordare"la". În plus, puteți crea toate imaginile ca fişiere separate, ceea ce facilitează 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 va fi mai potrivită pentru dvs"după". 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 lăsați mai mult spațiu în jurul lor dacă toate au aceeași dimensiune. 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 pentru imaginile pe care le doriți. Iată un exemplu de plasare cu succes a diferitelor imagini într-un singur sprite:

De la teorie la practică! Creează o pasăre animată din Angry Birds folosind un 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 joc Păsări supărate- 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 undeva pe disc angry_bird- vom plasa fișierele noastre exemple acolo. Salvați sprite-ul cu păsări în acest director și apelați fișierul furios.png. Următorul pas este să creați un fișier în același director cu numele 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:

Lasă-mă să explic puțin ce am făcut acum. Mai întâi, setăm codificarea documentului nostru HTML UTF-8, ceea ce înseamnă că trebuie să ne păstrăm index.htmlîn această codificare. De asemenea, puteți specifica altul, de exemplu, Windows-1251, - pentru sarcina noastră acest lucru nu este important. Apoi, am conectat fișierul de stil la document stil.css(nu este încă în catalogul nostru angry_bird, îl vom crea puțin mai târziu). De asemenea, am stabilit un link către un script extern și am inclus 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.Com

Sarcina de a „taia” un sprite este destul de laborioasă - necesită grijă să nu faceți greșeli cu 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 caseta de dialog care se deschide, selectați fișierul nostru sprite supărat.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 în catalogul nostru angry_bird fișier de stil stil.css. 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 din proprietatea de fundal - imagini/. 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 este să scrieți codul jQuery care creează animația.

Acum că am tăiat cu succes sprite-ul și am plasat 4 stiluri pentru fiecare imagine din fișierul nostru stil.css, tot ce trebuie să facem este să scriem cod jQuery care va adăuga animație atunci când trecem cu mouse-ul peste hyperlinkul nostru și când facem clic pe link. 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 pasăre-normală
• mousedown - handler pentru a face clic pe butonul stâng al mouse-ului pe un link. În acest caz, 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

Ei bine, asta este! 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.