Share
Uno dei selettori CSS più potenti e sottoutilizzati è il combinatore generale di fratelli: ~. Nelle prossime esercitazioni andrò su diversi modi di usare ~ creare componenti che non siano solo visivamente accattivanti, ma anche funzionali e utili. Questo tutorial coprirà gli elementi del modulo; radio, casella di controllo e ingressi regolari.
Impareremo molto: i moderni selettori CSS, i cambierà proprietà, SVG ictus proprietà, stati di input e molto altro!
Un rapido disclaimer: questi effetti CSS potrebbero non funzionare nei vecchi browser, li ho testati nelle ultime versioni di Chrome, Firefox e Safari.
Userò Haml (un compilatore HTML) e Sass (un preprocessore CSS) per accelerare il processo di codifica! Le demo useranno Haml mentre qualsiasi codice inline userà l'HTML normale.
Userò anche lo straordinario AutoPrefixer invece dei prefissi dei produttori. Se usi CodePen, assicurati di andare alle impostazioni della penna, fai clic su CSS e seleziona AutoPrefixer.
Seleziona AutoPrefixer nelle impostazioni della pennaIniziamo con uno degli elementi di forma più elementari: l'ingresso radio. Esistono due stati visivi principali (selezionato e deselezionato) e due stati intermedi (hover e clic / clic attivo è simile nell'aspetto a selezionato).
Il primo passo è impostare il nostro HTML. Avrai bisogno di un contenitore esterno principale e di un contenitore interno con due bambini: a div contenente l'input e gli elementi visivi e a etichetta per l'input. Mi piace usare a fieldset per il contenitore esterno. Assicurati di aggiungere un ID per l'input che corrisponde al per attributo sull'etichetta.
Il prossimo passo è quello di nascondere l'input predefinito, aggiungere alcuni stili visivi di base e nascondere gli elementi extra che verranno mostrati solo quando l'ingresso radio è selezionato. L'idea è di rendere invisibile l'input, ma di posizionarlo superiore degli elementi visivi, in modo che facendo clic sull'ingresso radio si abbia l'impressione di fare clic sull'opzione della radio visiva. Possiamo farlo impostando posizione: relativa a .svg e posizione: assoluta all'ingresso, quindi nascondendo l'input.
Nota: puoi formattarlo come preferisci. Ho scelto uno stile di cerchio di base che simula la radio predefinita, tranne che è più piatto.
Imposteremo alcune variabili di colore usando Sass; un paio di colori grigi e un blu brillante per la radio selezionata. Imposteremo anche una variabile $ p per la nostra unità di default-12px è un bel numero perché è divisibile per una vasta gamma di numeri diversi (1, 2, 3, 4, 6).
Inserisco direttamente le variabili principali nell'embed, ma qui è possibile trovare uno stile aggiuntivo o facendo clic sulla pagina CodePen, facendo clic su impostazioni nell'angolo in alto a destra e facendo clic sul CSS scheda per visualizzare fogli di stile aggiuntivi.
Abbiamo trasformato il primo cerchio in grigio chiaro e il secondo in blu chiaro, quindi nascosto il secondo impostando transform: scale (0). In seguito, animeremo nuovamente il cerchio, quindi è importante impostare la scala ora.
Dopo aver impostato tutto ciò, dobbiamo decidere gli stili visivi per ogni stato. Per questo esempio, ho deciso che al passaggio del mouse il cerchio grigio chiaro dovrebbe diventare blu chiaro; al clic, il cerchio blu si ridimensiona e lo sfondo grigio diventa bianco, quindi rimane in questo modo per lo stato selezionato. L'unico modo per rimuovere lo stato controllato da una radio è fare clic su un'altra radio, nel qual caso il blu e il bianco dovrebbero semplicemente svanire.
Prima imposterai i colori, poi animeremo dopo che tutti gli stati avranno colori. Questo è dove la tilde ~ torna utile. Questo selettore generale del fratello (il combinatore di fratelli) selezionerà il secondo elemento fintanto che è preceduto dal primo elemento da qualche parte e condividono un genitore comune. Noi usiamo input: hover ~ div per selezionare l'elemento visivo quando l'input è al passaggio del mouse.
Prova a fare clic sulla prima radio, poi sulla seconda: dovresti essere chiaramente in grado di vedere gli stati al passaggio del mouse e attivi / controllati.
Il passo finale è impostare le animazioni per ogni stato. La chiave per animare tutti questi stati diversi è impostare le transizioni deselezionate per impostazione predefinita e impostare le transizioni controllate quando si fa clic sull'input. Sto usando una nuova proprietà CSS chiamata cambierà per far sapere al browser quali proprietà animerò.
È anche possibile effettuare questo ingresso radio personalizzato senza utilizzare un SVG. La configurazione è simile:
Il CSS è quasi esattamente lo stesso, tranne con un po 'più di stile per i due div elementi che hanno sostituito i cerchi SVG. In questo caso, usiamo nth-of-type (n) per selezionare i diversi elementi div in modo da non dover assegnare loro una classe nell'HTML.
Con la versione SVG, c'è più markup ma meno styling; con la versione HTML, è il contrario. I risultati sembrano identici, quindi prova quello che si adatta alle tue preferenze di codifica!
Il prossimo elemento del modulo che personalizzeremo è l'input della casella di controllo. I suoi stati sono simili a quelli dell'ingresso radio: due stati visivi principali (selezionato e deselezionato) e due stati intermedi (hover e clic / attivi).
La configurazione assomiglia molto all'entrata della radio, ma usa le linee per formare il segno di spunta anziché i cerchi.
Le linee del primo gruppo avranno un colore grigio chiaro e non saranno animate; le linee del secondo gruppo si animeranno quando viene cliccato l'input.
C'è anche un altro div elemento; lo useremo per creare un effetto click in cui il blu brillante si espande sullo sfondo. Per rendere l'effetto funzionante, il div deve essere un cerchio blu con una larghezza e un'altezza maggiori rispetto alla casella di controllo effettiva e il contenitore esterno deve avere overflow: nascosto; imposta in modo che i bordi del cerchio non vengano visualizzati. Il div rotondo dovrebbe avere transform: scale (0) impostato, simile alla radio.
Dimensioni casella di controllo (a sinistra) e dimensioni del cerchio (a destra)Ancora una volta, formatta questo in base alle tue preferenze. Ho deciso di arrotondare i bordi del segno di spunta e tutti gli angoli.
Il prossimo passo è preparare le animazioni. Gli effetti sono simili alla radio, tranne per il fatto che invece di un cerchio che si espande, il segno di spunta si disegna dentro. Per questa animazione, avremo bisogno di utilizzare ictus dashoffset sulle linee SVG.
Per animare ictus dashoffset, avremo bisogno della lunghezza di ogni linea. Ho creato uno strumento su CodePen per calcolare le lunghezze, ma se si utilizza il segno di spunta che ho già creato, la lunghezza della linea più breve è 6,708 e più è lungo 14,873. Useremo questo valore per impostare entrambi ictus dashoffset e ictus dasharray. Questo è necessario solo per il primo segno di spunta (la seconda serie di righe viene visualizzata per impostazione predefinita nello stato non selezionato).
Quando viene cliccato l'input, imposteremo il ictus dashoffset a 0, che (con una transizione) sembrerà come se la linea fosse "disegnata". Abbiamo anche bisogno di aggiungere le altre modifiche di stato dalla radio personalizzata, incluse le modifiche dello sfondo al passaggio del mouse e la scala del cerchio al clic.
L'ultimo passo è aggiungere tutte le transizioni. Ancora una volta, imposteremo le transizioni deselezionate per impostazione predefinita e imposteremo le transizioni selezionate al clic. Analogamente al sbiadimento del cerchio per la radio, avremo il segno di spunta in dissolvenza quando deselezionato.
Puoi anche ottenere lo stesso effetto con pochi elementi div invece di usare un SVG; il markup è più semplice, ma non delineato con chiarezza. Il primo div vuoto è il cerchio blu in espansione, il secondo è il segno di spunta predefinito e il terzo è il segno di spunta che si anima quando si fa clic.
Useremo :prima e :dopo come ogni parte del segno di spunta, che semplifica il markup, altrimenti avresti bisogno di quattro elementi vuoti o più per creare i due segni di spunta. Dobbiamo posizionare le linee manualmente e ruotarle in posizione, ma è possibile utilizzare una singola trasformazione per ruotarle e disegnarle.
Puoi anche usare un segno di spunta invece di ruotare gli elementi div! Non è esattamente uguale agli altri due visivamente, ma funziona altrettanto bene.
Nota: hai solo bisogno del simbolo HTML negli ultimi due elementi div, ma nella demo qui sotto, l'ho incluso in tutte e tre le div in modo da poterlo includere nel ciclo ripetuto.
Dal momento che non possiamo disegnare il simbolo, la versione bianca sfuma in entrata e in uscita al clic. Controlla tutte e tre le versioni in basso!
L'ultima parte di questo tutorial è il normale inserimento di testo. Mi sono ispirato agli input della linea materiale di Google. Questi ingressi hanno alcuni stati diversi: predefinito, attivo / attivo (quando il cursore lampeggiante è visibile) e un sottile hover.
L'installazione è ancora più minimale rispetto ai due stili di input precedenti. Abbiamo un fieldset, l'input, un'etichetta e un elemento div per il bordo.
Il prossimo passo è lo styling dell'input. Non nasconderemo l'input questa volta poiché ne abbiamo bisogno per mostrare il valore. Creeremo anche un'etichetta che si muove su e giù quando ci concentriamo sull'input. Per fare in modo che funzioni, dovremo posizionare l'etichetta esattamente sopra l'input. Il bordo div avrà un :dopo pseudo elemento che si disegna sopra il bordo quando si fa clic sull'input; metteremo un scala (0) sullo pseudo elemento per prepararlo per l'animazione.
Se provi a fare clic sull'input della demo sopra e inizi a digitare, noterai che il testo si trova in cima all'etichetta. Animeremo l'etichetta per ridurla e tradurla al clic. È possibile utilizzare interamente le trasformazioni per evitare di ridipingere, invece di utilizzare dimensione del font come ho fatto, ma ho trovato che usarlo così come translateY mi ha dato un'animazione molto più precisa. Toglieremo anche la scala sul div :dopo per rendere l'animazione del disegno.
Ora, se provi a fare clic sull'ingresso demo sopra e inizi a digitare di nuovo, l'etichetta si riduce e si sposta senza intoppi, ma se lasci il testo digitato nell'input e fai clic all'esterno, l'etichetta si sposta nuovamente verso il basso, ostruendo l'input. Potremmo usare JavaScript per prevenire questo comportamento, ma possiamo anche usare uno stato di input CSS chiamato :valido.
Possiamo aggiungere necessario come attributo vuoto al nostro input in HTML o add : required => true ai nostri attributi di input in Haml. Quindi aggiungiamo :valido al :messa a fuoco proprietà nel nostro Sass / CSS. Questo aggiunge uno stato visivo aggiuntivo al nostro input, e poiché si tratta di un semplice input di testo, l'unico stato valido è quando viene immesso del testo.
Nota: l'utilizzo di un tipo diverso di input, come un input di posta elettronica, può causare la violazione di questo comportamento, poiché gli input di posta elettronica hanno requisiti di validità diversi.
Se vuoi creare i tuoi input utilizzando queste tecniche, ma hai bisogno di più ispirazione visiva, controlla i kit dell'interfaccia utente disponibili con un abbonamento Envato Elements:
Kit dell'interfaccia utente su Envato ElementsEsistono dozzine di modi diversi per utilizzare il selettore generale del fratello che sono visivi, funzionali o entrambi. Offre un modo efficace per personalizzare i componenti senza dover utilizzare molto più di CSS e HTML. Abbiamo coperto tre diversi tipi di elementi del modulo in questo tutorial; nel prossimo, esploreremo i menu e la navigazione. Sentiti libero di lasciare un commento qui sotto se hai domande o feedback!
Accentsconagua