15 grandi generatori HTML5 e CSS3
HTML5 e CSS3 sono ottimi linguaggi per iniziare a imparare, e ho sempre pensato che uno dei modi migliori per iniziare a imparare è semplicemente immergersi e manipolare il codice. Come probabilmente si potrebbe dire, è qui che i generatori intervengono. Sono un ottimo modo per generare del codice, giocarci e imparare.
Non solo, sono incredibilmente utili perché spesso, in qualità di sviluppatore o designer, troviamo che stiamo facendo le cose più e più volte. Bene, i generatori possono decollare e fare quelle piccole cose per te ogni volta.
Ad esempio, ho uno snippet di espansione testo che crea un modello HTML5 di cui ho scritto Qui . Ora, text-expander è ottimo ma non risolve ogni esigenza, e in questo caso c'è un grande bisogno di generatori, quindi ho trovato il tempo per trovare 20 dei miei preferiti e descrivere perché mi piacciono.
Dirò che la maggior parte di questa lista si concentrerà sui generatori CSS3, semplicemente perché sono richiesti più dei generatori HTML5 e impareremo il perché. Nota: clicca sulle immagini per aprire i siti web.
Generatori CSS3
C'è una connotazione alquanto negativa quando si tratta di questi generatori, e devo dire che come progettista e sviluppatore non c'è nulla di negativo nell'utilizzarne uno. È un enorme risparmio di tempo, e in tutta onestà conosco tre sviluppatori che hanno scritto i loro generatori proprio perché volevano aiutare la comunità. Quindi tieni a mente che non è come stai usando un tabù fatto da AOL; questi sono generatori molto naturali e organici che sono venuti come abbiamo avuto bisogno di loro. Quindi, perché non condividere parte della ricchezza? Esaminiamo alcuni dei miei preferiti e perché potrebbero piacervi.
Generatori generali
Questa sezione si concentrerà sui generatori che si prendono cura dei bisogni e degli usi dello spettro ampio. Questi copriranno quasi tutto ciò di cui potresti aver bisogno, o lo vorranno in un generatore, ma per loro stessa natura potrebbero essere peggiori in base alle specifiche. Questo è il motivo per cui darò così tante opzioni più avanti in questo articolo per tipi specifici.
CSS3.me
Questo è uno dei generatori esatti a cui mi riferivo. Questo è stato creato da uno dei miei designer preferiti, Eric Hoffman ed è sorprendente Molto semplice, minimale ed elegante, ma allo stesso tempo molto funzionale. Dandoti la possibilità di cambiare e impostare il raggio del bordo, rilascia ombra, il gradiente e l'opacità, è abbastanza funzionale.
Nota: dai un'occhiata al sito di Eric; è un ottimo esempio di primo design mobile. È anche un designer di Zendesk , quindi mandagli un po 'd'amore se ti è mai piaciuto quel prodotto.
CSS3 Maker
Spesso le persone trovano i generatori che amano e rimangono con loro. E questo è esattamente quello che è successo con un cliente con cui avevo lavorato precedentemente riguardo a questo generatore. Ne era assolutamente innamorato e posso capire perché - è sicuramente funzionale. Potrebbe non essere la cosa più bella mai realizzata, ma sembra che abbia tutte le campane e i fischietti.
Puoi eseguire @ font-face work, animazioni, ombre di caselle, ombre di testo, rotazione del testo, transizioni, gradienti, raggio di confine e molto altro. È uno di quelli che ho di solito messo tra i segnalibri, ma che raramente uso semplicemente a causa di quanto bene i piccoli generatori fanno in ciascuna delle loro rispettive categorie. Ma è certamente un buon generatore da provare se ne hai bisogno e non ti piace saltare in giro con un gruppo di altri.
Generatore CSS3
Questo è un altro buon generale che offre molte funzionalità. Mi piace questo perché ha un drop down piacevole e facile e una funzionalità facile da usare. Anche il design è molto carino. Offre anche una bella funzionalità di dimensioni della scatola. Questo offre una grande capacità di eseguire le seguenti operazioni: raggio del bordo, ombra del riquadro, ombra del testo, RGBA, colonne multiple, ridimensionamento della casella, contorno, transizioni, trasformazioni, gradienti dei selettori. Penso che questo sia uno dei miei preferiti, perché il design e l'interfaccia utente sono così puliti. Di solito uso questo quando dimentico cssmaker.
Generatori di pulsanti
CSS3-Tricks Button Maker
Uno dei primi produttori di bottoni che ho visto in passato mi ha fatto davvero rabbrividire. Era molto lineare, non aveva un'interfaccia utente (ironicamente) ed era nel complesso un prodotto orribilmente progettato. Come nota a margine, parlerò di qualcosa di simile dopo, ma per ora ne mostrerò uno che ho trovato a css3tricks ed è davvero carino
Uno dei punti chiave su cui fare riferimento qui è il fatto che è quasi interamente controllabile da un cursore drag and drop, che è davvero bello. Aspetta di dover inserire tutto manualmente usando la tastiera e ti piacerebbe avere un bel cursore di trascinamento. Come nota finale, CSS3 Tricks è un sito meraviglioso con un sacco di contenuti ben organizzati e ponderati che tutti vorremmo dare un'occhiata.
CSS3 Button.net
E ora veniamo al generatore a cui mi riferivo. Il design può mancare, ma offre molta più scelta rispetto al precedente, che è ironicamente il modo in cui le cose funzionano. A volte ti piacerebbe la facilità d'uso ea volte hai bisogno di una scelta seria quando si tratta di generatori, e questi ultimi due colpiscono davvero entrambi i punti.
Questo offre la possibilità di aggiungere più ombre di testo, ombre interne, bordi e colori dei caratteri, mentre l'ultimo non è riuscito a entrare in questi dettagli. All'inizio potrebbe essere difficile capirlo, ma lo otterrai se ci giochi solo per pochi minuti. Trovo che questo sia il più utile se si è abituati all'interfaccia utente di Windows, e di conseguenza ho avuto clienti che mi dicevano che questo era il loro preferito perché sono stati bloccati su XP per anni e non ne sanno niente di meglio. E ora sono sicuro che alcuni di voi si stiano chiedendo, ma onestamente come va: alcuni clienti vogliono che i link ai generatori imparino da soli dopo averli impressionati. Li collego solitamente a Lynda , TeamTreehouse e alcuni di questi generatori per buona misura.
Generatore di pulsanti CSS3
Questo è davvero divertente. Ti dà un grande pulsante da manipolare, che è anche in un colore retrò rad. Puoi quindi manipolare l'ombra, il bordo, il colore e in più ti dà la possibilità di modificare il passaggio del mouse. Mi piace questo perché è quello che ho trovato qualche tempo fa quando stavo per entrare nel CSS, e mi ha davvero dato un'idea di cosa può fare. I dispositivi di scorrimento drag and drop sono perfetti per le persone che sono nuove nelle lingue, perché puoi vedere cosa sei in grado di fare immediatamente. Ora, dirò, non uso più questo in particolare - alla luce di altri che sono venuti fuori, ma è un grande ricordo.
Generatori di immagine e raggio
Border-Image
Niente batte border-image.com quando si tratta di prendere un'immagine specifica e quindi di replicarla per trovare lo stile del bordo giusto. Assicurati di non violare comunque il copyright e di utilizzare l'immagine di qualcun altro senza attribuzione.
Ma diciamo che hai disegnato una freccia o un triangolo e vorresti trovare un generatore per ripeterlo sul bordo del tuo sito o persino sul bordo di un elemento. Bene, niente è meglio di questo sito quando si tratta di quel bisogno. Puoi manipolare l'offset, la dimensione e la ripetizione dell'immagine.
Non appena arriverai sul sito, vedrai un'immagine di esempio che hanno caricato, ma è davvero molto più utile di quella che l'immagine ha mostrato. Lo userò spesso per disegni in sfondi che voglio ripetere e / o vedere come sembrerebbe molto veloce, prima di replicare effettivamente l'interezza dello sfondo in Photoshop. Puoi usarlo per qualsiasi cosa relativa alle immagini ripetute, davvero.
Border-radius
Questo è un piccolo e grande strumento, che trovo spesso molto pratico. Con esso, tutto ciò che fai è semplicemente impostare quanta parte di un bordo arrotondato vuoi su ogni angolo. Molto pratico, molto semplice. E poi basta spuntare quale tipo di prefisso del browser si desidera includere, e boom fatto. È una bellissima interfaccia utente in tutta onestà. Ci dovrebbero essere dei test nei corsi di informatica in cui tutto ciò che fai è cercare di trovare qualcosa di così semplice e funzionale.
Generatori di gradiente CSS3
Color Zilla Gradient Editor
Questo è indicato come l'editor di gradiente CSS3 definitivo e per un buon diritto. In effetti, è così fantastico che è l'unico editor di sfumature che includerò qui. Ha un sacco di funzioni ed è molto utile e facile da usare. Basta trascinare un po 'le matite blu e nere per vedere rapidamente cosa fanno. Fanno anche un editor di browser Cromo o Firefox questo è davvero utile per i designer che lavorano sul web. Assicurati anche di giocare con i preset in questo, perché spesso i tempi sono abbastanza buoni - chi li ha scelti ha fatto un ottimo lavoro.
Generatori / editori tipografici
@fontface Generator
Questo è un prodotto davvero interessante. Ciò che fa è che puoi caricare font che hai scelto dal web o che potresti avere sul computer, e poi ti dà un file in uscita pronto per lavorare sul web. Tu ricevi più di una cosa, ottieni alcune cose. Si ottiene il CSS per le proprietà @ font-face date il carattere scelto e un file HTML che visualizza il carattere e i suoi numerosi usi. È davvero un ottimo strumento per verificare il pieno potenziale di un font se non ne sei sicuro, e soprattutto se non hai il tempo di generare un intero sito con quel tipo di carattere prima di prendere una decisione.
Generatore CSS3 inverso
CSS3 per favore
Questo è un prodotto davvero affascinante. Fondamentalmente quello che fa è che ti dà un cofanetto e tutti i CSS per questo, e poi ti dà la possibilità di attivare e disattivare le sezioni per vedere cosa fanno. Quindi puoi essenzialmente decodificare il CSS3 per scoprire cosa fa, e quindi puoi vedere cosa stai facendo. Questo è un ottimo modo per imparare CSS3 se sei interessato, ma pensa che i generatori siano un po 'troppo complicati.
Generatori di ombre d'ombra CSS3
Webestools Shadow Generator
Mi piace molto questo generatore di ombre, perché entra nei dettagli e nella profondità delle ombre che gli altri generatori semplicemente non fanno. Potrebbe non sembrare il miglior prodotto di sempre, ma è certamente fantastico. Ha ombre incorporate, ombre precoci e la possibilità di manipolare gli offset, impostare i colori e fare praticamente tutto ciò che si può fare con il codice, ma con una bella barra di trascinamento. Oh, quanto mi piace il bar che trascina. Controllane uno se hai bisogno di vedere in generale che aspetto avrà la tua idea di ombra prima di codificarlo.
Generatori HTML5
I generatori HTML5 sono difficili da trovare, e la ragione è probabilmente dovuta a quanto è grande Caldaia HTML5 è. Non ne parleremo, perché non è specificamente un generatore, quindi lo riassumerò qui: è fondamentalmente un modello HTML5 già compilato e pronto per essere utilizzato, quindi controlla se non l'hai visto In realtà è davvero fantastico. Un sacco di persone lo usano come modello di base per i loro siti, e per una buona ragione. Ora torniamo ai generatori. Trovare uno di qualità è in realtà piuttosto difficile, ma sono riuscito a trovarne alcuni che mostrerò - e in seguito ne ho alcuni più generalizzati che toccano tutti gli argomenti di questo articolo.
Shikiryu HTML5 Generator
Il generatore HTML5 di Shikiryu è molto più complesso. Puoi aggiungere funzionalità che ti permettono di fare cose all'interno di Blueprint (mixin, ecc.) E di tipo fantasioso - quindi è in realtà abbastanza utile. Mi piace perché è un po 'più semantico rispetto alle altre opzioni, e allo stesso tempo ti permette di aggiungere applicazioni di terze parti molto popolari che la gente ama usare.
Passa al generatore HTML5
Questo è un generatore interessante. Quello che fa è che ti permette di creare un framework semplice e veloce per i cantieri, ma a differenza di HTML5 Boilerplate, ci permette di scegliere esattamente quali selettori preferiremmo vedere nel nostro framework. In realtà ho avuto la tendenza a usarlo per generare codice invece di HTML5 Boilerplate quando ho bisogno di alcuni più selettori o elementi di quanti ne offra. Ora, non segue esattamente tutti i principi del markup semantico splendidamente progettati - come fa l'HTML5 Boilerplate - ma fa un lavoro abbastanza buono, e puoi entrare e fare il resto se davvero hai bisogno di usarlo.
Generatore HTML5 Quackit
Questo fa un passo indietro e invece di darti un gruppo di codice abbastanza generico e di base, ti permette di inserire tutte le tue informazioni. Questo è davvero utile, e ho trovato che gli altri che sono più recenti nei siti web lo adorano davvero. Lo amano particolarmente, ho trovato, in quanto genera l'HTML standard di base per te per poi dare un aspetto come desideri con i CSS. Quindi, se stai imparando i CSS e sei ancora un po 'confuso sull'HTML (anche se non sei sicuro del perché), puoi farlo in questo modo.
E questo lo avvolgerà. Questi generatori sono semplicemente fantastici per lavorare in modo rapido e agile, ma invece per gli imprenditori sono per i designer. E questo è davvero brillante secondo me. Hai un'idea veloce per un raggio di confine (forse tabù?), O un'ombreggiatura, o un gradiente di colore o un modello html5 con il modello incluso ... beh, questi sono fatti apposta per te allora. Prendi nota però che questa non era una lista esaustiva, ma erano alcuni dei miei preferiti e quelli che i miei colleghi in passato hanno usato. Mi piace davvero usare molti di questi, e spero che lo faccia anche tu.