15 Great HTML5 och CSS3 Generators
HTML5 och CSS3 är bra språk för att börja lära sig med, och jag har alltid trott att ett av de bästa sätten att börja lära sig är att bara dyka in och manipulera koden. Som du säkert skulle kunna säga, det här är var generatorer går in. De är ett bra sätt att generera en kod, spela med det och lära sig.
Inte bara det, de är oerhört användbara eftersom ofta vi som utvecklare eller designer tycker att vi gör saker om och om igen. Tja, generatorer kan ta av den kanten och göra de små sakerna för dig varje gång.
Som ett exempel har jag ett textutvidgningsutdrag som skapar en HTML5-mall som jag skrev om här . Nu är textexpander stor men det löser inte allt behov, och i detta fall finns det ett stort behov av generatorer så jag tog mig tid att hitta 20 av min favorit och beskriva varför jag gillar dem.
Jag kommer att säga att den mesta av denna lista kommer att fokusera på CSS3 generatorer, helt enkelt för att de är efterfrågade mer än HTML5 generatorer, och vi kommer att lära oss varför. Obs! Klicka på bilderna för att öppna webbplatserna.
CSS3 Generatorer
Det finns en något negativ konnotation när det gäller dessa generatorer, och jag måste säga att som designer och utvecklare är det inget negativt att använda en. Det är en enorm tidsbesparare, och jag vet allihopa tre utvecklare som skrev sina egna generatorer bara för att de ville hjälpa samhället. Så kom ihåg att det inte är som att du använder något tabu gjort av AOL; Dessa är väldigt naturliga och organiska generatorer som har uppstått när vi har behövt dem. Så varför inte dela i någon av rikedomarna? Låt oss gå igenom några av mina favoriter, och varför kan du njuta av dem.
Generella generatorer
Detta avsnitt kommer att inriktas på generatorer som tar hand om breda spektrumbehov och användningsområden. Dessa kommer att täcka nästan allt du kan behöva, eller vill ha i en generator, men av sin natur kan de vara sämre på särdrag. Det är därför jag kommer att ge så många alternativ senare i denna artikel för specifika typer.
CSS3.me
Detta är en av de exakta generatorer som jag bara hänvisade till. Den här skapades av en av mina favoritdesigners, Eric Hoffman , och det är fantastiskt. Mycket enkel, minimal och elegant, men samtidigt mycket funktionell. Ge dig möjligheten att ändra och ställa in gränsen radie, släpp skugga, gradient och opacitet - det är ganska funktionellt.
Obs! Ta en titt på Erics webbplats; det är ett bra exempel på mobil första design. Han är också en designer på Zendesk , så skicka honom lite kärlek om du någonsin haft den produkten.
CSS3 Maker
Ofta kommer människor att finna generatorer som de älskar och hålla fast vid dem. Och det är precis vad som hände med en klient som jag hade arbetat med tidigare med avseende på denna generator. Han var helt kär i det, och jag kan se varför - det är säkert funktionellt. Det kanske inte är den vackraste någonsin gjort, men det verkar ha alla klockor och visselpipor.
Du kan göra @ font-face-arbete, animationsarbete, boxskuggor, textskuggor, textrotation, övergångar, gradienter, gränsenradie och mycket mer. Det är en som jag vanligtvis har bokmärkt, men använder sällan helt enkelt på grund av hur bra de mindre generatorer gör i var och en av sina respektive kategorier. Men det är verkligen en bra generator för att försöka om du behöver en och gillar inte att hoppa runt till en massa olika.
CSS3 Generator
Detta är en annan bra generell som ger en hel del funktionalitet. Jag gillar den här eftersom den har snygga och enkla nedgångar och lättanvänd funktionalitet. Designen är också ganska snygg. Det erbjuder också en bra boxstorlek funktionalitet. Den här har bra förmåga att göra följande: gränserradie, boxskugga, textskugga, RGBA, flera kolumner, boxstorlek, disposition, övergångar, transformer, väljarklasser. Jag tycker att detta är en av mina favoriter, eftersom designen och användargränssnittet är så rena. Jag brukar använda den här när jag glömmer cssmaker.
Knappgeneratorer
CSS3-Tricks Button Maker
En av de första knappmakare som jag såg tillbaka på dagen gjorde mig verkligen kramad. Det var väldigt linjärt, hade inget användargränssnitt (ironiskt) och var generellt en hemskt utformad produkt. Som en sidotal talar jag om något liknande nästa, men för nu visar jag en som jag hittade på css3tricks , och det är verkligen en trevlig.
En av de viktigaste punkterna till referens här är det faktum att det är nästan helt kontrollerbart med en dra och släpp skjutreglage, vilket är riktigt bra. Vänta bara tills du måste skriva in allt manuellt med tangentbordet och du kommer att önska att du hade en bra slävare. Som en sista sidotal är CSS3 Tricks en underbar webbplats med massor av välorganiserat och tankeväckande innehåll som du alla skulle vilja kolla in.
CSS3 Button.net
Och nu kommer vi till generatorn som jag bara hänvisade till. Designen kan saknas, men det erbjuder mycket mer val än den tidigare, vilket ironiskt nog ofta är hur sakerna fungerar. Ibland vill du ha användarvänlighet och ibland behöver du ett seriöst val när det gäller generatorer, och de två sista träffar verkligen båda dessa punkter.
Den här erbjuder möjligheten att lägga till flera textskuggor, inre skuggor, ramar och teckensnitt, medan den sista verkligen inte kom in i den mycket detaljerade bilden. Det kan vara svårt att förstå först men du får det om du bara spelar med det i några minuter. Jag tycker att den här är den mest användbara om du är van vid Windows-användargränssnitt, och som ett resultat har jag fått klienter berätta för mig att detta var deras favorit eftersom de har fastnat på XP i flera år och inte vet bättre. Och nu är jag säker på att några av er undrar, men det är ärligt hur det går - vissa kunder vill ha länkar till generatorer för att lära sig själva efter att du imponerar på dem. Jag brukar länka dem till Lynda , TeamTreehouse , och några av dessa generatorer för gott mått.
CSS3 Button Generator
Detta är en riktigt kul. Det ger dig en stor knapp att manipulera, det är också i en rad retro färg. Därefter kan du manipulera skugga, kant, färg och ovanpå det ger dig möjlighet att redigera svängningen. Jag gillar den här eftersom det är en som jag hittade en stund tillbaka när jag först kom in i CSS, och det gav mig verkligen en uppfattning om vad den kan göra. Drag- och släppreglagen är bra för personer som är nya på språken, eftersom du kan se vad du kan göra omedelbart. Nu ska jag säga att jag inte använder den här speciellt längre - i ljuset av andra som har kommit, men det är ett bra minne.
Border Image & Radius Generators
Border-bild
Inget slår border-image.com när det gäller att ta en viss bild och sedan kopiera den för att hitta rätt gränsstil. Se till att du inte bryter mot upphovsrätten och använder någon annans bild utan tillskrivning.
Men låt oss säga att du ritade en pil eller triangel och du vill hitta en generator för att upprepa den genom hela din webbplats eller till en gräns. Jo, ingenting är bättre än den här webbplatsen när det gäller det behovet. Du kan manipulera förskjutningen, storleken och den upprepning som bilden har.
Så fort du kommer fram på webbplatsen ser du en exempelbild som de har laddat in men det är verkligen mycket mer användbar än den bilden har visat. Jag brukar använda den för mönster i bakgrunden som jag vill repetera och / eller se hur det skulle se riktigt snabbt innan jag faktiskt replikerar hela bakgrunden i Photoshop. Du kan använda den för allt relaterat till upprepade bilder, verkligen.
Border-Radius
Detta är ett bra och minimalt litet verktyg, som jag ofta tycker är mycket praktiskt. Med det gör du bara hur mycket av en avrundad kant du vill ha på varje hörn. Mycket praktiskt, väldigt enkelt. Och då kan du bara kolla vilken typ av webbläsare prefix du vill ha med, och boom gjort. Det är en vacker användargränssnitt i all ärlighet. Det borde finnas test i datavetenskapliga kurser där allt du gör är att försöka komma med någonting så enkelt och funktionellt som det här är.
CSS3 Gradient Generators
Färg Zilla Gradient Editor
Detta faktureras som den ultimata CSS3 Gradient Editor, och för god rätt. Det är faktiskt så fantastiskt att det är den enda gradientredigeraren som jag kommer att inkludera här. Den har massor av funktioner, och är mycket användbar och lätt att komma igång med. Dra en liten bit runt de svarta och blå penna och du kommer snabbt se vad de gör. De gör också en webbläsare editor Krom eller Firefox Det är verkligen användbart för designers som arbetar på webben. Också vara säker på att leka med förinställningarna i den här, eftersom det ofta är tillräckligt bra för dem som valde dem gjorde ett bra jobb.
Typografiska generatorer / redaktörer
@fontface Generator
Det här är en väldigt intressant produkt. Vad det gör är att du kan ladda upp teckensnitt som du har valt från webben eller kan ha på datorn och sedan ge dig en utmatad fil som är redo att fungera med på webben. Du får mer än en sak men du får några saker. Du får CSS för @ font-face egenskaper med teckensnittet du valde, och en HTML-fil som visar teckensnittet och dess många användningsområden. Det är verkligen ett bra verktyg för att kontrollera om en typsnitt är full potential om du inte är helt säker på det, och speciellt om du inte har tid att skapa en hel webbplats med det tecknet innan du fattar beslutet.
Reverse CSS3 Generator
CSS3 snälla
Detta är en riktigt fascinerande produkt. I grund och botten vad det gör är att det ger dig en boxuppsättning och alla CSS för den och ger dig sedan möjlighet att slå av och på avdelningarna för att se vad de gör. Så du kan väsentligen omvandla CSS3 för att ta reda på vad det gör, och då kan du se vad du gör. Detta är ett utmärkt sätt att lära CSS3 om du är intresserad, men tror att generatorer är lite för komplicerade.
CSS3 Drop Shadow Generators
Webstools Shadow Generator
Jag gillar denna skugggenerator ganska mycket, för det går i detalj och djup när det gäller drop-skuggor som de andra generatorerna inte gör. Det kanske inte ser ut som den bäst utformade produkten någonsin, men det är verkligen fantastisk. Det har insatsskuggor, startskuggor och förmågan att manipulera förskjutningar, ställa in färger och göra ganska mycket vad du kan göra med koden - men i stället med en bra dragräns. Åh hur jag älskar draggbaren. Kolla in den här om du behöver se generellt vad din skuggidean kan se ut innan du kodar den hårt.
HTML5 generatorer
HTML5 generatorer är svåra att komma med, och orsaken till det är förmodligen på grund av hur bra HTML5 Boilerplate är. Vi kommer inte prata om det, för det är inte specifikt en generator, så jag summerar den här: Det är i grunden en HTML5-mall som redan är fylld och redo för dig att arbeta med, så gå och kolla om du har inte sett det. Det är ganska häftigt faktiskt. Många använder det som en startmall för sina webbplatser, och av goda skäl. Nu tillbaka till generatorer. Att hitta en kvalitet är faktiskt ganska svår, men jag har lyckats hitta några här som jag ska visa - och sedan har jag några mer generaliserade som berör alla ämnen i den här artikeln.
Shikiryu HTML5 Generator
Shikiryus HTML5 Generator är mycket mer komplex. Du kan lägga till funktioner som låter dig göra saker inuti Blueprint (mixins, etc) och fancy-typ - så det är faktiskt ganska användbart. Jag tycker om det eftersom det är lite mer semantiskt än de andra alternativen, och samtidigt kan du lägga till riktigt populära tredjepartsprogram som människor älskar att använda.
Byt till HTML5 Generator
Detta är en intressant generator. Vad det gör är att du kan skapa en snabb och enkel ram för bygga platser, men till skillnad från HTML5 Boilerplate, låter vi oss välja exakt vilka väljare vi föredrar att se i våra ramar. Jag har faktiskt brukade använda detta för att generera kod istället för HTML5 Boilerplate när jag behöver några fler selektorer eller objekt än det som erbjuds. Nu följer inte exakt alla de vackert utformade principerna för semantisk markup - som HTML5 Boilerplate gör - men det gör ett bra jobb, och du kan gå in och göra resten om du verkligen behöver använda den.
Quackit HTML5 Generator
Den här tar ett steg tillbaka, och istället för att bara ge dig en grupp kod som är ganska generisk och grundläggande, kan du ange all din egen information. Det här är verkligen användbart, och jag har hittat andra som är nyare på webbplatser verkligen älskar det. De älskar särskilt det, jag har funnit, genom att det genererar standardbasen HTML för dig att sedan göra ser dock du önskar med CSS. Så om du lär dig CSS, och är fortfarande lite dum på HTML (men inte säker på varför det skulle vara fallet) så kan du göra det på så sätt.
Och det handlar om att pakka upp det. Dessa generatorer är bara fantastiska för att arbeta på ett snabbt och smidigt sätt, men istället för för entreprenörer är de för designers. Och det är verkligen lysande enligt min åsikt. Har du en snabb idé om en radie i rad (tab'd kanske?), Eller en skugga, eller en färggradient eller en html5-mall med ritning som ingår - ja det är bara gjorda för dig då. Observera att detta inte var en uttömmande lista, men det var några av mina favoriter och de som mina kollegor tidigare använt. Jag gillar verkligen att använda många av dessa och hoppas du gör det också.