Tjedni Freebies: 12 Free CSS Sprite Generators
CSS snimci slika omogućuju vam da dramatično smanjite broj HTTP zahtjeva na web mjestu kombiniranjem mnogih ili svih slika na vašoj web lokaciji u jednu datoteku. Ova se datoteka tada može koristiti zajedno s pozadinskim CSS pozicioniranjem za implementaciju pojedinačnih slika.
Loša strana ove tehnike je u tome što je to mukotrpan i uključen proces koji zahtijeva ručno kombiniranje slika i premještanja s CSS-om kako bi svaka slika bila pravilno prikazana. Srećom, postoji niz besplatnih mrežnih alata koji u potpunosti automatiziraju ovaj postupak. Danas imamo fantastičnu kolekciju dvanaest ovih alata, svaki sa svojim jedinstvenim postupkom generiranja sprite procesa. Bez obzira želite li stvoriti sprite iz mape slika ili pretvoriti postojeću web lokaciju, imamo alate koji će vam pomoći da posao bude obavljen u sekundi.
CSS Sprite Generator: Fond projekta
Dobar generator s puno mogućnosti. Prenosite .ZIP svih slika koje želite pretvoriti u sprite, a ostalo se brine za njih. Izbacuje sliku i sve različite vrijednosti „pozadine-položaja“ koje su vam potrebne.
CSS Sprites generator
Ružan i gadan, ovaj sprite generator prisiljava vas da pošaljete svaku sliku pojedinačno. Isprobajte da vidite što mislite, ali iskreno, na ovom popisu postoje i bolje alternative.
CSS Sprites - Online CSS Sprite Builder / Generator
Ovaj je prilično lijep. Jednostavno možete prenijeti hrpu slika odjednom, odabrati svoj izlazni naziv datoteke, pa čak i odlučiti da dobijete Sass i CSS kôd. Postoje i neke uredne opcije za automatsko generiranje lebdećih efekata, poput nezasićenih i okrenutih. Sveukupno prilično impresivno, svakako to provjerite.
Spritebox - Napravite CSS iz Sprite slika
Ovaj put vodi drugačijom, malo manje automatiziranom rutom. Umjesto da stvorite sprite sliku za vas, ona vam omogućuje da učitate već stvoreni sprite i definirate određena područja za generiranje rezultirajući CSS. Odličan alat ako želite da napravite sprite u Photoshopu i želite pomoć oko koda.
Canvas: CSS Sprites Generator
Ako prenosite slike za ovu, morate to raditi jednu po jednu, što predstavlja veliku muku. Ako imate poveznice, jednostavno ih možete zalijepiti na popis s odgovarajućim imenima klasa i dobro je ići. Opcije uključuju boje obloga i boje pozadine. Dobro je funkcioniralo u mom testiranju, definitivno vrijedi pogledati.
Stitchings - HTML5 sprite generator listova
Ovaj vam omogućuje povlačenje slika, što je fenomenalno nakon što koristite sve nespretne istovarače koje su smislili drugi programeri. Nakon toga možete jednostavno kliknuti na jedan gumb da biste dobili sliku i drugi da biste preuzeli CSS. Opcije gotovo da i nema, a radi samo u Chromeu i Firefoxu, ali savršeno je ako želite brzo i jednostavno rješenje.
Spritemapper
Ovaj je samo za super štrebere, to je preuzeti alat za sprite koji pokrećete iz naredbenog retka. Međutim, implementacija je vrlo glatka, jednostavno je usmjerite na postojeću CSS datoteku i čini ostatak posla. Zbog toga je problem s dugoročnim upravljanjem spriteom cinch jer možete jednostavno staviti na svoje originalne datoteke css i slike i ponovo ih obraditi kad dođe do promjene.
SpriteMe
SpriteMe je sjajan alat koji vam omogućuje da u potpunosti zadržite svoj tipični razvojni proces. Samo napravite stranicu kao što bi to obično koristili pojedinačne slike. Zatim, nakon što završite, otvorite stranicu u pregledniku i pritisnite tipku SpriteMe. Ovo hvata sve slike na stranici, stvara sprite i generira CSS. Ovo je posebno korisno ako pretvarate mjesto koje izlazi.
Spritefy
Spritefy je druga opcija koja omogućuje jednostavno povlačenje gomile datoteka u preglednik da biste ih obradili. Kao i kod šavova, tu stvarno nema mogućnosti, ali definitivno je super brz način da se ustanete i pokrenete sprites (samo Chrome i Firefox).
CSS Sprite Generator
Ovaj postupak ima nekoliko nepotrebnih koraka u procesu generiranja i postavljanja, pa je potrebno nekoliko sekundi duže od većine ostalih alternativa, ali ima tonu koda, uključujući CSS i HTML, zajedno s raznim isječcima za dodavanje svake slike div ili span, umetanje veza itd.
SpriteMeister - Automatski CSS Sprite Generator
SpriteMeister je mnogo sličan SpriteMe gore, samo je manje automatiziran. Umjesto da koristite marker, ručno prenesite svaku sliku i vašu trenutnu CSS datoteku, a zatim primite preuzimanje s ažuriranim kodom i jednom slikom.
Sprite Creator 2.0
Ova djeluje poput Spriteboxa gore. Prenosite sprite sliku koju ste stvorili drugdje i upotrebljavate jednostavan postupak odabira da biste automatski generirali odgovarajući CSS za svaku sliku.
Volim to? Podijeli!
Ako ste uživali u kolekciji besplatnih proizvoda ovog tjedna, podijelite ljubav i pošaljite link na svoje omiljene stranice. Evo vam zgodan isječak koji možete kopirati i zalijepiti po želji!
12 besplatnih CSS sprite generatora: http://goo.gl/NhLNR
