Cotygodniowe gratisy: 12 darmowych generatorów sprite CSS
Duszki obrazów CSS pozwalają znacznie zmniejszyć liczbę żądań HTTP w witrynie, łącząc wiele lub wszystkie obrazy w witrynie w jeden plik. Ten plik może być następnie użyty w połączeniu z pozycjonowaniem tła CSS do implementacji pojedynczych obrazów.
Minusem tej techniki jest to, że jest to żmudny, zaangażowany proces, który wymaga ręcznego łączenia zdjęć i majstrowania przy CSS, aby każdy obraz wyświetlał się poprawnie. Na szczęście istnieje wiele bezpłatnych narzędzi online, które całkowicie automatyzują ten proces. Dzisiaj mamy niesamowitą kolekcję dwunastu z tych narzędzi, z których każde ma swój unikalny proces generowania duszka. Niezależnie od tego, czy chcesz utworzyć duszka z folderu zdjęć, czy przekonwertować istniejącą witrynę, mamy narzędzia, które pomogą Ci szybko wykonać zadanie.
CSS Sprite Generator: Projekt Fondue
Dobry generator z dużą ilością opcji. Przesyłasz .ZIP wszystkich obrazów, które chciałbyś zmienić w duszka, a on zajmuje się resztą. Wydziela obraz i wszystkie potrzebne wartości „pozycji tła”.
Generator duszków CSS
Ten brzydki i błędny generator sprite zmusza Cię do przesłania każdego obrazu osobno. Wypróbuj to, co myślisz, ale szczerze mówiąc, są lepsze alternatywy na tej liście.
CSS Sprites - Online CSS Sprite Builder / Generator
Ten jest całkiem niezły. Możesz łatwo przesłać kilka zdjęć naraz, wybrać typ pliku wyjściowego, a nawet wybrać w rezultacie kod Sass i CSS. Istnieje również kilka ciekawych opcji automatycznego generowania efektów aktywowania, takich jak desaturated i flip. Ogólnie dość imponujące, koniecznie sprawdź to.
Spritebox - Utwórz CSS z obrazów Sprite
Ten obiera inną, nieco mniej zautomatyzowaną trasę. Zamiast tworzyć dla Ciebie obraz duszka, możesz przesłać już utworzony duszek i zdefiniować określone obszary, aby wygenerować wynikowy CSS. Świetne narzędzie, jeśli wolisz budować duszki w Photoshopie i po prostu potrzebujesz pomocy z kodem.
Canvas: CSS Sprites Generator
Jeśli przesyłasz zdjęcia tego, musisz to robić pojedynczo, co jest trochę uciążliwe. Jeśli masz linki, możesz po prostu wkleić listę z odpowiednimi nazwami klas i możesz zacząć. Dostępne opcje to wypełnienie i kolory tła. Sprawdził się w moich testach, zdecydowanie warty obejrzenia.
Ściegi - generator arkuszy sprite HTML5
Ten pozwala przeciągać obrazy, co jest niesamowite po użyciu wszystkich niezręcznych programów do usuwania, które wymyślili inni programiści. Następnie możesz po prostu kliknąć jeden przycisk, aby uzyskać obraz, a drugi, aby pobrać CSS. Nie ma praktycznie żadnych opcji i działa tylko w Chrome i Firefox, ale jest idealny, jeśli chcesz tylko szybkiego i prostego rozwiązania.
Spritemapper
Ten jest przeznaczony tylko dla super-nerdów, jest to generator sprite do pobrania, który uruchamiasz z wiersza poleceń. Implementacja jest jednak bardzo łatwa, wystarczy wskazać na istniejący plik CSS, a on wykona resztę pracy. To sprawia, że problem długoterminowego zarządzania sprite'em staje się bardzo trudny, ponieważ możesz po prostu trzymać się oryginalnych plików css i plików graficznych i przetwarzać je ponownie, gdy nastąpi zmiana.
SpriteMe
SpriteMe to niesamowite narzędzie, które pozwala całkowicie zachować typowy proces programowania. Po prostu stwórz swoją stronę tak, jak zwykle przy użyciu pojedynczych zdjęć. Następnie, gdy skończysz, otwórz stronę w przeglądarce i kliknij w bookmarklet SpriteMe. To przechwytuje wszystkie obrazy na stronie, tworzy duszka i generuje CSS. Jest to szczególnie przydatne, jeśli konwertujesz wychodzącą witrynę.
Spritefy
Spritefy to kolejna opcja, która pozwala po prostu przeciągnąć kilka plików do przeglądarki w celu ich przetworzenia. Podobnie jak w przypadku ściegów, naprawdę nie ma żadnych opcji, ale zdecydowanie jest to bardzo szybki sposób na rozpoczęcie pracy ze sprite'ami (tylko Chrome i Firefox).
CSS Sprite Generator
Ten ma kilka niepotrzebnych kroków w procesie generowania i konfiguracji, więc zajmuje kilka sekund dłużej niż większość innych alternatyw, ale ma mnóstwo kodu wyjściowego, w tym CSS i HTML, a także różne fragmenty do dodawania każdego obrazu do div lub span, wstawianie linków itp.
SpriteMeister - Automatyczny generator sprite CSS
SpriteMeister jest podobny do SpriteMe powyżej, tylko mniej zautomatyzowany. Zamiast używać bookmarkletu, ręcznie przesyłasz każdy obraz i bieżący plik CSS, a następnie otrzymujesz plik do pobrania ze zaktualizowanym kodem i pojedynczym obrazem.
Sprite Creator 2.0
Ten działa podobnie jak powyżej Spritebox. Przesyłasz obraz duszka, który utworzyłeś gdzie indziej i używasz prostego procesu selekcji, aby automatycznie wygenerować odpowiedni CSS dla każdego obrazu.
Kocham to? Udostępnij to!
Jeśli podobała Ci się kolekcja gratisów z tego tygodnia, podziel się miłością i wyślij link do swoich ulubionych stron. Oto wygodny fragment, który możesz skopiować i wkleić według własnego uznania!
12 darmowych generatorów sprite CSS: http://goo.gl/NhLNR
