15 Great HTML5 og CSS3 Generators
HTML5 og CSS3 er gode sprog til at begynde at lære med, og jeg har altid troet, at en af de bedste måder at begynde at lære er at bare dykke ind og manipulere koden. Som du sikkert kunne fortælle, er det her, hvor generatorer træder ind. De er en fantastisk måde at generere nogle kode på, spille med det og lære.
Ikke kun det, de er utroligt nyttige, fordi ofte som udvikler eller designer finder vi, at vi gør ting igen og igen. Nå, generatorer kan tage den kant ud og gøre de små ting for dig hver gang.
Eksempelvis har jeg en tekstudvidelsesbit, der opretter en HTML5-skabelon, som jeg skrev om her . Nu er tekstudvidelsen stor, men det løser ikke alle behov, og i dette tilfælde er der et stort behov for generatorer, så jeg tog mig tid til at finde 20 af min favorit og beskrive, hvorfor jeg kan lide dem.
Jeg vil sige, at den meste af denne liste vil fokusere på CSS3 generatorer, simpelthen fordi de er efterspurgte mere end HTML5 generatorer, og vi vil lære hvorfor. Bemærk: Klik på billederne for at åbne hjemmesiderne.
CSS3 Generatorer
Der er en noget negativ konnotation, når det gælder disse generatorer, og jeg må sige, at der som designer og udvikler ikke er noget negativt ved at bruge en. Det er en enorm tidsbesparende, og jeg kender helt ærligt tre udviklere, der skrev deres egne generatorer, bare fordi de ønskede at hjælpe samfundet. Så husk, det er ikke som om du bruger noget tabu lavet af AOL; disse er meget naturlige og økologiske generatorer, der er opstået, da vi har brug for dem. Så hvorfor ikke dele i noget af rigdom? Lad os gå gennem et par af min favorit, og hvorfor du måske nyder dem.
Generelle Generatorer
Dette afsnit vil fokusere på generatorer, der tager sig af bredspektret behov og anvendelser. Disse vil dække næsten alt, hvad du kunne have brug for, eller vil i en generator, men af deres natur kan de være værre på detaljer. Det er derfor, jeg vil give så mange muligheder senere i denne artikel til bestemte typer.
CSS3.me
Dette er en af de nøjagtige generatorer, jeg bare henviste til. Denne blev skabt af en af mine yndlingsdesignere, Eric Hoffman , og det er fantastisk. Meget enkel, minimal og stilfuld, men samtidig meget funktionel. Giver dig evnen til at ændre og indstille grænsen radius, drop skygge, gradienten og opacitet - det er ret funktionelt.
Bemærk: Se på Erics websted; det er et godt eksempel på mobil første design. Han er også designer på Zendesk , så send ham en vis kærlighed, hvis du nogensinde har nydt det produkt.
CSS3 Maker
Ofte vil folk finde generatorer, som de elsker, og holder sig til dem. Og det er præcis, hvad der skete med en klient, jeg havde arbejdet med tidligere med hensyn til denne generator. Han var helt forelsket i det, og jeg kan se hvorfor - det er sikkert funktionelt. Det kan ikke være den smukkeste ting nogensinde lavet, men det ser ud til at have alle klokker og fløjter.
Du kan gøre @ skrifttype-ansigt arbejde, animation arbejde, boks skygger, tekst skygger, tekst rotation, overgange, gradienter, grænsen radius og meget mere. Det er en, jeg normalt har bogmærket, men bruger sjældent bare på grund af, hvor godt de mindre generatorer gør i hver af deres respektive kategorier. Men det er helt sikkert en god generator at prøve, hvis du har brug for en og ikke kan lide at hoppe rundt til en flok forskellige.
CSS3 Generator
Dette er en anden god generel, der giver en masse funktionalitet. Jeg kan godt lide denne, fordi den har flotte og nemme nedture og let at bruge funktionalitet. Designet er også ret flot. Det giver også en god boks størrelse funktionalitet. Denne giver stor mulighed for at gøre følgende: grænseradius, bokseskygge, tekstskygge, RGBA, flere kolonner, boksstørrelse, disposition, overgange, transformer, selektionsgradienter. Jeg tror, at dette er en af mine favoritter, fordi designet og brugergrænsefladen er så rene. Jeg bruger normalt denne, når jeg glemmer cssmaker.
Button Generatorer
CSS3-Tricks Button Maker
En af de første knap beslutningstagere, jeg så tilbage på dagen, fik mig virkelig til at kramme. Det var meget lineært, havde ingen UI til det (ironisk) og var generelt et frygteligt designet produkt. Som en side notat vil jeg tale om noget lignende næste, men for nu vil jeg vise en jeg fandt over på css3tricks , og det er virkelig en dejlig.
Et af hovedpunkterne til reference her er, at det næsten er helt kontrollerbart ved hjælp af en træk og slip skyder, hvilket er rigtig flot. Vent lige indtil du skal indtaste alt manuelt ved hjælp af tastaturet, og du vil ønske, at du havde en god trækskyder. Som en sidste side notat er CSS3 Tricks et vidunderligt sted med et ton velorganiseret og tankevækkende indhold, som du alle vil elske at tjekke ud.
CSS3 Button.net
Og nu kommer vi til den generator, jeg bare henviste til. Designet mangler, men det giver meget mere valg end den foregående, hvilket ironisk nok ofte er, hvordan tingene fungerer. Nogle gange vil du gerne bruge brugervenlighed og nogle gange har du brug for nogle seriøse valg, når det kommer til generatorer, og disse sidste to ramte virkelig begge disse punkter.
Denne ene giver mulighed for at tilføje flere tekstskygger, indre skygger, grænser og skrifttyper, mens den sidste ikke rigtig kommer ind i så meget detaljer. Det kan være svært at regne ud først, men du får det, hvis du bare spiller med det i et par minutter. Jeg finder denne til at være den mest nyttige, hvis du er vant til Windows-brugergrænsefladen, og som følge heraf har jeg fået klienter at fortælle mig, at dette var deres favorit, fordi de har været fast på XP i årevis og ikke ved noget bedre. Og nu er jeg sikker på, at nogle af jer undrer mig, men det er ærligt, hvordan det går - nogle kunder vil have links til generatorer for at lære sig selv, efter at du har imponeret dem. Jeg linker dem normalt til Lynda , TeamTreehouse , og et par af disse generatorer til god foranstaltning.
CSS3 Button Generator
Dette er en rigtig sjov. Det giver dig en stor knap til at manipulere, det er også i en rad retro farve. Derefter kan du manipulere skygge, kant, farve og det giver dig mulighed for at redigere svingningen. Jeg kan godt lide denne, fordi det er en, jeg fandt et stykke tid tilbage, da jeg først kom ind i CSS, og det gav mig virkelig en ide om, hvad det kan gøre. Træk og slip skydere er gode til folk der er nye til sprogene, fordi du kan se, hvad du kan gøre straks. Nu vil jeg sige, jeg bruger ikke denne især længere - i lyset af de andre, der er sket, men det er en stor hukommelse.
Border Image & Radius Generators
Border-billede
Intet slår border-image.com når det kommer til at tage et bestemt billede og derefter kopiere det for at finde den rigtige grænsestil. Sørg for, at du ikke overtræder ophavsret og brug en andens billede uden tilskrivning.
Men lad os sige, at du tegnede en pil eller en trekant, og du vil gerne finde en generator for at gentage den gennem hele dit websteds grænse eller endda et elements grænse. Nå, intet er bedre end dette websted, når det kommer til det behov. Du kan manipulere forskydningen, størrelsen og den gentagelse, som billedet har.
Så snart du ankommer på webstedet, kan du se et eksempelbillede, de har indlæst, men det er virkelig meget mere nyttigt end det billede, der vises. Jeg bruger det ofte til design i baggrunde, som jeg vil gentage og / eller se, hvordan det ser virkelig hurtigt ud, før jeg faktisk kopierer hele baggrunden i Photoshop. Du kan bruge det til alt relateret til gentagne billeder, virkelig.
Border-Radius
Dette er et stort og minimalt lille værktøj, som jeg ofte finder er meget praktisk. Med det er alt hvad du gør simpelthen indstillet, hvor meget af en afrundet kant du vil have på hvert hjørne. Meget praktisk, meget enkel. Og så skal du bare afkrydse, hvilken slags browser præfiks du vil have inkluderet, og boom færdig. Det er en smuk UI i høj grad. Der skal være tests i datalogik kurser, hvor alt du gør er at forsøge at komme op med noget så enkelt og funktionelt som det er.
CSS3 Gradient Generators
Color Zilla Gradient Editor
Dette faktureres som den ultimative CSS3 Gradient Editor, og til god ret. Faktisk er det så fantastisk, at det er den eneste gradientredaktør, som jeg vil medtage her. Den har masser af funktioner, og er meget brugbar og nem at komme i gang med. Du skal bare trække lidt rundt om de sorte og blå blyanter, og du vil hurtigt se, hvad de gør. De laver også en browser editor i Chrome eller Firefox Det er virkelig nyttigt for designere, der arbejder på nettet. Sørg også for at spille rundt med forudindstillingerne i denne, fordi det ofte er godt nok - hvem valgte dem gjorde et godt stykke arbejde.
Typografiske generatorer / redaktører
@fontface Generator
Dette er et rigtig interessant produkt. Hvad det gør er, at du kan uploade skrifttyper, du har valgt fra internettet eller måske har på computeren, og derefter giver dig en udgivet fil, der er klar til at arbejde med på internettet. Du får mere end én ting, men du får et par ting. Du får CSS til @ font-face-egenskaber, der gives den skrifttype, du valgte, og en HTML-fil, der viser skrifttypen og dens mange anvendelser. Det er virkelig et godt værktøj til at undersøge, om der er et skrifttypes fulde potentiale, hvis du ikke er helt sikker på det, og især hvis du ikke har tid til at generere en hel hjemmeside med den skrifttype, inden du træffer beslutningen.
Reverse CSS3 Generator
CSS3 venligst
Dette er et rigtig fascinerende produkt. I grund og grund hvad det gør er at det giver dig et kasse sæt, og alle CSS for det, og så giver dig mulighed for at slå sektionerne til og fra for at se, hvad de gør. Så i det væsentlige kan du omdanne CSS3 til at finde ud af, hvad det gør, og så kan du se, hvad du laver. Dette er en fantastisk måde at lære CSS3 på, hvis du er interesseret, men tror, at generatorer er lidt for komplicerede.
CSS3 Drop Shadow Generators
Webestools Shadow Generator
Jeg kan godt lide denne skyggegenerator ret meget, fordi den går i detaljer og dybde angående drop-skygger, som de andre generatorer bare ikke gør. Det kan ikke ligne det bedst designet produkt nogensinde, men det er helt sikkert fantastisk. Det har indsatsskygger, startskygger og evnen til at manipulere forskydninger, indstille farver og gøre stort set alt hvad du kan gøre med kode - men i stedet med en god trækstang. Åh, hvordan jeg elsker trækstangen. Tjek dette ud, hvis du generelt skal se, hvad din skyggeide kan se ud, før du hardkodes den.
HTML5 generatorer
HTML5 generatorer er svære at komme forbi, og årsagen til det er sandsynligvis på grund af hvor stor HTML5 Boilerplate er. Vi taler ikke om det, for det er ikke specifikt en generator, så jeg vil opsummere her lige her: Det er dybest set en HTML5-skabelon, der allerede er udfyldt og klar til at du kan arbejde med, så gå tjekke det ud, hvis du har ikke set det. Det er temmelig fantastisk faktisk. Mange bruger det som en startskabelon til deres websteder og med god grund. Nu tilbage til generatorer. At finde en kvalitet er faktisk ret vanskelig, men jeg har formået at finde et par her, som jeg vil vise - og derefter har jeg nogle få mere generaliserede dem, der berører alle emnerne i denne artikel.
Shikiryu HTML5 Generator
Shikiryus HTML5 Generator er meget mere kompleks. Du kan tilføje i funktioner, der giver dig mulighed for at gøre ting inde i Blueprint (mixins osv.) Og fancy-type - så det er faktisk ret nyttigt. Jeg kan godt lide det, fordi det er lidt mere semantisk end de andre muligheder, og samtidig giver dig mulighed for at tilføje i rigtig populære tredjepartsprogrammer, som folk elsker at bruge.
Skift til HTML5 Generator
Dette er en interessant generator. Hvad det gør er det giver dig mulighed for at generere en hurtig og nem ramme for byggepladser, men i modsætning til HTML5 Boilerplate lader det os vælge præcis hvilke selektorer vi foretrækker at se i vores rammer. Jeg har faktisk brugt dette til at generere kode i stedet for HTML5 Boilerplate, når jeg har brug for et par mere selektorer eller elementer end det tilbyder. Nu følger det ikke helt alle de smukt designede principper for semantisk markering - som HTML5 Boilerplate gør - men det gør et godt nok job, og du kan gå ind og gøre resten, hvis du virkelig skal bruge den.
Quackit HTML5 Generator
Denne tager et skridt tilbage, og i stedet for bare at give dig en gruppe kode, der er ret generisk og grundlæggende, kan du indtaste alle dine egne oplysninger. Dette er virkelig nyttigt, og jeg har fundet andre, der er nyere på hjemmesider, virkelig elsker det. De elsker især det, jeg har fundet, ved at det genererer standardbasen HTML for dig, så du kan se, hvad du ønsker med CSS. Så hvis du lærer CSS, og er stadig lidt uklar på HTML (selvom det ikke er sikkert, hvorfor det ville være tilfældet), så kan du gøre det på denne måde.
Og det vil om at pakke det op. Disse generatorer er bare fantastisk til at arbejde på en hurtig og smidig måde, men i stedet for for iværksættere er de til designere. Og det er virkelig strålende efter min mening. Har du en hurtig ide om en grænseradius (fanebladet måske?) Eller en skygge eller en farvegradient eller en html5-skabelon med inkluderet blæk - godt, det er bare lavet til dig. Bemærk dog, at dette ikke var en udtømmende liste, men det var nogle af mine favoritter og dem, som mine kolleger tidligere har brugt. Jeg nyder virkelig at bruge mange af disse, og håber du gør det også.