Nedēļas bezmaksas pakalpojumi: 12 bezmaksas CSS Sprite ģeneratori

CSS attēlu frizūras ļauj dramatiski samazināt HTTP pieprasījumu skaitu vietnē, apvienojot daudzus vai visus jūsu vietnes attēlus vienā failā. Pēc tam šo failu var izmantot kopā ar CSS fona pozicionēšanu, lai ieviestu atsevišķus attēlus.

Šīs tehnikas negatīvie ir tas, ka tas ir cītīgs, iesaistīts process, kurā jums ir nepieciešams manuāli apvienot savus attēlus un vijot ar CSS, lai katrs attēls tiktu parādīts pareizi. Par laimi ir vairāki bezmaksas tiešsaistes rīki, kas pilnībā automatizē šo procesu. Šodien mums ir lieliska divpadsmit šo rīku kolekcija, katram no kuriem ir savs unikāls sprite ģenerēšanas process. Neatkarīgi no tā, vai vēlaties izveidot kopiju no attēlu mapes vai pārveidot esošu vietni, mums ir rīki, kas palīdzēs jums paveikt darbu dažu sekunžu laikā.

CSS Sprite Generator: Projekta Fondue

Labs ģenerators ar daudzām iespējām. Jūs augšupielādējat .ZIP no visiem attēliem, kurus vēlaties pārvērst par spritiem, un tas rūpējas par pārējo. Tas izspiež attēlu un visas dažādās nepieciešamās “fona stāvokļa” vērtības.

CSS Sprites ģenerators

Neglīts un buggy, šis sprite ģenerators liek jums augšupielādēt katru attēlu atsevišķi. Izmēģiniet to, lai redzētu, ko domājat, bet, ja godīgi, šajā sarakstā ir labākas alternatīvas.

CSS Sprites - tiešsaistes CSS Sprite veidotājs / ģenerators

Šis ir diezgan jauks. Jūs varat viegli augšupielādēt attēlu kopu uzreiz, izvēlēties izvades faila veidu un pat izvēlēties iegūt Sass un CSS kodu. Ir arī dažas glītas iespējas automātiski ģenerēt hover efektus, piemēram, piesātināts un pārslēgts. Kopumā diezgan iespaidīgi, noteikti pārbaudiet to.

Spritebox - izveidojiet CSS no Sprite Images

Šis maršruts ved atšķirīgu, nedaudz mazāk automatizētu maršrutu. Tā vietā, lai izveidotu jums sprite attēlu, tas ļauj augšupielādēt jau izveidoto sprite un definēt konkrētas zonas, lai ģenerētu iegūto CSS. Lielisks rīks, ja vēlaties veidot sprites Photoshop un vēlaties tikai palīdzēt ar kodu.

Audekls: CSS Sprites ģenerators

Ja augšupielādējat šī attēla attēlus, tas jādara pa vienam, kas rada mazliet sāpju. Ja jums ir saites, kaut arī jūs varat vienkārši ielīmēt sarakstu ar atbilstošajiem klašu nosaukumiem, un jums ir vērts doties. Iespējas ietver polsterējumu un fona krāsas. Tas labi darbojās manā testēšanā, noteikti ir vērts to apskatīt.

Šuves - HTML5 sprite lapu ģenerators

Tas ļauj vilkt attēlus, kas ir satriecoši pēc visu neērto atinstalētāju izmantošanas, kurus citi izstrādātāji ir nākuši klajā. Pēc tam jūs varat vienkārši noklikšķināt uz vienas pogas, lai iegūtu attēlu, un otru, lai satvertu CSS. Praktiski nav iespēju, un tā darbojas tikai pārlūkprogrammās Chrome un Firefox, taču tā ir lieliski piemērota, ja vēlaties tikai ātru un vienkāršu risinājumu.

Spritemapper

Šis ir paredzēts tikai super nerds, tas ir lejupielādējams sprite ģenerators, kuru palaižat no komandrindas. Īstenošana tomēr ir patiešām slidena, jūs vienkārši norādiet to uz savu esošo CSS failu un veicat pārējo darbu. Tas ilgtermiņa sprite pārvaldības problēmu padara par tīru lietu, jo jūs vienkārši varat pakavēties pie sākotnējiem css un attēlu failiem un atkārtoti tos apstrādāt, kad notiek izmaiņas.

SpriteMe

SpriteMe ir satriecošs rīks, kas ļauj pilnībā saglabāt tipisko attīstības procesu taktā. Vienkārši izveidojiet savu lapu tā, kā jūs parasti darītu, izmantojot atsevišķus attēlus. Pēc tam, kad esat pabeidzis, atveriet lapu pārlūkprogrammā un nospiediet SpriteMe grāmatzīmi. Tas satver visus attēlus lapā, izveido kopsavilkumu un ģenerē CSS. Tas ir īpaši noderīgi, ja pārveidojat izejošu vietni.

Spritefy

Spritefy ir vēl viena opcija, kas ļauj pārlūkā vienkārši ievilkt failu kopu, lai tos apstrādātu. Tāpat kā valdziņiem, iespēju tiešām nav, taču tas noteikti ir ļoti ātrs veids, kā piecelties un darboties ar spritēm (tikai Chrome un Firefox).

CSS Sprite ģenerators

Šim vienam ir daži nevajadzīgi soļi ģenerēšanas un iestatīšanas procesā, tāpēc tas prasa dažas sekundes ilgāk nekā vairums citu alternatīvu, taču tam ir tonnas koda izvade, ieskaitot CSS un HTML, kā arī dažādi fragmenti katra attēla pievienošanai div vai span, ievietojot saites utt.

SpriteMeister - automātiskais CSS Sprite ģenerators

SpriteMeister ir līdzīgs iepriekš minētajam SpriteMe, tikai mazāk automatizēts. Tā vietā, lai izmantotu grāmatzīmi, manuāli augšupielādējat katru attēlu un pašreizējo CSS failu un pēc tam saņemat lejupielādi ar atjauninātu kodu un vienu attēlu.

Sprite Creator 2.0

Šis darbojas tāpat kā iepriekš Spritebox. Jūs augšupielādējat citur izveidoto sprite attēlu un izmantojat vienkāršu atlases procesu, lai katram attēlam automātiski ģenerētu atbilstošu CSS.

Mīlu to? Dalies ar to!

Ja jums patika šīs nedēļas bezmaksas dāvanu kolekcija, dalieties mīlestībā un nosūtiet saiti uz jūsu iecienītākajām vietnēm. Šeit ir ērts fragments, ko varat kopēt un ielīmēt, kā vēlaties!

12 bezmaksas CSS Sprite ģeneratori: http://goo.gl/NhLNR

© Copyright 2024 | computer06.com