Share
Ogni designer ama i pulsanti. È un fatto reso noto dall'apprezzamento di progetti come Unicorn UI (che al momento di questo articolo supporta solo pulsanti e ha quasi 4.000 Stargazers su GitHub).
Ma nessun designer si inserisce in una scatola. Tutti noi abbiamo i nostri desideri e le nostre esigenze fuori da un quadro di pulsanti. Vogliamo tutti vedere determinati tipi di pulsanti e forse siamo diventati davvero bravi a progettare un determinato tipo di pulsante. Quindi, perché non creiamo da zero il nostro kit di interfaccia utente a pulsante?
La base semplice ma molto efficace per la nostra interfaccia utente pulsanteInnanzitutto, dobbiamo identificare quali elementi i nostri pulsanti saranno in grado di individuare. Nel nostro caso, assicuriamoci che qualsiasi anchor, input o tag button possa essere abbinato al nostro kit UI. Per fare ciò, creiamo un po 'di markup:
Pulsante
Sto usando un attributo per farlo semplicemente perché penso che sia migliore. Potrebbe non essere terribilmente a prova di futuro (cosa succede se il W3C introduce una nuova specifica per gli attributi ui?) Ma se sei preoccupato di questo puoi spazio dei nomi ui come qualcosa di simile cory-ui nel qual caso scommetterei che sei al sicuro dalle nuove introduzioni del W3C. Se sei davvero, davvero, preoccupato per questo, o sei pazzo delle prestazioni, puoi utilizzare le classi e ottenere lo stesso effetto, ma potresti incontrare problemi con le classi che si sovrappongono l'un l'altro in determinati punti.
Useremo il preprocessore CSS Stylus per evitare di dover scrivere un milione di parentesi graffe e quindi il nostro codice appare pulito e ordinato senza ripetizioni. Anche se non hai dimestichezza con Stylus, dovresti essere in grado di seguire con un altro preprocessore o CSS vaniglia.
Per prima cosa, impostiamo alcuni stili predefiniti su [Ui * = "button"] selettore. Stiamo utilizzando il selettore di stelle all'interno di questo contesto, quindi puoi aggiungere "pulsante" in qualsiasi punto del tuo attributo e funzionerà.
[ui * = "button"] cursore: transizione del puntatore: tutti i 200 ms facilitano il bordo: 0 sfondo: scurire (bianco, 5%) colore: schiarire (nero, 20%) imbottitura: .5em 1.75em testo-decorazione: nessuno &: sfondo al passaggio del mouse: scurire (bianco, 10%)
Ora la parte divertente. Iniziamo ad aggiungere tutti gli attributi che pensiamo di poter utilizzare. Ad esempio, so che voglio avere la possibilità di avere pulsanti di varie dimensioni, quindi aggiungo dimensioni ai miei pulsanti:
Pulsante
[ui * = "button"] cursore: transizione del puntatore: tutti i 200 ms facilitano il bordo: 0 sfondo: scurire (bianco, 5%) colore: schiarire (nero, 20%) imbottitura: .5em 1.75em testo-decorazione: nessuno &: sfondo hover: darken (bianco, 10%) e [ui * = "small"] padding: .25em 1em font-size: .75em e [ui * = "grande"] padding: .75em 2em font-size: 1.25em & [ui * = "enorme"] padding: 1em 3em font-size: 1.25em
Nota come siamo aggiungendo gli attributi sul nostro selettore di attributo button? Ciò significa che quegli attributi non funzioneranno per elementi che non hanno ui = "button". Questo è un buon modo per mantenere le nostre modifiche con riferimento a vari attributi che potremmo voler aggiungere.
Continuiamo ad aggiungere qualche arrotondamento ai nostri pulsanti:
Pulsante
& [ui * = "round"] border-radius: 5px & [ui * = "pill"] border-radius: 999em
Il pulsante più piccolo ha gli angoli arrotondati, il secondo è diventato una "pillola"Ormai dovresti avere più familiarità con questo concetto. Aggiungiamo alcuni colori sotto forma di variabili:
Pulsante
color-primary = blue color-danger = red [ui * = "button"] cursore: transizione del puntatore: tutti i 200ms facilitano il bordo: 0 sfondo: scurire (bianco, 5%) colore: schiarire (nero, 20%) imbottitura:. 5em 1.75em text-decoration: none &: background hover: darken (bianco, 10%) e [ui * = "small"] padding: .25em 1em font-size: .75em e [ui * = "grande"] padding : .75em 2em font-size: 1.25em e [ui * = "enorme"] padding: 1em 3em font-size: 1.25em & [ui * = "round"] border-radius: 5px & [ui * = "pill "] border-radius: 999em e [ui * =" primary "] background: color-primary color: white & [ui * =" danger "] background: color-danger colore: white
Questo è il succo! Aggiungi tutte le regole e le proprietà che desideri. Puoi anche aggiungere temi complessi ai tuoi pulsanti, interessanti stati di hover e animazioni. Condividi la tua interfaccia utente pulsante con noi nei commenti!
Accentsconagua