Mi piace tenere d'occhio ogni mondo in crescita di applicazioni web con uno scopo specifico che mirano specificamente a rendere un po 'più facile la parte del tuo lavoro di web designer. Oggi esamineremo tre di questi strumenti che ho trovato di recente divertente e utile.
Inizieremo guardando Colllor, un ottimo modo per trasformare un singolo colore in molti. Successivamente passeremo a CSS Warp e creeremo una sorprendente tipografia CSS che probabilmente non pensavate fosse possibile. Infine, daremo un'occhiata a Bear CSS, un modo per generare rapidamente un foglio di stile di partenza basato sul tuo HTML. Iniziamo!
Colllor
Il primo nuovo strumento che andremo a vedere è Colllor, un'app divertente che ti aiuterà ad aggiungere varietà alle tue tavolozze di colori. Il concetto qui è semplice: "Trasforma un colore in una serie di alternative". Vediamo come funziona.
Come funziona
Il primo passo è semplicemente scegliere un colore. Prendi quel colore iniziale, digita e premi? Scegli Colore? pulsante. Puoi digitare un codice esadecimale o anche un colore con nome standard. In alternativa, puoi premere il pulsante di colore casuale solo per dargli un giro di prova.
Da qui l'output è piuttosto impressionante. Ottieni quattro barre orizzontali piene di nuovi campioni di colore tra cui scegliere: sfumature / tinte, toni, mix e simili. Il tuo colore originale è chiaramente evidenziato come riferimento.
Ti vengono presentati oltre cinquanta campioni correlati, ognuno dei quali è ben etichettato, ha un effetto 3D cool hover e può essere copiato negli Appunti con un solo clic.
I miei pensieri su Colllor
Sono un fan delle app per i colori e questo mi ha attirato immediatamente. È davvero ben progettato e abbastanza interattivo per rendere la ricerca dei colori un'esperienza davvero piacevole. All'inizio ero un po 'confuso sul perché non fossero incluse opzioni standard come la generazione di campioni complementari, ma ci sono un sacco di app là fuori con quella funzionalità e mi piace che Colllor cerchi di essere unico nel suo approccio.
In genere, per trovare sfumature diverse di un singolo colore, io uso 0to255, tuttavia, quel sito tende ad essere piuttosto lento. Colllor è sia più veloce che più versatile. Particolarmente unico è il? Mix? opzione, che ti consente di scegliere due colori per vedere una sfumatura di singoli colori tra i due.
Un'altra cosa che funziona bene è la? Copia negli appunti? caratteristica. Molte utilità di colore sentono la necessità di includere il? #? quando il colore viene copiato, che è utile per i CSS, ma è dannoso per Photoshop (CS6 affronta questo). Per ora, preferisco che il simbolo sia lasciato fuori, che è la strada intrapresa da Colllor.
Non ho davvero lamentele qui. Colllor è un'utility di colori fantastica e gratuita che devi assolutamente aggiungere alla tua lista di segnalibri.
CSS Warp
CSS Warp è uno strumento pazzo che ti permette di creare un tipo di web live che segue un percorso complicato. Lo strumento è notevolmente simile alla funzionalità del tipo di percorso in Illustrator, quindi il flusso di lavoro dovrebbe essere abbastanza familiare da consentirne la raccolta abbastanza rapidamente.
Come funziona
Passiamo attraverso un test per vedere come funziona. La prima cosa che fai è inserire del testo. Poiché il codice finale generato può essere enorme (ne parleremo tra un minuto), ti consiglio di mantenere il tuo testo breve e dolce. Una volta che hai finito, fai clic sul pulsante Warp.
Il tuo prossimo passo è definire la curva che il tuo tipo seguirà. Le opzioni qui sono abbastanza flessibili, puoi definire il tuo percorso di stile Bezier o scegliere una cerchia. I punti creano curve arrotondate di default ma c'è un'opzione in fondo all'app per cambiarli in angoli acuti.
Fai le vere mani sullo stampaggio nella piccola finestra di anteprima che appare accanto a tutti questi controlli. Questi aggiornamenti vengono aggiornati con tutte le modifiche apportate in modo da poter sempre dire esattamente come sarà il prodotto finale.
Puoi anche definire diverse opzioni riguardanti il font, tra cui la possibilità di impostare le dimensioni, l'altezza della linea, la crenatura * e il carattere. Mi piace il fatto che tu possa scegliere dalla libreria di caratteri Web di Google qui. Hai anche alcune opzioni su come il testo si allinea al percorso.
* Ho usato il termine? Kerning? qui perché questo è il nome del controllo sull'app reale. In realtà è mal etichettato, questo slider controlla davvero il tracciamento del tipo. La differenza è importante Leggi questo per ulteriori informazioni.
Una volta che hai finito e hai il tipo esattamente come lo vuoi, fai clic su "Genera HTML"? pulsante sopra l'anteprima per ottenere lo snippet di testo da copiare e incollare nel codice.
I miei pensieri su CSS Warp
Posso onestamente dire che non ho mai visto un altro strumento che estrae questo trucco così bene con il testo web in diretta. I risultati sono assolutamente impressionanti e semplicemente non sono qualcosa che vorresti mai fare a mano. Mi piace quando gli sviluppatori prendono l'iniziativa per spingere i limiti di ciò che è possibile sul Web e distribuire liberamente il proprio lavoro.
Il mio unico vero problema qui è davvero qualcosa completamente fuori dal controllo dello sviluppatore. CSS e HTML non hanno in realtà funzionalità incorporate per la digitazione lungo un percorso, quindi l'unico modo per farlo è racchiudere ogni lettera in un intervallo, quindi posizionare e ruotare in modo indipendente le lettere. Questo porta a una grossa porzione di codice che non è facile da interpretare. Come ho detto, lo sviluppatore non può davvero aiutarlo, altri strumenti che indirizzano singole lettere come Kern.js sono costretti a lavorare allo stesso modo.
Nel complesso, sono rimasto stupefatto di quanto sia ben sviluppata l'app nel suo insieme. È estremamente facile ottenere l'effetto desiderato e ci sono un sacco di opzioni da modificare lungo il percorso. C'è anche una versione JavaScript che dovresti controllare.
Bear CSS
Bear CSS fa solo una cosa: serve un foglio di stile di partenza quando carichi un file HTML.Non fa il lavoro di acconciare la tua pagina web, semplicemente ti fa iniziare digitando gli ovvi agganci di stile per te.
Come funziona
Bear CSS non richiede alcun pensiero o sforzo da parte tua. Tutto quello che fai, in realtà tutto ciò che puoi fare, è caricare un documento HTML.
Una volta caricato il tuo documento HTML, è ora di fare clic su? Scarica CSS? pulsante. Ho afferrato un documento casuale che avevo messo in giro solo per testarlo e ho ricevuto il seguente output.
I miei pensieri su Bear CSS
Ero piuttosto scettico riguardo a questo strumento. Mi piace scrivere il mio CSS e non mi fa impazzire l'idea di provare a farlo per me. Detto questo, sono rimasto piacevolmente sorpreso dall'uscita. L'organizzazione, sebbene non appropriata per ogni progetto, è decisamente logica e abbastanza ampiamente applicabile. Mi piace che senza alcuno sforzo ho un bel documento CSS di partenza con i principali hook che potrei voler targetizzare, chiaramente separati in categorie come la tipografia e il layout.
Ovviamente, non è uno strumento magico. Non legge la tua mente e crea selettori complessi, sono solo le necessità dell'orso? (prendilo?). Non tutti scrivono il codice HTML completo di una pagina Web prima di iniziare su CSS, ma se lo fai, allora questo è sicuramente qualcosa che dovresti provare.
Una delle caratteristiche che mi piacerebbe davvero vedere è la possibilità di incollare in HTML piuttosto che caricare un file. Sarebbe bello fare solo una rapida azione di copia dal mio editor di testo aperto. Inoltre, in alcuni dei miei test che contenevano classi ripetute, il CSS generato ripeteva anche quel selettore di classe, che è ovviamente ridondante e non necessario.
Un'altra cosa che mi piacerebbe vedere sono alcune opzioni extra che gli utenti professionisti possono modificare. Alcuni metodi di organizzazione diversi, che includano o meno i hover con qualsiasi oggetto racchiuso in un'ancora e magari un reset / normalizzazione dell'inclusione.
Conclusione
Spero che tu abbia trovato un nuovo strumento o forse tre nuovi strumenti da aggiungere al tuo bagaglio di sviluppo web. Le tre app sopra non influenzano in modo drastico il tuo flusso di lavoro, ma possono renderne alcune parti un po 'più semplici.
Lascia un commento qui sotto e facci sapere cosa ne pensi delle tre app sopra. Hai mai usato qualcuno di loro prima? Quali altri grandi strumenti ti hanno aiutato recentemente?