Abbiamo recentemente fatto un sacco di cose divertenti con il : hover selettore. Dagli effetti al passaggio del mouse per i principianti ai tutorial hover più avanzati e persino all'utilizzo di hover con background multipli. Oggi andiamo avanti e impariamo un selezionatore correlato ma ugualmente impressionante che spesso viene trascurato.
Con :attivo, possiamo controllare lo stato di un oggetto mentre viene cliccato. In genere, questo prende la semplice forma di cambiare il colore di un link mentre il mouse è premuto, ma faremo qualcosa di molto più interessante. Seguiteci mentre costruiamo un gioco di trivia presidenziale super cool, puro CSS.
Cosa stiamo costruendo
L'idea di base qui è piuttosto semplice. Abbiamo una griglia di otto immagini con l'obiettivo di identificare gli uomini raffigurati, ognuno dei quali è un ex presidente degli Stati Uniti. Passando con il mouse su un'immagine, scorri verso il basso un po 'per rivelare ulteriori istruzioni, che ti incoraggia a fare clic. Cliccando e tenendo premuto farà scorrere ulteriormente l'immagine per rivelare il nome del presidente mostrato.
demo: Clicca qui per lanciare la versione live
Scaricare: Clicca qui per scaricare i file sorgente
Selettori di pseudo-classe
Un selettore di pseudo-classe è qualcosa che possiamo usare in CSS per modificare un selettore di base. Se questo sembra troppo tecnico per i tuoi gusti, non preoccuparti, li usi già senza nemmeno saperlo! Quello con cui probabilmente ti sarà più familiare è il : hover selettore pseudo-classe, che consente di modificare l'aspetto di qualcosa al passaggio del mouse. Potresti anche avere familiarità con i selezionatori pseudo-classe più fantasiosi come :Primogenito.
Per quanto riguarda i collegamenti o le ancore, ci sono quattro di questi selettori di pseudo-classe che dovresti conoscere. Eccoli con le spiegazioni per il loro uso:
Come puoi vedere, il nostro selettore hover spesso usato fa parte di una bella famiglia che può governare lo stile di un link praticamente in ogni stato della sua esistenza. È importante notare che questo sarebbe un insieme di strumenti molto più interessante se : visited non erano così problematici. A causa di problemi di sicurezza, i browser in realtà limitano ciò che puoi fare con questa pseudo-classe. Ad esempio, puoi usarlo per cambiare il colore di un link, ma non puoi manipolare l'immagine di sfondo del link.
Per questo motivo, ci rivolgiamo a :attivo se vogliamo fare qualcosa di veramente divertente con un semplice evento click CSS. Non è intuitivo fare clic e tenere premuto, quindi è necessario procedere con cautela quando si utilizza questa funzionalità e assicurarsi sempre di fornire istruzioni chiare all'utente.
Basta con le cose noiose, iniziamo il nostro progetto!
L'HTML
L'HTML per il nostro progetto è piuttosto semplice. Iniziamo con una breve introduzione che indica quale sia il gioco e come giocarlo. Qui poniamo una semplice domanda: "Chi erano i primi otto presidenti degli Stati Uniti ?? Si noti che tutto questo viene gettato in un div contenitore semplice.
Successivamente, creiamo un modulo riutilizzabile per contenere la nostra immagine, che serve come una sorta di domanda visiva, e la risposta, un semplice paragrafo che si nasconde sotto l'immagine. Il concetto di essere riutilizzabili è la chiave qui. Vogliamo ripeterlo per altri sette presidenti e, ovviamente, non vogliamo passare attraverso il dolore dello styling di ogni modulo individualmente. Per questo motivo, applichiamo una classe (president), che possiamo applicare una volta allo stile e avere quegli stili che influenzano tutto ciò a cui la classe è applicata.
Controllo avanzamento
Ora dovresti avere dei bei margini che spostano il contenuto lontano dal bordo e un titolo piacevole che non usa più lo stile tipografico predefinito.
Style the President Class
Ora inizieremo ad aggiungere un po 'di stile alla classe presidente, che dovrebbe fare un'enorme differenza nel nostro layout. Per iniziare, vogliamo spostarli tutti a sinistra e impostare le loro dimensioni. Dal momento che faremo scorrere le immagini dentro e fuori, impostiamo l'overflow su nascosto in modo che nulla possa uscire dalla nostra piccola scatola da 200 px per 200 px.
Quindi impostiamo il margine su 20px, questo non è un numero arbitrario. È il valore attentamente calcolato che consente quattro immagini per riga nel nostro layout. La nostra larghezza è 960px, che è divisa in quattro immagini di 200 px di larghezza, ma 4 * 200 è uguale a 800, lasciando 160 pixel a sinistra per i margini. Le immagini 160px / 4 sono 40px di margine per immagine, 20 a sinistra e 20 a destra.
Ci sono anche altri punti di interesse qui. Aggiungeremo in seguito qualche z-index voodoo, che in realtà fa sì che qualsiasi colore di sfondo copra il nostro testo di risposta. Per tener conto di ciò, ho usato un riempimento di sfondo RGBa al 20%. Le versioni precedenti di IE non mi piacciono, quindi semplicemente non ricevono alcun riempimento in background.
Ho anche impostato il cursore su? Pointer? che farà apparire la piccola mano quando ci soffermiamo su un presidente. Infine, ho aggiunto un'ombra inserita per rendere il nostro sfondo un po 'più bello. Questa parte è completamente facoltativa.
Controllo avanzamento
A questo punto le cose sembrano un po 'strane, ma siamo sulla strada giusta. Le immagini del nostro presidente sono contenute e ritagliate, il che è positivo, ma il testo di fondo li sta effettivamente spingendo verso il basso, cosa che non vogliamo. Invece vogliamo che l'immagine fluttui sul testo. Lo faremo nel prossimo passo.
Correggere gli stili di testo e l'ordine di impilamento
Prima di procedere a fare tutto questo, modifichiamo il testo del paragrafo in modo rapido. Se aspettiamo più a lungo, sarà nascosto dietro le immagini e più difficile da tenere d'occhio.
Questi stili dovrebbero rendere tutto il nostro testo molto più bello. Si noti che anche se il tag piccolo ha uno stile predefinito, può e deve essere facilmente sovrascritto in modo manuale.
Mettendo il testo dietro le immagini
Come ho detto sopra, non vogliamo che i nostri paragrafi spingano verso il basso l'immagine ma ci nascondiamo dietro. Per ottenere ciò, lo liberiamo dal flusso dal posizionamento assoluto e lo spostiamo dietro l'immagine con un indice z di -1.
Questo ottiene tutto esattamente dove lo vogliamo. Il testo si nasconde dietro l'immagine e ogni immagine viene finalmente mostrata nella sua forma completa. Il problema? Non c'è modo di vedere la risposta!
Portalo alla vita
Ora che abbiamo tutto esattamente dove lo vogliamo, è il momento di aggiungere l'interazione. Pensiamo a come vogliamo che funzioni: abbiamo già codificato lo stato di default, quindi siamo a posto. Il prossimo passo è l'evento hover. Questo dovrebbe abbattere l'immagine, ma solo un po ', quel tanto che basta per mostrare la prima riga di testo. Quindi, al clic, vogliamo portare l'immagine ancora più in basso.
Tutto ciò deve accadere con alcune belle transizioni, naturalmente, quindi il nostro primo passo è impostarle sulle immagini. Come sempre, abbiamo bisogno di un milione di versioni diverse per tenere conto di tutti i vari browser:
Con queste transizioni sul posto, ogni volta che cambiamo i margini sulle nostre immagini, la transizione sarà animata. Quindi il nostro prossimo passo è definire l'evento hover con il nostro selezionatore pseudo-classe preferito.
Questo aggiunge un po 'di margine alla parte superiore della nostra immagine in modo che quando l'utente vi passa sopra, questo è ciò che vedranno:
Questo serve come un piccolo consiglio per come ottenere la risposta. Se mostrassimo la risposta completa qui, probabilmente avremmo un problema con le rivelazioni accidentali, il clic serve come un modo più concreto per garantire l'intenzionalità.
Il nostro ultimo pezzo di CSS è ciò che siamo venuti qui per imparare: il selettore di pseudo classi attivo. Implementando questo piccolo ma potente pezzo finale, il nostro intero gioco a quiz si riunisce.
Ora, quando un utente fa clic su un'immagine e tiene premuto il pulsante, l'immagine del presidente scivola verso il basso e il suo nome viene rivelato. Con quello, siamo tutti finiti!
Conclusione
Dopo aver letto questo tutorial, dovresti conoscere un sacco di cose interessanti su alcuni dei più popolari selettori di pseudo-classi e su come usarli per ottenere risultati davvero interessanti. Abbiamo combinato il hover e i selettori attivi per creare un puro gioco trivia CSS in cui l'utente prima si sposta e poi fa clic per visualizzare un messaggio nascosto.
Lascia un commento qui sotto e facci sapere se hai imparato qualcosa. Assicurati anche di dare un'occhiata alla demo live. Puoi nominare tutti e otto i presidenti con successo?