15 Great HTML5 og CSS3 Generators
HTML5 og CSS3 eru frábær tungumál til að byrja að læra með, og ég hef alltaf hugsað að ein besta leiðin til að byrja að læra er að bara kafa inn og vinna með kóðann. Eins og þú gætir sennilega sagt, þetta er þar sem rafala stíga inn. Þeir eru frábær leið til að búa til kóða, leika við það og læra.
Ekki bara það, þeir eru ótrúlega gagnlegar vegna þess að oft sem verktaki eða hönnuður finnum við að við erum að gera hlutina aftur og aftur. Jæja, rafala getur tekið af þeim brún og gerðu þau litla hluti fyrir þig í hvert skipti.
Sem dæmi má nefna að ég er með textaútbreiðslumaður sem skapar HTML5 sniðmát sem ég skrifaði um hér . Nú er texti-expander frábært en það leysir ekki alla þarfir og í þessu tilfelli er mikil þörf fyrir rafala þannig að ég tók tíma til að finna 20 af uppáhalds mínum og lýsa hvers vegna ég líkar þeim.
Ég mun segja að flestir af þessum lista muni leggja áherslu á CSS3 rafala, einfaldlega vegna þess að þeir eru í eftirspurn meira en HTML5 rafala, og við munum læra af hverju. Athugaðu: smelltu á myndina til að opna vefsíðurnar.
CSS3 rafala
Það er nokkuð neikvætt tákn þegar kemur að þessum rafala, og ég verð að segja að sem hönnuður og verktaki sé ekkert neikvætt um að nota einn. Það er gríðarstór tími-bjargvættur og ég heiðarlega þekkir þrjú forritara sem skrifuðu eigin rafala sína bara vegna þess að þeir vildu hjálpa samfélaginu. Svo hafðu í huga að það er ekki eins og þú notar eitthvað bannorð sem AOL gerir; Þetta eru mjög náttúrulegar og lífrænar rafala sem hafa komið fram eins og við þurftum þá. Svo hvers vegna ekki deila í einhverjum auðs? Við skulum fara í gegnum nokkrar af uppáhalds mínum, og hvers vegna gætir þú notið þeirra.
Almennar rafala
Í þessum kafla verður lögð áhersla á rafala sem taka mið af víðtækum þörfum og notkunarsviðum. Þetta mun ná nánast allt sem þú gætir þurft, eða vilt í rafall, en af eðli sínu gætu þau verið verri við smáatriði. Þess vegna mun ég gefa svo marga möguleika seinna í þessari grein fyrir ákveðnar gerðir.
CSS3.me
Þetta er ein af nákvæmustu rafala sem ég var að vísa til. Þessi var búin til af einum af uppáhaldshönnuðum mínum, Eric Hoffman , og það er ótrúlegt. Mjög einfalt, lágmarks og stílhrein, en á sama tíma mjög hagnýtur. Gefðu þér möguleika á að breyta og stilla landamærisstrauminn, sleppa skugga, hallanum og ógagnsæi - það er alveg hagnýtt.
Athugaðu: Horfðu á síðuna Eric. það er frábært dæmi um farsíma fyrstu hönnun. Hann er einnig hönnuður hjá Zendesk , sendu honum einhvern ást ef þú hefur nokkurn tíma notið þessarar vöru.
CSS3 framleiðandi
Oftast munu fólk finna rafala sem þeir elska og halda sig við þau. Og það er einmitt það sem gerðist við viðskiptavin sem ég hafði unnið með áður með tilliti til þessa rafall. Hann var algerlega ástfanginn af því, og ég get séð hvers vegna - það er örugglega virk. Það kann ekki að vera fallegasta hluturinn sem hefur verið gerður en það virðist hafa alla bjalla og flaut.
Þú getur gert @ leturgerðarslit, hreyfimynd, kassaskuggi, textaskuggi, textaskipting, umbreytingar, stigamörk, landamærusvið og margt fleira. Það er einn sem ég hef venjulega bókamerki en notar sjaldan einfaldlega vegna þess hversu vel minni rafala gerir í hverju sinni. En það er vissulega góður rafall til að reyna ef þú þarft einn og líkar ekki við að hoppa í kringum fullt af mismunandi.
CSS3 Generator
Þetta er annar góður almennur sem býður upp á mikið af virkni. Mér líkar þetta vegna þess að það hefur gott og auðvelt fall niður og auðvelt að nota virkni. Hönnunin er líka mjög góð. Það býður einnig upp á góðan kassastærð. Þessi maður býður upp á mikla hæfileika til að gera eftirfarandi: landamærisstraumur, kassaskuggi, textaskuggi, RGBA, margar dálkar, kassi límvatn, útlínur, umbreytingar, umbreytingar, valmöguleikar. Ég held að þetta sé ein af uppáhaldi mínum, vegna þess að hönnun og notendaviðmót er svo hreint. Ég nota venjulega þennan þegar ég gleymi cssmaker.
Button Generators
CSS3-Bragðarefur Hnappur Framleiðandi
Einn af fyrstu takkanum sem ég sá aftur á dagnum gerði mig virkilega að mínu mati. Það var mjög línulegt, hafði ekki nein tengsl við það (kaldhæðnislega) og var almennt hryllilega hönnuð vara. Sem hliðarmerki mun ég vera að tala um eitthvað svipað næst, en nú mun ég sýna einn sem ég fann yfir á css3tricks , og það er mjög gott.
Eitt af lykilatriðum tilvísunar hér er sú staðreynd að það er nánast algjörlega stjórnandi með því að draga og sleppa renna, sem er mjög gott. Bíddu bara þar til þú verður að slá inn allt handvirkt með lyklaborðinu og þú munt vilja að þú hafir gott að sleppa renna. Sem síðasta hliðarmerki er CSS3 Bragðarefur frábær staður með tonn af vel skipulögðum og hugsi efni sem þú vildi allir elska að skrá sig út.
CSS3 Button.net
Og nú erum við að koma til rafallarinnar sem ég var að vísa til. Hönnunin kann að vera skortur en það býður upp á miklu meira val en fyrri, sem er kaldhæðnislega oft hvernig hlutirnir virka. Stundum viltu auðvelda notkun og stundum þarftu nokkrar alvarlegar ákvarðanir þegar kemur að rafala, og þessir tveir tveir högg reyndar bæði þessi atriði.
Þessi maður býður upp á möguleika á að bæta við mörgum textaskuggum, innri skuggum, landamærum og leturgerðarlitum en síðasti maðurinn komst ekki í smáatriði. Það getur verið erfitt að reikna út í fyrstu en þú munt fá það ef þú spilar bara með því í nokkrar mínútur. Ég finn þetta til að vera gagnlegur ef þú ert vanur að Windows UI, og þar af leiðandi hef ég fengið viðskiptavini að segja mér að þetta væri uppáhalds þeirra vegna þess að þeir hefðu fest fast á XP í mörg ár og veit ekki betur. Og nú er ég viss um að sumir af ykkur eru að spá í, en það er heiðarlega hvernig það gengur - sumir viðskiptavinir vilja tengla við rafala til að læra fyrir sig eftir að þú vekur hrifningu á þeim. Ég hleypi þeim venjulega til Lynda , TeamTreehouse , og nokkrar af þessum rafala til góðs.
CSS3 Button Generator
Þetta er mjög skemmtilegt. Það gefur þér eina stóra hnapp til að vinna, það er líka í rauðum litum. Þú getur síðan stjórnað skugga, landamærum, litum og ofan á það gefur þér möguleika á að breyta sviffluginu. Mér líkar þetta vegna þess að það er einn sem ég fann smá stund aftur þegar ég var fyrst að komast inn í CSS og það gaf mér í raun hugmynd um hvað það gæti gert. Dragðu og slepptu renna eru frábært fyrir fólk sem er nýtt fyrir tungumálin, því þú getur séð hvað þú getur gert strax. Nú mun ég segja að ég noti þetta ekki sérstaklega lengur - í ljósi annarra sem hafa komið fram, en það er frábært minni.
Border Image & Radius Generators
Border-Image
Ekkert slær border-image.com þegar kemur að því að taka ákveðna mynd og síðan afrita það til að finna rétta landamærustíl. Gakktu úr skugga um að þú brjóti ekki gegn höfundarrétti og notið einhvers annars mynds án tilvísunar.
En við skulum segja að þú hafir ör eða þríhyrningur og þú vilt finna rafall til að endurtaka það um landamæri síðunnar eða jafnvel landamæri landsins. Jæja, ekkert er betra en þessi síða þegar það kemur að því þarf. Þú getur stjórnað móti, stærð og endurtaka sem myndin hefur.
Um leið og þú kemur á síðuna sérðu dæmi um mynd sem þeir hafa hlaðið inn en það er mjög miklu gagnlegt en þessi mynd hefur sýnt. Ég mun nota það oft fyrir hönnun í bakgrunni sem ég vil endurtaka og / eða sjá hvernig það myndi líta út alvöru fljótlega, áður en í raun endurtaka heildina af bakgrunni í Photoshop. Þú getur notað það fyrir allt sem tengist endurteknum myndum, í raun.
Border-Radius
Þetta er frábært og í lágmarki lítið tól sem ég finn oft er mjög hagnýt. Með því er allt sem þú gerir einfaldlega stillt hversu mikið af ávöl brún þú vilt á hverju horni. Mjög hagnýt, mjög einfalt. Og þá horfðu bara á hvaða tegund af forskeyti vafrans sem þú vilt hafa með, og bragð gert. Það er fallegt HÍ í öllum heiðarleika. Það ætti að vera próf í tölvunarfræði námskeið þar sem allt sem þú gerir er að reyna að koma upp með eitthvað eins einfalt og hagnýtt eins og þetta er.
CSS3 framlengdar rafala
Litur Zilla Gradient Editor
Þetta er reiknað sem fullkominn CSS3 Stigamerki Ritstjóri, og fyrir góða rétt. Reyndar er það svo frábært að það sé eini halli ritstjóri sem ég mun vera með hér. Það hefur tonn af lögun, og er mjög nothæft og auðvelt að byrja með. Dragðu aðeins svarta og bláa blýantana svolítið og þú munt fljótlega sjá hvað þeir gera. Þeir gera einnig vafra ritstjóri í Króm eða Firefox Það er mjög gagnlegt fyrir hönnuði sem vinna á vefnum. Vertu viss um að spila með forstillingum í þessum, því oft er það nógu gott - hver sem valdi þeim gerði frábært starf.
Typographic Rafala / Ritstjórar
@fontface Generator
Þetta er mjög áhugavert vara. Það sem gerir það er að leyfa þér að hlaða letri sem þú hefur valið af vefnum eða kann að hafa á tölvunni og þá gefur þú útgefinn skrá sem er tilbúinn til að vinna með á vefnum. Þú færð meira en eitt þó að þú færð nokkra hluti. Þú færð CSS fyrir @ font-face eiginleika sem gefið er leturgerðina sem þú valdir, og HTML-skrá sem sýnir leturgerðina og notkun hennar. Það er mjög gott tól til að fara um að skoða fullan möguleika letursins ef þú ert ekki alveg viss um það og sérstaklega ef þú hefur ekki tíma til að búa til heilt vefsvæði með því letri áður en þú tekur ákvörðunina.
Reverse CSS3 Generator
CSS3 Vinsamlegast
Þetta er mjög heillandi vara. Í grundvallaratriðum hvað það gerir er að það gefur þér kassakassa og alla CSS fyrir það og þá gefur þér möguleika á að kveikja og slökkva á köflum til að sjá hvað þeir gera. Þannig geturðu í raun snúið vélinni CSS3 til að komast að því hvað það gerir, og þá geturðu séð hvað þú ert að gera. Þetta er frábær leið til að læra CSS3 ef þú hefur áhuga, en held að rafala sé svolítið of flókið.
CSS3 Drop Shadow Generators
Webestools Shadow Generator
Mér finnst þessi skuggagjafi mjög mikið, vegna þess að það fer í smáatriði og dýpt varðandi dropaskyggni sem hinir rafala bara ekki. Það kann ekki að líta út eins og besta hönnuð vöruna alltaf, en það er vissulega frábært. Það hefur innskotskugga, upphafshugmyndir og hæfileiki til að vinna úr móti, setja liti og gera nokkuð allt sem þú gætir gert með kóða - en í staðinn með fallegu draga bar. Ó, hvernig ég elska dráttarbarninn. Kíkið á þetta út ef þú þarft að sjá almennt hvað skuggahugmyndin þín kann að líta út áður en þú skráir það vandlega.
HTML5 Generators
HTML5 rafala er svolítið erfitt að komast hjá og ástæðan fyrir því er líklega vegna þess hversu mikil HTML5 Boilerplate er. Við munum ekki tala um það, því það er ekki sérstaklega rafall, þannig að ég mun summa upp hérna: Það er í grundvallaratriðum HTML5 sniðmát sem þegar er fyllt út og tilbúið fyrir þig að vinna með, svo farðu að kíkja á það ef þú hefur ekki séð það. Það er frekar frábært í raun. A einhver fjöldi af fólk notar það sem ræsir sniðmát fyrir síður sínar og af góðri ástæðu. Nú aftur til rafala. Að finna góða einn er í raun frekar erfitt, en ég hef tekist að finna nokkrar hér sem ég mun sýna - og síðan er ég með nokkrar fleiri almennar sjálfur sem snerta öll efni í þessari grein.
Shikiryu HTML5 Generator
HTML5 Generator Shikiryu er miklu flóknari. Þú getur bætt við eiginleikum sem leyfa þér að gera hluti inni í Teikning (mixins, osfrv.) Og ímynda-gerð - svo það er í raun alveg gagnlegt. Mér líkar það vegna þess að það er svolítið merkingarfræðilegt en aðrir valkostir og á sama tíma gerir þér kleift að bæta við mjög vinsælum forritum þriðja aðila sem fólk elskar að nota.
Skiptu yfir í HTML5 Generator
Þetta er áhugavert rafall. Hvað það gerir er að leyfa þér að búa til fljótlegan og auðveldan ramma fyrir að byggja upp síður en ólíkt HTML5 Boilerplate leyfir okkur að velja nákvæmlega hvaða valsmenn sem við viljum sjá í ramma okkar. Ég hef reyndar tilhneigingu til að nota þetta til þess að búa til kóða í stað HTML5 Boilerplate þegar ég þarf nokkra fleiri keisara eða hluti en það býður upp á. Nú fylgir það ekki nákvæmlega allar fallega hönnuð meginreglur merkingarfræðinnar, eins og HTML5 Boilerplate gerir - en það gerir gott starf og þú getur farið inn og gert það sem þú vilt ef þú þarft virkilega að nota það.
Quackit HTML5 Generator
Þessi maður tekur skref til baka, og í stað þess að gefa þér hóp kóða sem er frekar almenn og undirstöðu, gerir þér kleift að slá inn allar þínar eigin upplýsingar. Þetta er mjög gagnlegt og ég hef fundið aðra sem eru nýrri á vefsíðum í raun og veru af því. Þeir elska sérstaklega það sem ég hef fundið í því að það býr til stöðluðu grunn HTML fyrir þig til að gera þá líta en þú vilt með CSS. Svo ef þú ert að læra CSS, og er enn svolítið þreytt á HTML (þó ekki viss hvers vegna það væri raunin) þá geturðu gert það með þessum hætti.
Og það mun um það vefja það upp. Þessir rafala eru bara ótrúlegir fyrir að vinna á fljótlegan og lipuran hátt, en í staðinn fyrir frumkvöðla eru þau fyrir hönnuði. Og það er mjög ljómandi að mínu mati. Hafa a fljótur hugmynd um landamæri radíus (tab'd kannski?), Eða skuggi eða litadráttur eða HTML-sniðmát með teikningu innifalinn - jæja, þetta er bara gert fyrir þig þá. Athugaðu þó að þetta væri ekki tæmandi listi, en það voru nokkrar af uppáhaldi mínum og þeim sem samstarfsmenn mínir höfðu notað áður. Mér finnst gaman að nota mikið af þessum, og vona að þú gerir það líka.