Oggi ci divertiremo un po 'mentre diamo un'occhiata a un fantastico nuovo strumento gratuito per gli sviluppatori web chiamato semplicemente Button CSS. Questa app Web rende semplice e veloce la creazione dei pulsanti CSS dei tuoi sogni utilizzando controlli semplici e intuitivi.
Ho visto molti altri produttori di pulsanti CSS prima e quasi nessuno merita l'uso ripetuto, ma questo sito ha molto da fare e può davvero risparmiare un sacco di tempo e frustrazione. Facciamo un salto e dai un'occhiata!
Scopri il pulsante CSS
L'app Button CSS è perfetta per avviare i pulsanti. Per iniziare, ci sono alcune cose sulla home page che non vuoi perdere. I controlli di base sono abbastanza ovvi, puoi iniziare un nuovo pulsante da zero, controllare e modificare un modello o collegarti a Twitter in modo da poter salvare il tuo lavoro.
Inoltre, non perdere il pulsante Random un po 'nascosto? funzione nel footer. Al momento non ci sono molti contenuti sul sito (l'app è ancora in beta), ma quando riprende e guadagna più utenti, questa funzione diventerà un modo divertente per scoprire nuove idee per i pulsanti.
Creare un pulsante da zero
Non sono mai uno a cui optare per la facile uscita, quindi iniziamo creando il nostro pulsante completamente da zero. Per fare questo, basta premere il link a sinistra:
Questo dovrebbe portarti a una nuova schermata in cui avrai tutti i controlli necessari per creare un pulsante super-fantasioso. Tutti gli input sono di base e utilizzano forme semplici o controlli WYSISYG intuitivi.
Esamineremo ogni passaggio per mostrarti come funziona il processo. Tieni presente che questo può sembrare abbastanza coinvolto in un layout scritto, ma una volta provato da solo, lo sforzo si sente davvero minimo.
Gradiente di sfondo
Il primo passo che faremo è definire uno sfondo per il nostro pulsante. Puoi scegliere un colore solido o un gradiente, prenderò il percorso del gradiente. Questo utilizza semplici selettori di colore per aiutarti a costruire il tuo gradiente. Se hai mai codificato i gradienti CSS manualmente, allora sai che stiamo già risparmiando una grande quantità di tempo perché scegliere due colori è molto più semplice che scrivere il pasticcio di codice necessario per eseguire questa operazione.
Facendo clic sul fulmine vicino a un'opzione, viene visualizzato l'elenco dei controlli. Per molti di questi, puoi fare clic più volte per aggiungere l'effetto un numero di volte. Questo aiuta a creare livelli veramente complessi come Photoshop.
Capire l'anteprima
A destra dei controlli del pulsante si trova l'anteprima di ciò che stai creando. A questo punto non sembra molto, ma progredirà molto meglio.
Nota che hanno coperto tutte le basi qui e ti permettono di definire lo stato normale, hover e attivo. Per impostazione predefinita, le nostre azioni influenzeranno lo stato normale, semplicemente facciamo clic su uno degli altri stati per mirare in modo specifico. Il finale? la versione è un pulsante live che puoi utilizzare per valutare e interagire con il tuo design.
Box-shadow
I successivi sono i controlli box-shadow. Sono abbastanza semplici e consentono di inserire rapidamente i valori per sfalsamento, sfocatura, diffusione, ecc. Quindi si sceglie il colore e si può anche commutare l'opzione inserita per le ombre interne. La mia unica delusione è che non sembra che tu possa impostare l'ombra usando un valore rbga, che è il mio metodo preferito in modo che lo sfondo sia visibile.
Dimensioni del pulsante
Ora è il momento di dare finalmente un po 'di sostanza al nostro pulsante. In questa sezione puoi impostare una dimensione statica e aggiungere margini / padding per aggiungere peso al tuo pulsante. Puoi anche arrotondare gli angoli con un raggio di confine. Ognuna di queste opzioni ti consente di essere specifico come desideri, così ad esempio puoi scegliere di impostare il margine del bordo in modo che sia lo stesso su tutti i lati o diverso per ogni angolo.
Dopo questo passaggio, possiamo vedere che il nostro pulsante ha un aspetto molto più simile, beh, un pulsante!
Proprietà dei caratteri
Successivamente abbiamo alcuni controlli per impostare i nostri stili di ombreggiatura di testo e testo. Apprezzo molto essere in grado di impostare non solo il font, ma lo stack di font. Questo dimostra che lo sviluppatore aveva in mente i programmatori quando costruiva questo strumento.
Dopo questo passaggio, il nostro pulsante sembra piuttosto nitido. Abbiamo impostato praticamente tutto ciò di cui abbiamo bisogno per un pulsante di base (puoi anche entrare e impostare una transizione se lo desideri).
Al passaggio del mouse e attivo
Dopo aver ottenuto il mio stato normale del pulsante esattamente come lo desidero, è ora di tornare indietro e aggiungere le impostazioni per il mio hover e gli stati attivi. Ho preso il modo prevedibile di rendere il pulsante un po 'più chiaro al passaggio del mouse e di invertire il gradiente per simulare una stampa attiva.
Una volta che abbiamo finito, otteniamo una bella porzione di CSS da inserire nel nostro codice. È un grosso pezzo di codice, ma è tutto da solo, e deriva principalmente da tutti quei pazzi prefissi del browser che devi usare per rimuovere sfumature e ombre. Mentre guardo tutto il codice necessario per questo semplice pulsante, diventa abbastanza evidente quanto tempo questo piccolo strumento mi ha salvato. Sono più che capace di creare questo pulsante a mano, ma mi ci vorrebbe ammettere diversi minuti, sono stato molto più veloce usando i controlli WYSIWYG qui.
A partire da un modello
Ora che abbiamo seguito il percorso fai-da-te, torniamo all'inizio e prendiamo l'altra opzione: inizia da un modello. Cliccando su quel link ti porta alla pagina dei modelli in cui ci sono attualmente cinque esempi di pulsanti super slick tra cui scegliere.
Modifica del modello
Per iniziare, ho scelto di iniziare dal "Sexy Green Download Button"? modello. La scelta di un'opzione ti porta nello stesso generatore che abbiamo visto prima, l'unica differenza è che ora è precompilato con le impostazioni appropriate per creare il pulsante sottostante.
È davvero bello avere una solida base già costruita, da qui si tratta solo di personalizzare i valori che vorresti cambiare.Ad esempio, iniziando con il pulsante in alto, sono entrato e ho modificato solo le proprietà border-radius e box-shadow ed è stato in grado di liberare rapidamente il mio pulsante 3D falso.
Vale la pena provare?
So quello che molti di voi stanno pensando, e io sono con voi. Sono un nerd totale che ama sia l'arte che la scienza dei CSS, quindi in realtà godere codifica questi tipi di cose a mano. Detto questo, non posso fare a meno di apprezzare un'utilità che può davvero farmi risparmiare tempo, e questo è uno di quegli strumenti. Oltre a ciò, non sempre so cosa voglio in un pulsante quando comincio a crearlo ed è bello avere alcuni strumenti visivi da sperimentare e modificare fino a trovare qualcosa che mi piace.
Il pulsante CSS è ancora in beta, quindi mi sono imbattuto in un bug o due. Ad esempio, quando digiti manualmente un colore e poi fai clic sul selettore di colore in seguito per modificarlo, scopri che il selettore di colori non si aggiorna per riflettere la voce manuale.
A parte alcune piccole peculiarità, però, questa è una solida utility che ho intenzione di aggiungere alla mia sempre crescente toolbox CSS3. Come ho detto sopra, c'è molto su questa app che rende evidente che è stata costruita pensando ai programmatori. Ho una notevole quantità di flessibilità per fare tutte le cose che normalmente farei a mano, sono solo in un formato che è un po 'più facile da seguire.
Cosa pensi? Ti piacciono gli strumenti che mirano ad aiutarti a svolgere compiti complessi un po 'più facilmente o preferisci la via purista della sola codifica manuale?