15 Geweldige HTML5- en CSS3-generatie
HTML5 en CSS3 zijn geweldige talen om mee te leren en ik heb altijd gedacht dat een van de beste manieren om te leren is om gewoon in te duiken en de code te manipuleren. Zoals je waarschijnlijk zou kunnen zien, is dit de plek waar generators hun intrede doen. Ze zijn een geweldige manier om wat code te genereren, ermee te spelen en te leren.
Niet alleen dat, ze zijn ongelooflijk nuttig, want vaak zien we als ontwikkelaar of ontwerper dat we dingen steeds opnieuw doen. Welnu, generatoren kunnen die voorsprong nemen en elke keer die kleine dingen voor je doen.
Als voorbeeld heb ik een tekstuitbreidingsfragment dat een HTML5-sjabloon maakt waarover ik heb geschreven hier . Nu is de tekstuitbreider geweldig, maar het lost niet elke behoefte op, en in dit geval is er een grote behoefte aan generatoren, dus nam ik de tijd om 20 van mijn favoriet te vinden en te beschrijven waarom ik ze leuk vind.
Ik zal zeggen dat het grootste deel van deze lijst zich gaat richten op CSS3-generatoren, simpelweg omdat er meer vraag naar is dan HTML5-generatoren, en we zullen leren waarom. Opmerking: klik op de afbeeldingen om de websites te openen.
CSS3-generatoren
Er is een enigszins negatieve connotatie als het gaat om deze generatoren, en ik moet zeggen dat er als ontwerper en ontwikkelaar niets negatiefs is aan het gebruik ervan. Het is een enorme tijdbesparing en in alle eerlijkheid ken ik drie ontwikkelaars die hun eigen generatoren hebben geschreven, alleen maar omdat ze de community wilden helpen. Houd er dus rekening mee dat het niet is alsof je iets taboe gebruikt gemaakt door AOL; dit zijn heel natuurlijke en organische generatoren die zijn ontstaan omdat we ze nodig hebben. Dus waarom niet delen in een deel van de rijkdom? Laten we een paar van mijn favorieten bekijken, en waarom u ervan kunt genieten.
Algemene generatoren
Deze sectie zal zich richten op generatoren die zorgen voor de breedspectrumbehoeften en -gebruiken. Deze zullen bijna alles omvatten wat je nodig zou kunnen hebben, of in een generator wilt, maar door hun aard kunnen ze slechter zijn in details. Dit is waarom ik zoveel opties later in dit artikel zal geven voor specifieke typen.
CSS3.me
Dit is een van de exacte generatoren waarnaar ik zojuist doelde. Deze is gemaakt door een van mijn favoriete ontwerpers, Eric Hoffman , en het is geweldig. Heel eenvoudig, minimaal en stijlvol, maar tegelijkertijd erg functioneel. Je de mogelijkheid geven om de randstraal, slagschaduw, het verloop en de dekking te wijzigen en in te stellen - het is behoorlijk functioneel.
Opmerking: neem een kijkje op Eric's site; het is een geweldig voorbeeld van mobiel eerste ontwerp. Hij is ook een ontwerper bij Zendesk dus stuur hem wat liefde als je ooit van dat product hebt genoten.
CSS3 Maker
Vaak vinden mensen generatoren waarvan ze houden, en houden ze die vast. En dat is precies wat er gebeurde met een klant waarmee ik eerder had samengewerkt met betrekking tot deze generator. Hij was er absoluut verliefd op, en ik begrijp waarom - het is zeker functioneel. Het is misschien niet het mooiste dat ooit is gemaakt, maar het lijkt wel alle toeters en bellen te hebben.
U kunt werken met @ font-face, animatiewerk, doosschaduwen, tekstschaduwen, tekstrotatie, overgangen, verlopen, grensradius en nog veel meer. Het is er een die ik meestal heb gemerkt als een bladwijzer, maar ik gebruik het zelden vanwege hoe goed de kleinere generators in elk van hun respectievelijke categorieën doen. Maar het is zeker een goede generator om te proberen als je er een nodig hebt en niet graag naar een heleboel andere wilt springen.
CSS3-generator
Dit is een andere goede algemene die veel functionaliteit biedt. Ik vind deze leuk omdat het leuke en gemakkelijke drop-downs heeft en gemakkelijk te gebruiken functionaliteit. Het ontwerp is ook heel leuk. Het biedt ook een mooie box-size functionaliteit. Deze biedt een geweldige mogelijkheid om het volgende te doen: randradius, vakschaduw, tekstschaduw, RGBA, meerdere kolommen, vakgrootte, omtrek, overgangen, transformaties, kiezersgradiënten. Ik denk dat dit een van mijn favorieten is, omdat het ontwerp en de gebruikersinterface zo schoon is. Ik gebruik deze meestal als ik de cssmaker vergeet.
Knop generatoren
CSS3-Tricks Button Maker
Een van de eerste knopmakers die ik op de dag zag, deed me echt ineenkrimpen. Het was heel lineair, had geen UI (ironisch genoeg) en was over het algemeen een vreselijk ontworpen product. Als een kanttekening, zal ik het hebben over iets soortgelijks, maar voor nu zal ik er een laten zien waar ik over ben gekomen css3tricks , en het is echt een leuke.
Een van de belangrijkste punten om hier te verwijzen is het feit dat het bijna volledig controleerbaar is door een schuifregelaar met slepen en neerzetten, wat erg leuk is. Wacht maar tot je alles handmatig moet invoeren met behulp van het toetsenbord en je zou willen dat je een mooie schuifregelaar had. Als laatste kanttekening is CSS3 Tricks een prachtige site met een hoop goed georganiseerde en doordachte inhoud die je graag zou willen bekijken.
CSS3 Button.net
En nu komen we bij de generator waar ik het net over had. Het ontwerp ontbreekt misschien, maar het biedt veel meer keuze dan het vorige, wat ironisch genoeg vaak is hoe dingen werken. Soms wil je gebruiksgemak en soms moet je een serieuze keuze maken als het gaat om generatoren, en deze laatste twee hebben echt op beide punten geslagen.
Deze biedt de mogelijkheid om meerdere tekstschaduwen, binnenste schaduwen, randen en lettertypekleuren toe te voegen, terwijl de laatste echt niet zo gedetailleerd is. In het begin is het misschien moeilijk om erachter te komen, maar je krijgt het als je er een paar minuten mee speelt. Ik vind deze het meest bruikbaar als je gewend bent aan Windows UI's, en als gevolg daarvan heb ik klanten laten vertellen dat dit hun favoriet was omdat ze al jaren op XP zitten en niet beter weten. En nu weet ik zeker dat sommigen van jullie zich afvragen, maar het is eerlijk hoe het gaat - sommige klanten willen links naar generators om zelf te leren nadat je indruk op ze hebt gemaakt. Ik koppel ze meestal aan Lynda , TeamTreehouse , en een paar van deze generatoren voor een goede maatregel.
CSS3-knopgenerator
Dit is echt een leuke. Het geeft je één grote knop om te manipuleren, dat is ook in een rad retro kleur. Je kunt dan schaduw, rand, kleur manipuleren en daarbovenop kun je de zweeftekst bewerken. Ik vind deze leuk omdat hij er een was die ik een tijdje terug vond toen ik voor het eerst kennismaakte met CSS, en het gaf me echt een idee van wat het kan doen. De schuifregelaars voor slepen en neerzetten zijn ideaal voor mensen die nog niet vertrouwd zijn met de talen, omdat u meteen kunt zien wat u kunt doen. Nu, ik zal zeggen, ik gebruik deze niet meer in het bijzonder - in het licht van andere die zijn ontstaan, maar het is een geweldige herinnering.
Border Image & Radius Generators
Border-Beeld
Er gaat niets boven border-image.com als het gaat om het nemen van een specifieke afbeelding en het vervolgens repliceren om de juiste randstijl te vinden. Zorg ervoor dat je geen auteursrechtschending pleegt en gebruik de afbeelding van iemand anders zonder bronvermelding.
Maar laten we zeggen dat je een pijl of driehoek hebt getekend en dat je een generator wilt vinden om deze over de rand van je site of zelfs de rand van een element te herhalen. Nou, niets is beter dan deze site als het op die behoefte aankomt. U kunt de offset, de grootte en de herhaling van de afbeelding bewerken.
Zodra je op de site arriveert, zie je een voorbeeldafbeelding die is geladen, maar deze is echt veel nuttiger dan die afbeelding laat zien. Ik zal het vaak gebruiken voor ontwerpen in achtergronden die ik wil herhalen en / of kijken hoe het er snel uit ziet, voordat het de hele achtergrond in Photoshop daadwerkelijk repliceert. Je kunt het echt gebruiken voor alles wat met herhaalde afbeeldingen te maken heeft.
Border-radius
Dit is een geweldige en minimale kleine tool, die ik vaak vind is erg praktisch. Hiermee kunt u eenvoudig instellen hoeveel van een afgeronde rand u op elke hoek wilt hebben. Heel praktisch, heel eenvoudig. En dan vinkt u gewoon uit welk type browser-voorvoegsel u wilt opnemen en hoe u klaar bent. Het is een prachtige gebruikersinterface in alle eerlijkheid. Er zouden tests moeten zijn in computerwetenschappelijke cursussen waarbij je alleen maar probeert iets te verzinnen dat zo eenvoudig en functioneel is als dit.
CSS3 Gradiëntgeneratoren
Color Zilla Gradient Editor
Dit wordt aangekondigd als de ultieme CSS3 Gradient Editor, en voor goed gelijk. Het is zelfs zo geweldig dat het de enige verloopeditor is die ik hier zal opnemen. Het heeft een heleboel functies en is zeer bruikbaar en gemakkelijk om mee te beginnen. Sleep gewoon een beetje rond de zwarte en blauwe potloden en je zult snel zien wat ze doen. Ze maken ook een browsereditor in Chrome of Firefox dat is echt handig voor ontwerpers die op internet werken. Zorg er ook voor dat je hier speelt met de presets, want vaak zijn die goed genoeg - degene die ze koos heeft geweldig werk geleverd.
Typografische generatoren / editors
@fontface Generator
Dit is echt een interessant product. Wat het doet, kunt u lettertypen uploaden die u hebt gekozen via internet of op de computer, en geeft u vervolgens een uitgevoerd bestand dat klaar is om op het web mee te werken. Je krijgt echter meer dan één ding, je krijgt een paar dingen. U krijgt de CSS voor @ font-face-eigenschappen, gegeven het gekozen lettertype, en een HTML-bestand dat het lettertype en de vele toepassingen ervan weergeeft. Het is echt een geweldig hulpmiddel om het volledige potentieel van het lettertype te bekijken als je er niet helemaal zeker van bent, en vooral als je niet de tijd hebt om een hele website met dat lettertype te genereren voordat je het besluit neemt.
Reverse CSS3 Generator
CSS3 alstublieft
Dit is echt een fascinerend product. Wat het eigenlijk doet is dat het je een boxset geeft, en alle CSS ervoor, en dan kun je de secties aan en uit zetten om te zien wat ze doen. Dus je kunt in essentie de CSS3 reverse engineeren om erachter te komen wat het doet, en dan kun je zien wat je aan het doen bent. Dit is een geweldige manier om CSS3 te leren als je geïnteresseerd bent, maar denk dat generatoren een beetje te gecompliceerd zijn.
CSS3 Drop Shadow Generators
Webestools Shadow Generator
Ik vind deze schaduwgenerator behoorlijk leuk, omdat het in detail en diepte gaat over drop-shadows die de andere generators gewoon niet doen. Het lijkt misschien niet op het best ontworpen product ooit, maar het is zeker geweldig. Het heeft inzetschaduwen, schaduwen en de mogelijkheid om offsets te manipuleren, kleuren in te stellen en vrijwel alles te doen wat je met code kunt doen, maar in plaats daarvan met een mooie slepende balk. Oh, ik hou van de slepende bar. Vink deze uit als u in het algemeen wilt weten hoe uw schaduwidee er uit kan zien voordat u het hardcodes maakt.
HTML5-generatoren
HTML5-generatoren zijn moeilijk te vinden, en de reden daarvoor is waarschijnlijk vanwege hoe goed HTML5 Boilerplate is. Daar zullen we het niet over hebben, omdat het niet specifiek een generator is, dus ik zal het hier samenvatten: het is eigenlijk een HTML5-sjabloon die al is ingevuld en klaar is om mee te werken, dus ga kijken je hebt het niet gezien. Het is eigenlijk best gaaf. Veel mensen gebruiken het als een startersjabloon voor hun sites, en om een goede reden. Nu terug naar generators. Het vinden van een kwaliteitsvraag is eigenlijk best moeilijk, maar ik heb er hier een paar kunnen vinden die ik zal laten zien - en daarna heb ik een paar meer gegeneraliseerde die alle onderwerpen in dit artikel behandelen.
Shikiryu HTML5-generator
Shikiryu's HTML5 Generator is een stuk ingewikkelder. Je kunt functies toevoegen waarmee je dingen in Blueprint (mixins, enz.) En een fancy-type kunt doen - dus het is eigenlijk best handig. Ik vind het leuk omdat het een beetje semantischer is dan de andere opties, en tegelijkertijd kun je toevoegen aan echt populaire applicaties van derden die mensen graag gebruiken.
Schakel over naar HTML5 Generator
Dit is een interessante generator. Wat het doet, is dat het u in staat stelt een snel en eenvoudig kader voor het bouwen van sites te genereren, maar in tegenstelling tot HTML5 Boilerplate, laat het ons precies kiezen welke selectors we zouden willen zien in ons framework. Ik heb dit meestal gebruikt om code te genereren in plaats van HTML5 Boilerplate als ik nog een paar selectors of items nodig heb die het biedt. Nu volgen niet alle prachtig ontworpen principes van semantische markeringen, zoals HTML5 Boilerplate, wel, maar het doet goed werk, en je kunt naar binnen gaan en de rest doen als je het echt nodig hebt.
Quackit HTML5 Generator
Deze neemt een stap terug en in plaats van alleen een groep code te geven die behoorlijk algemeen en eenvoudig is, kun je al je eigen informatie invoeren. Dit is echt handig, en ik heb ontdekt dat anderen die nieuwer zijn op websites er echt dol op zijn. Ze vinden het vooral leuk, ik heb ontdekt dat het de standaardbasis-HTML voor je genereert om vervolgens naar wens te lijken met CSS. Dus als je CSS aan het leren bent, en nog steeds een beetje vaag over HTML bent (hoewel je niet zeker weet waarom dat het geval zou zijn), dan kun je het op deze manier doen.
En dat zal ongeveer zo zijn. Deze generatoren zijn gewoon geweldig om snel en behendig te werken, maar in plaats van voor ondernemers zijn ze voor ontwerpers. En dat is naar mijn mening echt briljant. Heb je een snel idee voor een grensradius (misschien een tab?), Of een schaduw- of een kleurverloop, of een html5-sjabloon met blauwdruk inbegrepen - nou deze zijn zojuist voor jou gemaakt. Houd er echter rekening mee dat dit geen volledige lijst was, maar het waren enkele van mijn favorieten en die die mijn collega's in het verleden hebben gebruikt. Ik vind het heel leuk om veel van deze te gebruiken, en ik hoop dat je het ook doet.