Zbierz ikony w jeden arkusz wraz z arkuszem stylów CSS

Narzędzie Arkusz sprite’ów przydaje się fotografom i twórcom wizualnym, gdy chcą połączyć ikony i CSS przed wdrożeniem. Zbierz ikony w jeden arkusz wraz z arkuszem stylów CSS.

Zbierz ikony w jeden arkusz wraz z arkuszem stylów CSS. Narzędzie jest bezpłatne w przeglądarce i pokazuje wynik bez konieczności tworzenia konta.

Jak używać

Wybierz kilka obrazów PNG, JPEG lub WebP; każdy musi mieć 20 MB lub mniej, a potrzebujesz od 2 do 100 plików.
Ustaw maksymalną szerokość końcowego arkusza w pikselach.
Dodaj margines wokół każdego sprite'a, aby ikony się nie stykały.
Zbuduj arkusz i pobierz zarówno obraz, jak i jego arkusz stylów CSS.

Przykład

Front-end developer składa zestaw małych ikon do paska nawigacji. Wczytuje pliki, wybiera rozsądną szerokość arkusza i niewielki margines, a następnie dodaje wygenerowany arkusz i CSS do projektu. Strona może żądać jednego obrazu zamiast wielu oddzielnych plików.

Ograniczenia i formaty

Wynikiem jest arkusz rastrowy, a nie wektorowy system ikon, więc silne powiększenie może zmiękczyć ikony.
Pliki wejściowe muszą być w formacie PNG, JPEG lub WebP, z limitem 20 MB na obraz i łącznie od 2 do 100 plików.
Sprawdź wygenerowany CSS względem struktury projektu, ponieważ nazwy klas lub ścieżki plików mogą wymagać dostosowania.
Źle dobrana szerokość lub zbyt wiele obrazów może stworzyć arkusz, który później trudno utrzymać.

Gdzie odbywa się przetwarzanie

Budowanie arkusza i generowanie CSS odbywa się w przeglądarce. Pliki obrazów nie są przesyłane, konto nie jest wymagane, a gotowe zasoby można pobrać na urządzenie.

Częste pytania

Jak wybrać maksymalną szerokość arkusza?

Pomyśl, ile masz ikon i gdzie arkusz będzie używany. Umiarkowana szerokość zapobiega nadmiernemu wydłużeniu arkusza w pionie, a szerszy arkusz może zmniejszyć jego wysokość. Wypróbuj jedną wartość, sprawdź wynik i dostosuj, jeśli układ wydaje się niezrównoważony.

Czy muszę używać wygenerowanego pliku CSS?

Możesz użyć go w podanej formie, dostosować do swoich konwencji nazewnictwa lub po prostu odczytać jako wskazówkę dotyczącą pozycjonowania. CSS opisuje, gdzie każdy sprite znajduje się w arkuszu. Sam obraz arkusza pozostaje taki sam, niezależnie od tego, czy zachowasz arkusz stylów.

Czy mogę mieszać różne formaty obrazów w jednym arkuszu?

Tak, pliki PNG, JPEG i WebP można wybierać razem. W przypadku ikon najlepiej często sprawdzają się pliki PNG z przezroczystością, ponieważ dobrze łączą się z różnymi tłami stron. Zawsze sprawdź końcowy arkusz, ponieważ krawędzie i obszary tła mogą się różnić w zależności od formatu źródłowego.