Planșă de sprite-uri

Cu Planșă de sprite-uri, fotografii și creatorii vizuali pot să grupeze pictogramele și CSS-ul înainte de integrare. Adună pictogramele într-o singură planșă și obține foaia CSS asociată.

Adună pictogramele într-o singură planșă și obține foaia CSS asociată. Folosește-l gratuit în browser, fără să creezi un cont.

Cum se folosește

Alegeți mai multe imagini PNG, JPEG sau WebP; fiecare trebuie să aibă cel mult 20 MB și aveți nevoie de între 2 și 100 de fișiere.
Setați lățimea maximă dorită pentru planșa finală, în pixeli.
Adăugați o margine în jurul fiecărui sprite, astfel încât pictogramele să nu se atingă.
Construiți planșa și descărcați atât imaginea, cât și foaia de stil CSS.

Exemplu

Un dezvoltator front-end asamblează un set de pictograme mici pentru o bară de navigare. Încarcă fișierele, alege o lățime sensibilă a planșei și o margine mică, apoi adaugă planșa generată și CSS în proiect. Pagina poate solicita o singură imagine în loc de multe fișiere separate.

Limite și formate

Rezultatul este o planșă bitmap, nu un sistem vectorial de pictograme, așa că o mărire puternică poate înmuia pictogramele.
Fișierele de intrare trebuie să fie PNG, JPEG sau WebP, cu un plafon de 20 MB per imagine și un total între 2 și 100 de fișiere.
Verificați CSS-ul generat în raport cu structura proiectului, deoarece numele claselor sau căile fișierelor pot necesita ajustări.
O lățime prost aleasă sau prea multe imagini pot crea o planșă greu de întreținut mai târziu.

Unde are loc procesarea

Construirea planșei și generarea CSS rulează în browser. Fișierele imagine nu sunt încărcate, nu este necesar cont, iar resursele finalizate devin disponibile pentru descărcare pe dispozitiv.

Întrebări frecvente

Cum ar trebui să aleg lățimea maximă a planșei?

Gândiți-vă câte pictograme aveți și unde va fi folosită planșa. O lățime moderată împiedică planșa să devină extrem de înaltă, în timp ce o planșă mai lată poate reduce înălțimea. Încercați o valoare, inspectați rezultatul și ajustați dacă aspectul pare dezechilibrat.

Trebuie să folosesc fișierul CSS generat?

Îl puteți folosi așa cum este furnizat, îl puteți adapta la convențiile dvs. de denumire sau îl puteți citi pur și simplu ca ghid de poziționare. CSS-ul descrie unde se află fiecare sprite în planșă. Imaginea planșei în sine rămâne aceeași indiferent dacă păstrați sau nu foaia de stil.

Pot amesteca diferite formate de imagine într-o singură planșă?

Da, fișierele PNG, JPEG și WebP pot fi selectate împreună. Pentru pictograme, fișierele PNG cu transparență funcționează adesea cel mai bine, deoarece se combină curat cu diferite fundaluri de pagină. Verificați întotdeauna planșa finală, deoarece marginile și zonele de fundal pot varia în funcție de formatul sursă.