15 skvělých generátorů HTML5 a CSS3
HTML5 a CSS3 jsou skvělé jazyky, ve kterých se můžete začít učit, a vždycky jsem si myslel, že jedním z nejlepších způsobů, jak začít učit se, je jen ponořit se do kódu a manipulovat s ním. Jak byste asi mohli říct, to je místo, kde generátory vstoupí. Jsou skvělým způsobem, jak vytvořit nějaký kód, hrát si s ním a učit se.
Nejen, že jsou neuvěřitelně užitečné, protože často jako vývojář nebo návrhář zjistíme, že děláme věci znovu a znovu. No, generátory se mohou zbavit toho hrany a dělat tyto malé věci pro vás pokaždé.
Jako příklad mám úryvek pro rozbalení textu, který vytvoří šablonu HTML5, o které jsem napsal tady . Nyní je text-expander skvělý, ale nevyřeší všechny potřeby, a v tomto případě je velká potřeba generátorů, takže jsem si našel čas najít 20 svých oblíbených a popsat, proč se mi líbí.
Řeknu, že většina z tohoto seznamu se zaměří na generátory CSS3, jednoduše proto, že jsou v poptávce více než generátory HTML5 a dozvíme se proč. Poznámka: klepnutím na obrázky otevřete webové stránky.
Generátory CSS3
Existuje poněkud negativní konotace, pokud jde o tyto generátory, a musím říci, že jako návrhář a vývojář není nic negativního, pokud jde o použití jednoho. Je to obrovský spořič času a ve všem čestnosti vím tři vývojáře, kteří napsali vlastní generátory jen proto, že chtějí komunitu pomoci. Takže mějte na paměti, že není to, že používáte něco tabu od AOL; jsou to velmi přirozené a organické generátory, které vznikly, protože je potřebujeme. Tak proč se nepodílejte na nějakém bohatství? Projdeme pár mých oblíbených a proč byste si je mohli užít.
Generální generátory
Tato část se zaměří na generátory, které se starají o potřeby a využití širokého spektra. Ty budou pokrývat téměř všechno, co byste mohli potřebovat nebo chtěli v generátoru, ale podle jejich povahy by mohly být horší podle specifik. To je důvod, proč budu dávat tolik možností později v tomto článku pro konkrétní typy.
CSS3.me
Jedná se o jeden z přesných generátorů, o kterých jsem právě mluvil. Tenhle byl vytvořen jedním z mých oblíbených návrhářů, Eric Hoffman , a je to úžasné. Velmi jednoduchá, minimální a stylová, ale zároveň velmi funkční. Umožňuje vám měnit a nastavovat poloměr hran, stín, stoupání a opacitu - je to docela funkční.
Poznámka: Podívejte se na místo Erica; je to skvělý příklad mobilního prvního designu. On je také designér na Zendesk , tak mu pošlete nějakou lásku, pokud jste někdy užili tento produkt.
CSS3 Maker
Často lidé najdou generátory, které mají rádi, a držet se s nimi. A to je přesně to, co se stalo s klientem, s nímž jsem dříve pracoval s tímto generátorem. Byl to naprosto zamilovaný a já vidím proč - je to určitě funkční. To možná není ta nejkrásnější věc, kterou kdy udělal, ale zdá se, že má všechny zvonky a píšťalky.
Můžete provádět práci @ font-face, animační práci, stíněná pole, textové stíny, rotace textu, přechody, přechody, poloměr hranic a mnohem více. Jedná se o to, že obvykle mám záložku, ale jen zřídka využívám jednoduše proto, jak dobře dělají menší generátoři v každé své kategorii. Ale určitě je to dobrý generátor, který se snaží vyzkoušet, jestli potřebujete, a neradi se skočíte k nějakému jinému.
Generátor CSS3
Toto je další dobrý obecný, který poskytuje spoustu funkcí. Líbí se mi toto, protože má pěkné a snadné sestupování a snadno použitelné funkce. Návrh je také docela pěkný. Nabízí také pěknou velikost krabicové funkce. Tato možnost nabízí skvělé možnosti: poloměr okraje, stín pole, textový stín, RGBA, více sloupců, velikost rámečku, obrys, přechody, transformace, gradienty selektorů. Myslím, že je to jeden z mých oblíbených, protože design a uživatelské rozhraní jsou tak čisté. Obvykle to používám, když zapomenu na cssmaker.
Generátory tlačítek
CSS3-Triky Button Maker
Jeden z prvních výrobců knoflíků, který jsem v ten den viděl, mě opravdu zuřil. Bylo to velmi lineární, nemělo to žádné uživatelské rozhraní (ironicky) a bylo to celkově hrozně navržený produkt. Jako vedlejší poznámku budu mluvit o něčem podobném, ale zatím prozradím jednu, kterou jsem našel css3tricks , a je to opravdu pěkné.
Jedním z klíčových bodů, které zde můžeme zmínit, je skutečnost, že je téměř úplně ovládán posuvem, který je opravdu pěkný. Stačí počkat, až budete muset vše zadat ručně pomocí klávesnice a budete přát, abyste měli pěkný tažený jezdec. Jako poslední poznámka, CSS3 Triky je úžasné místo s množstvím dobře organizovaného a přemýšlivého obsahu, který byste všichni rád vybrali.
CSS3 Button.net
A teď přijdeme k generátoru, o kterém jsem právě mluvil. Návrh může být nedostatečný, ale nabízí mnohem větší výběr než předchozí, což je ironicky často, jak to funguje. Někdy byste chtěli snadné používání a někdy potřebujete nějakou vážnou volbu, pokud jde o generátory, a ty dva poslední opravdu zasáhly obě tyto body.
Ten nabízí možnost přidat více stínů textu, vnitřní stíny, hranice a barvy písma, zatímco poslední se skutečně nedostalo do toho tolik detailů. Možná to bude těžké přijít zpočátku, ale dostanete to, pokud si s ním několik minut hrajete. Myslím, že tohle je nejužitečnější, pokud jste zvyklí na Windows UI a v důsledku toho jsem klientům říkal, že tohle je jejich oblíbená, protože už mnoho let jsou na XP a neví o nic lepší. A teď jsem si jistý, že někteří z vás přemýšlíte, ale je to upřímně, jak to jde - někteří klienti chtějí spojení s generátory, aby se naučil pro sebe poté, co jste je zapůsobili. Obvykle je propojuji Lyndě , TeamTreehouse , a několik z těchto generátorů pro dobrou míru.
Generátor tlačítek CSS3
To je opravdu zábavné. To vám dává jedno velké tlačítko pro manipulaci, to je také v retro barvě. Pak můžete manipulovat se stínem, hranicí, barvou a navíc vám dává možnost upravovat vznášku. Líbí se mi tohle, protože jsem se vrátil zpátky, když jsem se poprvé dostal do CSS, a opravdu mi dal představu o tom, co může udělat. Posuvníky drag and drop jsou skvělé pro lidi, kteří jsou v jazycích noví, protože můžete vidět, co jste schopni udělat okamžitě. Teď už řeknu, že tohle už zvlášť nepoužívám - ve světle ostatních, které se přihodily, ale je to skvělá vzpomínka.
Generátory hraničných obrazů a poloměrů
Border-Image
Nic při hraní border-image.com nezbývá, pokud jde o získání určitého obrázku a následné replikaci, aby se našel správný styl ohraničení. Ujistěte se, že neporušujete autorská práva a používejte obraz jiného uživatele bez přiřazení.
Řekněme, že jste nakreslili šipku nebo trojúhelník a vy byste rádi našli generátor, který by ho opakoval v celém okraji vašeho webu nebo dokonce v hranici prvku. No, pokud jde o tuto potřebu, nic není lepší než tato stránka. Můžete upravit posun, velikost a opakování obrázku.
Jakmile přijedete na stránky, uvidíte ukázkový obrázek, který jste nahrali, ale je mnohem užitečnější, než ten obrázek ukázal. Často jej budu používat pro návrhy v pozadí, které chci opakovat a / nebo uvidím, jak to vypadá opravdu rychle, než skutečně replikuje celé pozadí ve Photoshopu. Můžete jej použít pro cokoli, co souvisí s opakovanými obrázky, opravdu.
Okrajový poloměr
Jedná se o skvělý a minimální nástroj, který často považuji za velmi praktický. Díky tomu vše, co děláte, je jednoduše nastavit, jak velká část zaoblené hrany chcete na každém rohu. Velmi praktické, velmi jednoduché. A pak stačí zkontrolovat, jaký prefix prohlížeče chcete zahrnout, a boom hotovo. Je to krásná uživatelská rozhraní ve všem čestnosti. Měly by být testy v kurzech počítačové vědy, kde vše, co děláte, je pokusit se najít něco tak jednoduchého a funkčního, jaký je.
Generátory gradientu CSS3
Barevný Zilla Gradient Editor
To je účtováno jako konečný Editor gradientů CSS3 a v pořádku. Ve skutečnosti je tak úžasné, že je to jediný gradientový editor, který zde budu obsahovat. Má spoustu funkcí a je velmi použitelné a snadné začít. Jednoduše přetáhněte černé a modré tužky trochu a rychle uvidíte, co dělají. Oni také dělají prohlížeč editor v Chrome nebo Firefox to je opravdu užitečné pro návrháře pracující na webu. Ujistěte se také, že si hrajete s předvolbami v tomto, protože často jsou to dost dobré - kdo si je vybral, dělal skvělou práci.
Typografické generátory / editory
@fontface Generator
To je opravdu zajímavý produkt. To, co dělá, je, že umožňuje nahrát písma, která jste si vybrali z webu nebo máte v počítači, a pak vám dává výstupní soubor, který je připraven pracovat s webem. Dostanete víc než jednu věc, ale máte pár věcí. Získáte vlastnosti CSS pro vlastnosti @ font-face s ohledem na zvolené písmo a soubor HTML, který zobrazuje písmo a jeho mnoho použití. Je to opravdu skvělý nástroj, jít o kontrolu plného potenciálu písma, pokud si nejste úplně jisti, a zvláště pokud nemáte čas generovat celou webovou stránku s tímto písem, než se rozhodnete.
Reverzní generátor CSS3
CSS3 Prosím
To je opravdu fascinující produkt. V podstatě to, co dělá, je to, že vám dává krabici a všechny CSS pro ni, a pak vám dává možnost zapínat a vypínat sekce a zjistit, co dělají. Takže můžete CSS3 v podstatě zvrátit, abyste zjistili, co dělá, a pak můžete vidět, co děláte. To je skvělý způsob, jak se naučit CSS3, pokud máte zájem, ale myslíte si, že generátory jsou příliš komplikované.
CSS3 Drop Shadow Generators
Stínový generátor Webestools
Moc se mi líbí tento generátor stínů, protože jde do detailů a hloubky, pokud jde o stíny, které ostatní generátory prostě nemají. Nesmí vypadat jako nejlépe navržený produkt vůbec, ale je to určitě úžasné. Má vložené stíny, začíná stíny a schopnost manipulovat s ofsety, nastavit barvy a dělat téměř vše, co můžete dělat s kódem - ale místo toho s pěkným přetahovacím pruhem. Ach, jak mám rád přetahující bar. Zaškrtněte toto, pokud potřebujete obecně vidět, jaký by měl vypadat váš stínový nápad předtím, než jej pevně kódujete.
Generátory HTML5
Generátory HTML5 jsou trochu těžké a důvodem je pravděpodobně kvůli tomu, jak skvělé HTML5 Boilerplate je. Nebudeme mluvit o tom, protože to není konkrétně generátor, takže si jej shrnu tady: Je to v podstatě šablona HTML5 již vyplněná a připravená pro vás pracovat, takže jděte podívat, jestli jste to neviděli. Je to docela úžasné. Hodně lidí jej používá jako předvolenou šablonu pro své stránky a z dobrého důvodu. Teď zpátky na generátory. Najít kvalitní je skutečně docela obtížné, ale podařilo se mi najít několik zde, které budu ukazovat - a pak mám ještě několik zobecněných, které se dotýkají všech témat v tomto článku.
Generátor Shikiry HTML5
Shikiryu HTML5 generátor je mnohem složitější. Můžete přidat funkce, které vám umožní dělat věci uvnitř Blueprint (mixins, atd.) A fantazie - tak to je vlastně docela užitečné. Líbí se mi to, protože je to poněkud více sémantické než ostatní možnosti a současně vám umožňuje přidat opravdu populární aplikace třetích stran, které lidé rádi používají.
Přepněte na Generátor HTML5
To je zajímavý generátor. To, co dělá, je, že vám umožňuje vytvářet rychlé a snadné prostředí pro vytváření webových stránek, ale na rozdíl od HTML5 Boilerplate nám umožňuje přesně vybrat , jaké selektory bychom rádi viděli v našem rámci. Vlastně jsem se snažil použít toto k vytvoření kódu namísto HTML5 Boilerplate, když potřebuji několik dalších selektorů nebo položek, než nabízí. Nyní přesně neodpovídá všem krásně navrženým zásadám sémantického značení - jako je HTML5 Boilerplate - ale dělá to dost dobře a můžete jít dovnitř a dělat zbytek, pokud ji opravdu potřebujete.
Chyba generátoru HTML5
Tento krok je krok zpět, a místo toho, že vám dává skupinu kódů, které jsou docela obecné a základní, umožňuje zadat všechny své vlastní informace. To je opravdu užitečné a zjistil jsem, že ostatní, kteří jsou novější na webových stránkách, ho opravdu milují. Zvláště se jim líbí, že jsem zjistil, že vytváří standardní HTML základnu, abyste si pak vybrali vzhled, který chcete s CSS. Takže pokud se učíte CSS a jsou stále trochu mlhavé na HTML (i když si nejste jisti, proč by to tak bylo), můžete to udělat takto.
A to o tom zabalit. Tyto generátory jsou úžasné pro rychlou a agilní práci, ale místo toho pro podnikatele jsou pro návrháře. A podle mého názoru je to opravdu skvělé. Máte rychlý nápad na poloměr okraje (možná karta?) Nebo stín nebo barevný gradient nebo html5 šablonu s plánem - ale tohle jsou právě pro vás. Mějte na paměti, že to nebyl vyčerpávající seznam, ale to bylo několik z mých oblíbených a těch, které moji kolegové v minulosti používali. Opravdu si užívám spoustu z těchto a doufám, že i vy.