15 suurta HTML5- ja CSS3-generaattoria
HTML5 ja CSS3 ovat erinomaisia kieliä oppimisen aloittamiseksi, ja olen aina ajatellut, että yksi parhaista tavoista aloittaa oppiminen on vain sukeltaa ja manipuloida koodia. Kuten voitte luultavasti sanoa, tämä on silloin, kun generaattorit astuvat sisään. Ne ovat erinomainen tapa luoda koodia, pelata sen kanssa ja oppia.
Paitsi, että ne ovat uskomattoman hyödyllisiä, koska usein kehittäjänä tai suunnittelija kertaa olemme tekemässä asioita yhä uudestaan. No, generaattorit voivat ottaa tämän reunan ja tehdä ne pienet asiat sinulle joka kerta.
Esimerkkinä minulla on teksti-laajennuspätkä, joka luo HTML5-mallin, josta kirjoitin tässä . Nyt teksti laajentaja on hieno, mutta se ei ratkaise kaikkia tarpeita, ja tässä tapauksessa on olemassa suuri tarve generaattoreille, joten otin aikaa etsiä 20 suosikkini ja kuvata miksi pidän niistä.
Sanon, että suurin osa tästä luettelosta keskittyy CSS3-generaattoreihin yksinkertaisesti siksi, että ne vaativat enemmän kuin HTML5-generaattorit, ja opimme miksi. Huomaa: Napsauta kuvia avataksesi sivustot.
CSS3-generaattorit
Näillä generaattoreilla on jonkin verran kielteinen merkitys, ja minun on sanottava, että suunnittelijana ja kehittäjänä ei ole mitään negatiivista käyttää yhtä. Se on valtava ajan säästäjä ja kaikessa rehellisyydessä tunnen kolme kehittäjää, jotka kirjoittavat omat generaattorit vain siksi, että he halusivat auttaa yhteisöä. Joten pidä mielessäsi, että et käytä jotain AOL: n tekemää tabuja; nämä ovat hyvin luonnollisia ja orgaanisia generaattoreita, jotka ovat tulleet sellaisina kuin ne tarvitsivat niitä. Joten miksi ei jaa osaa vauraudesta? Käy läpi muutamia suosikkini, ja miksi saatat nauttia niistä.
Yleiset generaattorit
Tässä osassa keskitytään generaattoreihin, jotka huolehtivat laajojen taajuuksien tarpeista ja käytännöistä. Nämä kattavat lähes kaiken mitä tarvitset tai haluatte generaattorissa, mutta niiden luonteen vuoksi ne voivat olla huonompia erityispiirteitä. Siksi annan niin monta vaihtoehtoa myöhemmin tässä artikkelissa tiettyihin tyyppeihin.
CSS3.me
Tämä on yksi tarkista generaattoreista, joihin juuri viittasin. Tämä luotiin yksi suosikkini suunnittelijoista, Eric Hoffman , ja se on mahtavaa. Erittäin yksinkertainen, minimaalinen ja tyylikäs, mutta samalla erittäin toimiva. Antaa sinulle mahdollisuuden muuttaa ja asettaa raja säde, pudota varjo, kaltevuus ja opasiteetti - se on varsin toimiva.
Huomaa: Tutustu Ericin sivustoon; se on erinomainen esimerkki liikkuvasta ensimmäisestä suunnittelusta. Hän on myös suunnittelija Zendesk , joten lähetä hänelle rakkautta, jos olet koskaan nauttinut tuosta tuotteesta.
CSS3 Maker
Usein ihmiset löytävät generaattoreita, joita he rakastavat ja pitävät niitä kiinni. Ja juuri tämä tapahtui asiakkaan kanssa, jonka kanssa olen työskennellyt aiemmin tämän generaattorin suhteen. Hän oli täysin rakastunut siihen, ja näen, miksi - se on varmasti toimiva. Se ei ehkä ole kaunein asia koskaan tehty, mutta se näyttää olevan kaikki kelloja ja pillejä.
Voit tehdä @ font-face -työhön, animaatiotyön, laatikoiden varjot, tekstin varjot, tekstin kiertämisen, siirtymät, kaltevuudet, raja-alueen ja paljon muuta. Se on yksi, että olen yleensä kirjanmerkitty, mutta harvoin käyttää vain siksi, kuinka hyvin pienempiä generaattorit tekevät kunkin niiden luokkiin. Mutta se on varmasti hyvä generaattori yrittää, jos tarvitset yhden ja et halua hypätä ympäri joukko erilaisia.
CSS3-generaattori
Tämä on toinen hyvä yleinen, joka tarjoaa paljon toimintoja. Pidän tästä, koska se on mukava ja helppo pudotus alas ja helppokäyttöinen toiminto. Suunnittelu on myös varsin mukavaa. Se tarjoaa myös mukavan laatikon koon. Tämä tarjoaa suuren kyvyn tehdä seuraavia: raja-alue, laatikko varjo, tekstin varjo, RGBA, useita sarakkeita, ruutu mitoitus, ääriviivat, siirtymät, muunnokset, valitsimet gradientit. Mielestäni tämä on yksi suosikeistani, koska muotoilu ja käyttöliittymä ovat niin puhtaita. Käytän yleensä tätä kun unohdan cssmaker.
Button Generators
CSS3-Tricks Button Maker
Yksi ensimmäisistä napinvalmistajista, jotka huomasin päivän takaa, sai minut todella kovaksi. Se oli hyvin lineaarinen, sillä ei ollut mitään käyttöliittymää (ironisesti) ja se oli kaiken kaikkiaan hirvittävän suunniteltu tuote. Sivuhuomautuksena aion puhua jotain vastaavaa seuraavaksi, mutta nyt näytän sellaisen, jonka löysin css3tricks , ja se on todella mukava.
Yksi tärkeimmistä viittauksista tässä on se, että se on melkein kokonaan hallittavissa vedä ja pudota liukusäädintä, joka on todella mukavaa. Odota kunnes sinun on syötettävä kaikki manuaalisesti näppäimistön avulla ja toivot, että sinulla oli mukava vetämällä liukusäädintä. Lopullisena sivupohjana CSS3 Tricks on ihana sivusto, jossa on runsaasti hyvin järjestettyä ja harkittua sisältöä, jonka kaikki haluaisivat tarkistaa.
CSS3 Button.net
Ja nyt tulemme generaattoriin, johon viittasin vain. Suunnittelu saattaa olla puutteellista, mutta se tarjoaa paljon enemmän valintaa kuin edellinen, mikä on ironisesti usein tapana toimia. Joskus haluat helppokäyttöisyyden ja toisinaan tarvitset jonkin verran valintaa generaattoreille, ja nämä kaksi viimeistä todella osuvat molempiin näihin pisteisiin.
Tämä tarjoaa mahdollisuuden lisätä useita tekstin varjoja, sisäisiä varjoja, reunoja ja fontin värejä, kun taas viimeinen ei todellakaan pääse niin paljon yksityiskohtiin. Voi olla vaikeaa selvittää aluksi, mutta saat sen, jos vain pelaat sen kanssa muutaman minuutin. Minusta tämä on hyödyllisintä, jos olet tottunut Windowsin käyttöliittymiin, ja sen seurauksena minulla on ollut asiakkaita kertoa, että tämä oli heidän suosikkinsa, koska he ovat juuttuneet XP: lle jo vuosia eikä tiedä mitään parempaa. Ja nyt olen varma, jotkut teistä ihmettelevät, mutta se on rehellisesti, miten se menee - jotkut asiakkaat haluavat linkkejä generaattoreihin oppimaan itselleen, kun olet vaikuttanut heitä. Olen yleensä liittänyt ne Lynda , TeamTreehouse , ja muutamia näistä generaattoreista hyväksi.
CSS3 -painikkeiden generaattori
Tämä on todella hauskaa. Se antaa sinulle yhden suuren napin käsitellä, joka on rad retro väri samoin. Sitten voit manipuloida varjoa, rajaa, väriä, ja sen lisäksi se antaa sinulle mahdollisuuden muokata leijuvälinettä. Pidän tästä, koska se on sellainen, että löysin jonkin aikaa takaisin, kun aloin ensin CSS: n, ja se oikeastaan antoi minulle käsityksen siitä, mitä se voi tehdä. Vedä ja pudota -liukusäätimet ovat erinomaisia niille ihmisille, jotka ovat uusille kielille, koska näet, mitä voit tehdä heti. Seuraavaksi sanon, etten käytä tätä varsinkaan enää - muiden, jotka ovat tulleet esiin, mutta se on hyvä muisto.
Border Image & Radius-generaattorit
Border-kuva
Mikään ei voita border-image.com -sovellusta, kun otetaan huomioon tietty kuva ja sen jäljittäminen löytääksesi oikean rajatyypin. Varmista, ettet loukkaa tekijänoikeuksia, ja käytä jonkun muun kuvaa ilman attribuuttia.
Mutta sanotaan, että piirritte nuolen tai kolmion ja haluat löytää generaattorin toistamaan sen koko sivustosi reunalla tai jopa elementin reunalla. No, ei ole mitään parempaa kuin tämä sivusto, kun kyse on tarpeesta. Voit manipuloida kuvan siirtoa, kokoa ja toistoa.
Heti kun saavut sivustolle, näet esimerkkikuvan, jonka he ovat ladanneet, mutta se on todella paljon hyödyllisempi kuin kuva on näyttänyt. Käytän usein sitä taustakuvioissa, joita haluan toistaa ja / tai nähdä, miten se näyttäisi todella nopealta, ennen kuin se todellisuudessa kopioisi Photoshopissa kokonaan taustan. Voit käyttää sitä mitä tahansa toistuviin kuviin liittyen, todella.
Border-Radius
Tämä on loistava ja minimaalinen pieni työkalu, jota löydän usein hyvin käytännöllisestä. Sen avulla voit vain määrittää, kuinka paljon pyöreää reunaa haluat kullekin kulmalle. Erittäin käytännöllinen, hyvin yksinkertainen. Ja sitten vain tarkista, millaista selaimen etuliitettä haluat sisällyttää, ja puomi on tehty. Se on kaunis käyttöliittymä kaikessa rehellisyydessä. Tietotekniikan kursseja on testattava, ja kaikki, mitä teette, pyrkivät keksimään jotain niin yksinkertaista ja toimivaa kuin tämäkin.
CSS3-gradienttigeneraattorit
Väri Zilla Gradient Editor
Tämä laskutetaan lopullisena CSS3-gradienttieditorina ja hyvästä oikeudesta. Itse asiassa se on niin mahtavaa, että se on ainoa gradienttieditori, johon minäkin tulemme mukaan. Siinä on paljon ominaisuuksia, ja se on hyvin käyttökelpoinen ja helppo aloittaa. Vedä vain mustat ja siniset kynät hieman ja näet nopeasti, mitä he tekevät. He myös tekevät selaineditoriin Kromi tai Firefox tämä on todella hyödyllistä web-suunnittelijoille. Muista myös soittaa tässä esiasetuksissa, sillä usein ne ovat riittävän hyviä - joka valitsi heidät teki hienon työn.
Typografiset generaattorit / toimittajat
@fontface Generator
Tämä on todella mielenkiintoinen tuote. Se, mitä se tekee, voi ladata fontteja, jotka olet valinnut verkosta tai sinulla on tietokoneella, ja antaa sitten tulostetun tiedoston, joka on valmis työskentelemään verkossa. Saat kuitenkin enemmän kuin yhden asian, saat muutamia asioita. Saat CSS: n @ font-face -ominaisuudet valitsemallesi kirjasimelle ja HTML-tiedoston, joka näyttää fontin ja sen moninaiset käyttötarkoitukset. Se on todella hyvä työkalu tarkistaa fontin täysi potentiaali, jos et ole varma siitä, ja varsinkin jos sinulla ei ole aikaa luoda koko verkkosivustoa kyseisellä kirjasimella ennen päätöksentekoa.
Reverse CSS3-generaattori
CSS3 Ole hyvä
Tämä on todella kiehtova tuote. Pohjimmiltaan se, mitä se tekee, on se, että se antaa sinulle laatikkoasetuksen ja kaiken sen CSS: n, ja antaa sinulle mahdollisuuden kääntää osioita päälle ja pois nähdäksesi, mitä he tekevät. Joten voit olennaisesti kääntää CSS3: n insinöörin selvittämään, mitä se tekee, ja sitten voit nähdä, mitä teet. Tämä on hyvä tapa oppia CSS3: ta, jos olet kiinnostunut, mutta ajattele, että generaattorit ovat hieman liian monimutkaisia.
CSS3 Drop Shadow Generators
Webestools Shadow Generator
Pidän tätä varjon generaattorista melko paljon, koska se menee yksityiskohtiin ja syvyyteen koskien pudotusvarjoja, joita muut generaattorit vain eivät. Se ei ehkä näytä parhaalta suunnitellulta tuotteelta koskaan, mutta se on varmasti mahtava. Siinä on varjot, alkuvarjot ja kyky käsitellä offsettejä, asettaa värejä ja tehdä melko paljon mitä tahansa koodilla - mutta sen sijaan on mukava vetämällä. Voi, kuinka rakastan vetämällä. Tarkista tämä ulos, jos haluat nähdä yleisesti, mitä varjon idea voi näyttää, ennen kuin teet sen kovaa koodia.
HTML5-generaattorit
HTML5-generaattorit ovat eräänlaisia vaikeita tulla, ja syy tähän on luultavasti siksi, kuinka suuri HTML5 Boilerplate on. Emme puhu siitä, koska se ei ole nimenomaan generaattori, joten ymmärrän sen juuri täällä: Se on pohjimmiltaan HTML5-mallia, joka on jo täytetty ja valmis työskentelemään, joten tarkista, jos et ole nähnyt sitä. Se on todella mahtavaa. Monet ihmiset käyttävät sitä aloituspohjana sivustoilleen ja hyvistä syistä. Nyt takaisin generaattoreille. Laadun löytäminen on tosiasiallisesti melko vaikeaa, mutta olen löytänyt muutamia täällä, jotka näytän - ja sitten sen jälkeen muutamia yleisempiä, jotka koskettavat kaikkia tämän artikkelin aiheita.
Shikiryu HTML5 Generator
Shikiryun HTML5-generaattori on paljon monimutkaisempi. Voit lisätä ominaisuuksia, joiden avulla voit tehdä asioita Blueprintin sisällä (mixins jne.) Ja fancy-tyyppisiä - joten se on todella hyödyllinen. Pidän siitä, koska se on hieman semanttisempi kuin muut vaihtoehdot, ja samalla voit lisätä todella suosittuja kolmannen osapuolen sovelluksia, joita ihmiset haluavat käyttää.
Vaihda HTML5-generaattoriin
Tämä on mielenkiintoinen generaattori. Se, mitä se tekee, mahdollistaa nopeiden ja helppokäyttöisten puitteiden luomisen rakennustyömaille, mutta toisin kuin HTML5 Boilerplate, se antaa meille mahdollisuuden valita tarkalleen, mitä valitsimia haluamme nähdä kehyksessämme. Olen tosiasiallisesti käyttänyt tätä koodin luomiseen HTML5 Boilerplan sijaan, kun tarvitsen muutama valitsin tai kohteet kuin se tarjoaa. Nyt se ei noudata kaikkia kauniisti suunniteltuja semanttisen merkinnän periaatteita - kuten HTML5 Boilerplate ei - mutta se tekee tarpeeksi hyvää työtä ja voit mennä ja tehdä loput, jos tarvitset sitä todella.
Quackit HTML5 Generator
Tämä vie askel taaksepäin, ja sen sijaan, että annat sinulle koodiryhmän, joka on melko yleinen ja perusasetus, voit syöttää kaikki omat tietosi. Tämä on todella hyödyllistä, ja olen löytänyt muita, jotka ovat uudempia verkkosivustoille, todella pitävät siitä. He pitävät erityisen mielellään siitä, että olen saanut aikaan sen, että se luo vakiomuotoisen HTML-koodin. Joten jos opit CSS: ää ja ovat vielä hiukan hämärät HTML: ssä (vaikka et tiedä miksi näin olisi), niin voit tehdä sen tällä tavalla.
Ja se on noin viimeistellä. Nämä generaattorit ovat hämmästyttäviä työskentelemään nopeasti ja ketterästi, mutta yrittäjien sijasta he suunnittelevat. Ja se on todella loistava mielestäni. Onko nopea ajatus raja-alueesta (tab'd maybe?) Tai varjosta tai värigradiasta tai html5-mallista, johon on sisällytetty suunnitelma - hyvin nämä ovat juuri sinulle sopivia. Huomaa kuitenkin, että tämä ei ollut tyhjentävä luettelo, mutta se oli muutamia suosikkeihini ja niitä, joita kollegani ovat aiemmin käyttäneet. Pidän todella paljon näistä, ja toivottavasti sinä myös.