HTML5 og CSS3 er flotte språk for å begynne å lære med, og jeg har alltid trodd at en av de beste måtene å begynne å lære er å bare dykke inn og manipulere koden. Som du sikkert kunne fortelle, er det her generatorer går inn. De er en fin måte å generere kode på, spille med det og lære.

Ikke bare det, de er utrolig nyttige fordi ofte som utvikler eller designer finner vi at vi gjør ting igjen og igjen. Vel, generatorer kan ta av den kanten og gjøre de små ting for deg hver gang.

Som et eksempel har jeg en tekstutvidelsesbit som lager en HTML5-mal som jeg skrev om her . Nå er tekstutvidelsen stor, men det løser ikke alle behov, og i dette tilfellet er det stort behov for generatorer, så jeg tok deg tid til å finne 20 av min favoritt og beskrive hvorfor jeg liker dem.

Jeg vil si at det meste av denne listen skal fokusere på CSS3 generatorer, bare fordi de er etterspurt mer enn HTML5 generatorer, og vi vil lære hvorfor. Merk: klikk på bildene for å åpne nettstedene.

CSS3 Generatorer

Det er en noe negativ konnotasjon når det gjelder disse generatorene, og jeg må si at som designer og utvikler er det ikke noe negativt om å bruke en. Det er en stor tidsbesparende, og i all ærlighet kjenner jeg tre utviklere som skrev sine egne generatorer bare fordi de ønsket å hjelpe samfunnet. Så husk det er ikke som om du bruker noe tabu laget av AOL; Disse er veldig naturlige og organiske generatorer som har kommet fram som vi har trengte dem. Så hvorfor ikke dele i noen av rikdommen? La oss gå gjennom noen av min favoritt, og hvorfor du kan nyte dem.

Generelle generatorer

Denne delen vil fokusere på generatorer som tar vare på bredspektbehov og bruk. Disse vil dekke nesten alt du trenger, eller vil ha i en generator, men av sin natur kan de være verre på detaljer. Det er derfor jeg vil gi så mange alternativer senere i denne artikkelen for bestemte typer.

CSS3.me

Dette er en av de nøyaktige generatorene jeg bare refererte til. Denne ble laget av en av mine favorittdesignere, Eric Hoffman , og det er fantastisk. Veldig enkel, minimal og stilig, men samtidig veldig funksjonell. Gir deg muligheten til å endre og angi grensen radius, slipp skyggen, gradienten og opaciteten - det er ganske funksjonelt.

Merk: Ta en titt på Erics nettsted; det er et godt eksempel på mobil første design. Han er også en designer på Zendesk , så send ham litt kjærlighet hvis du noen gang har hatt det samme produktet.

CSS3 Maker

Ofte vil folk finne generatorer som de elsker, og holder seg til dem. Og det er akkurat det som skjedde med en klient jeg hadde jobbet med tidligere med hensyn til denne generatoren. Han var helt forelsket i det, og jeg kan se hvorfor - det er sikkert funksjonelt. Det kan ikke være den vakreste tingen noensinne laget, men det ser ut til å ha alle klokkene og fløyter.

Du kan gjøre @ font-face-arbeid, animasjonsarbeid, bokseskygger, tekstskygger, tekstrotasjon, overganger, gradienter, kantlinje og mye mer. Det er en som jeg vanligvis har bokmerket, men bruker sjelden bare på grunn av hvor bra de mindre generatorene gjør i hver av sine respektive kategorier. Men det er absolutt en god generator å prøve hvis du trenger en og ikke liker å hoppe rundt til en haug med forskjellige.

CSS3 Generator

Dette er en annen god generell som gir mye funksjonalitet. Jeg liker denne fordi det har gode og enkle nedtrekk, og enkel å bruke funksjonalitet. Designet er også ganske fint. Det tilbyr også en fin boksstørrelse funksjonalitet. Dette gir deg god mulighet til å gjøre følgende: kantlinje, boksskygge, tekstskygge, RGBA, flere kolonner, boksstørrelse, disposisjon, overganger, transformasjoner, markørvalg. Jeg tror dette er en av mine favoritter, fordi design og brukergrensesnitt er så rent. Jeg bruker vanligvis denne når jeg glemmer cssmaker.

Knappgeneratorer

CSS3-Tricks Button Maker

En av de første knappene som jeg så tilbake på dagen, fikk meg til å skramme. Det var veldig lineært, hadde ingen brukergrensesnitt til det (ironisk) og var samlet et fryktelig designet produkt. Som en sidemerking vil jeg snakke om noe lignende neste, men for nå vil jeg vise en jeg fant over på css3tricks , og det er virkelig en fin en.

Et av hovedpunktene til referanse her er at det er nesten helt kontrollerbart med en dra og slipp glidebryter, noe som er veldig fint. Bare vent til du må skrive inn alt manuelt ved å bruke tastaturet, og du vil ønske at du hadde en fin slidebryter. Som en siste side notat, CSS3 Tricks er et flott nettsted med massevis av godt organisert og gjennomtenkt innhold som du alle vil gjerne sjekke ut.

CSS3 Button.net

Og nå kommer vi til generatoren jeg bare refererte til. Designet mangler, men det gir mye mer valg enn den forrige, noe som ironisk nok ofte er hvordan ting fungerer. Noen ganger vil du ha brukervennlighet, og noen ganger trenger du noe seriøst valg når det gjelder generatorer, og disse to to har virkelig truffet begge disse punktene.

Dette gir muligheten til å legge til flere tekstskygger, indre skygger, kantlinje og skriftfarger, mens den siste ikke kom inn i så mye detalj. Det kan være vanskelig å finne ut først, men du får det hvis du bare spiller med det i noen minutter. Jeg finner denne til å være den mest nyttige hvis du er vant til Windows-brukergrensesnitt, og som et resultat har jeg fått klienter fortelle meg at dette var deres favoritt fordi de har sittet fast i XP i mange år og ikke vet noe bedre. Og nå er jeg sikker på at noen av dere lurer på, men det er ærlig hvordan det går - noen kunder vil ha koblinger til generatorer for å lære seg selv etter at du imponerer på dem. Jeg pleier å koble dem til Lynda , TeamTreehouse , og noen få av disse generatorene for godt mål.

CSS3 Button Generator

Dette er en veldig morsom. Det gir deg en stor knapp for å manipulere, det er også i en rad retro farge. Du kan da manipulere skygge, grense, farge og på den måten gir du muligheten til å redigere hover-over. Jeg liker denne fordi det er en som jeg fant en stund tilbake da jeg først kom inn i CSS, og det ga meg virkelig en ide om hva det kan gjøre. Dra og slipp glidebryterne er gode for folk som er nye på språkene, fordi du kan se hva du kan gjøre umiddelbart. Nå vil jeg si at jeg ikke bruker denne spesielt lenger - i lys av de andre som har skjedd, men det er et stort minne.

Border Image & Radius Generators

Border-bilde

Ingenting slår border-image.com når det gjelder å ta et bestemt bilde og deretter kopiere det for å finne den rette grenseformen. Sørg for at du ikke krenker opphavsretten selv, og bruk andres bilder uten attribusjon.

Men la oss si at du tegnet en pil eller en trekant, og du vil gjerne finne en generator for å gjenta den gjennom hele grensesnittet til ditt nettsted eller til og med et grensesnitt for et element. Vel, ingenting er bedre enn dette nettstedet når det gjelder det behovet. Du kan manipulere forskjellen, størrelsen og gjenta som bildet har.

Så snart du kommer på nettstedet, ser du et eksempelbilde de har lastet inn, men det er veldig mye mer nyttig enn det bildet har vist. Jeg vil ofte bruke den til design i bakgrunner som jeg vil gjenta og / eller se hvordan det ville se virkelig raskt, før du faktisk kopierer hele bakgrunnen i Photoshop. Du kan bruke den til alt relatert til gjentatte bilder, egentlig.

Border-Radius

Dette er et flott og minimalt lite verktøy, som jeg ofte finner er veldig praktisk. Med det er alt du gjør ganske enkelt angi hvor mye av en avrundet kant du vil ha på hvert hjørne. Veldig praktisk, veldig enkelt. Og så må du bare sjekke hvilken type nettleser prefiks du vil ha med, og boom ferdig. Det er en vakker UI i all ærlighet. Det bør være tester i datavitenskapskurs der alt du gjør er å prøve å komme opp med noe så enkelt og funksjonelt som dette er.

CSS3 Gradient Generators

Color Zilla Gradient Editor

Dette faktureres som den ultimate CSS3 Gradient Editor, og for godt til høyre. Faktisk er det så utrolig at det er den eneste gradientredaktøren som jeg vil inkludere her. Den har massevis av funksjoner, og er veldig brukbar og lett å komme i gang med. Bare dra de svarte og blå blyantene litt, og du vil raskt se hva de gjør. De lager også en nettlesereditor i Chrome eller Firefox Det er veldig nyttig for designere som arbeider på nettet. Sørg også for å leke med forhåndsinnstillingene i denne, fordi det ofte er bra nok til dem som valgte dem, gjorde en god jobb.

Typografiske generatorer / redaktører

@fontface Generator

Dette er et veldig interessant produkt. Hva det gjør er at du kan laste opp fonter du har valgt fra nettet eller kan ha på datamaskinen, og gir deg en utgående fil som er klar til å jobbe med på nettet. Du får mer enn én ting skjønt, du får noen ting. Du får CSS for @ font-face egenskaper gitt fonten du valgte, og en HTML-fil som viser skriften og dens mange bruksområder. Det er virkelig et flott verktøy for å sjekke ut et skriftlig fulle potensial hvis du ikke er helt sikker på det, og spesielt hvis du ikke har tid til å generere en hel nettside med skrifttypen før du tar avgjørelsen.

Omvendt CSS3 Generator

CSS3 Vennligst

Dette er et veldig fascinerende produkt. I utgangspunktet hva det gjør er at det gir deg et bokssett, og alle CSS for det, og gir deg muligheten til å slå avdelingene på og av for å se hva de gjør. Så du kan i hovedsak reversere utvikle CSS3 for å finne ut hva det gjør, og så kan du se hva du gjør. Dette er en fin måte å lære CSS3 hvis du er interessert, men tror at generatorer er litt for kompliserte.

CSS3 Drop Shadow Generators

Webestools Shadow Generator

Jeg liker denne skyggengeneratoren ganske mye, fordi det går i detalj og dybde angående drop-skygger som de andre generatorene bare ikke gjør. Det kan ikke se ut som det best utformede produktet noensinne, men det er absolutt kjempebra. Det har innsettingsskygger, startskygger og evnen til å manipulere forskyvninger, sette farger og gjøre stort sett alt du kan gjøre med kode - men i stedet med en fin dragerbar. Åh hvordan jeg elsker dragbaren. Sjekk dette ut hvis du trenger å se generelt hva din skyggeide kan se ut før du hardkodes den.

HTML5 Generatorer

HTML5-generatorer er slags vanskelig å komme forbi, og årsaken til det er trolig på grunn av hvor stor HTML5 Boilerplate er. Vi snakker ikke om det fordi det ikke er spesifikt en generator, så jeg vil oppsummere her: Det er egentlig en HTML5-mal som allerede er fylt ut og klar for at du skal jobbe med, så sjekk det om du har ikke sett det. Det er ganske utrolig faktisk. Mange bruker det som en startmaler for sine nettsteder, og med god grunn. Nå tilbake til generatorer. Å finne en kvalitet er faktisk ganske vanskelig, men jeg har klart å finne noen her som jeg skal vise - og så etterpå har jeg noen få mer generaliserte som berører alle emnene i denne artikkelen.

Shikiryu HTML5 Generator

Shikiryus HTML5 Generator er mye mer komplisert. Du kan legge til i funksjoner som lar deg gjøre ting inne i Blueprint (mixins, etc), og fancy-type - så det er faktisk ganske nyttig. Jeg liker det fordi det er litt mer semantisk enn de andre alternativene, og samtidig kan du legge til veldig populære tredjepartsprogrammer som folk elsker å bruke.

Bytt til HTML5 Generator

Dette er en interessant generator. Hva det gjør er at du kan generere et raskt og enkelt rammeverk for byggeplasser, men i motsetning til HTML5 Boilerplate, lar vi oss velge nøyaktig hvilke selektorer vi foretrekker å se i våre rammer. Jeg har faktisk hatt en tendens til å bruke dette til å generere kode i stedet for HTML5 Boilerplate når jeg trenger noen flere selektorer eller elementer enn den tilbyr. Nå følger ikke nøyaktig alle de vakkert utformede prinsippene for semantisk markering - som HTML5 Boilerplate gjør - men det gjør en god jobb, og du kan gå inn og gjøre resten hvis du virkelig trenger å bruke den.

Quackit HTML5 Generator

Denne tar et skritt tilbake, og i stedet for bare å gi deg en gruppe kode som er ganske generisk og grunnleggende, kan du legge inn all din egen informasjon. Dette er veldig nyttig, og jeg har funnet andre som er nyere på nettsteder, virkelig elsker det. De elsker spesielt det, jeg har funnet, ved at det genererer standardbasen HTML for deg, så får du se hvordan du ønsker med CSS. Så hvis du lærer CSS, og er fremdeles litt uklar på HTML (men ikke sikker på hvorfor det ville være tilfelle), så kan du gjøre det på denne måten.

Og det vil om å pakke det opp. Disse generatorene er bare fantastisk for å arbeide på en rask og smidig måte, men i stedet for for gründere er de for designere. Og det er veldig strålende etter min mening. Har du en rask ide for en radiusradius (tab'd kanskje?), Eller en skygge, eller en fargegradient, eller en html5-mal med blåkopi inkludert - vel, disse er bare laget for deg da. Vær oppmerksom på at dette ikke var en uttømmende liste, men det var noen av mine favoritter og de som kolleger mine tidligere har brukt. Jeg liker virkelig å bruke mange av disse, og håper du gjør det også.