Adoro la sfida di creare qualcosa con CSS che usa un oggetto per innescarne un altro. Può diventare piuttosto complicato avvolgere la tua mente su tutti i pezzi coinvolti e trovare un modo per far scorrere il tuo HTML in un modo facilmente controllabile nel tuo CSS.
Oggi affronteremo questa sfida. Costruiremo una home page di base che scambia le immagini di sfondo in base al link che stai spostando nella navigazione. Lungo la strada, imparerai tutto sull'idea di alianti remoti e su come maneggiarli nei tuoi progetti.
Giochi di prestigio
Sapevi che è possibile, usando solo CSS, manipolare un elemento quando un utente passa su un oggetto completamente diverso? È un po 'complicato, ma una volta appreso, puoi ottenere degli effetti davvero fantastici.
Per vedere come funziona, usiamo un esempio di base. Immagina di avere il seguente codice:
Mentre prima avevamo scelto come target solo fratelli adiacenti, ora stiamo prendendo di mira qualsiasi fratello maggiore. Così ora, tutte le immagini che si trovano sullo stesso livello dell'albero DOM come ancoraggio riceveranno un bordo come risultato del passaggio del mouse.
Cambiando il modo in cui pensi
? Non arrenderti! La sperimentazione è dove avviene l'educazione.Si noti che, per far funzionare questa tecnica, gli elementi con cui stiamo scherzando devono essere strettamente correlati dal punto di vista dell'albero DOM. Più in particolare, l'elemento che si intende manipolare deve essere un fratello o figlio dell'elemento su cui si desidera passare il mouse sopra. Non è possibile avere un hover remoto che richieda il backup dell'albero DOM.
Quando inizi a costruire progetti che utilizzano questa tecnica, scoprirai che queste semplici regole possono causare dei veri grattacapi! Piegano e rompono il formato che potresti usare per strutturare il tuo codice HTML e farti pensare in modo creativo a capire come ristrutturare i tuoi elementi in modo corretto, in modo che i voli alogeni funzionino.
Per l'esempio di oggi, mi ci sono voluti alcuni tentativi per strutturare correttamente il mio codice HTML e CSS in modo che tutto funzioni. Dal tuo punto di vista, sembrerà super semplice perché lo spiegherò nell'ordine corretto. Ricorda però che quando lo fai nei tuoi progetti, ci vorrà un sacco di giochini e ritocchi. Non arrenderti! La sperimentazione è dove avviene l'educazione.
Cosa stiamo costruendo
L'articolo che stiamo costruendo oggi è una semplice home page del sito web. La navigazione è un menu verticale lungo il lato sinistro e il resto del riquadro del contenuto è occupato da un'immagine grande.
demo: Clicca qui per il lancio.
Ora, se questo è tutto ciò che stavamo facendo, l'HTML sarebbe abbastanza semplice. Un grande div con un'immagine di sfondo che contiene un div più stretto con uno sfondo bianco e una lista non ordinata all'interno. Vogliamo rendere le cose un po 'più complicate però. Quando l'utente passa sopra un link di navigazione, l'immagine di sfondo deve cambiare.
Ciò significa che abbiamo bisogno di un intero mucchio di immagini di sfondo. La sfida però è capire dove posizionare quelle immagini nel markup in modo che possiamo accedervi tramite un hover remoto. Vediamo come funziona.
Passo 1: HTML
Per il nostro HTML, avremo bisogno di un contenitore di una lista non ordinata all'interno di un elemento nav, che è racchiuso in un contenitore div. Ecco la struttura di base:
Ovviamente vorremmo del testo nella nostra navigazione, quindi possiamo lanciare anche questo. Notare anche che ho gettato un'intestazione per fungere da identificatore del sito.
Per finire, aggiungiamo le nostre immagini. Vogliamo che ogni link corrisponda a un'immagine. Il modo migliore per farlo è quello di posizionare un'immagine dopo ogni collegamento, in questo modo possiamo controllare quelle immagini quando un link viene librato facendo leva su un selettore di pari livello come abbiamo fatto sopra. Ecco come appare in azione:
Questo assicurerà che abbiamo quella barra bianca sul lato sinistro che vogliamo. Ora passiamo allo styling del testo e dell'elenco. Dobbiamo scegliere come target h1 e ul, quindi applicare alcuni stili di base:
Ora che abbiamo lo stile dell'ul-ul, dobbiamo scavare e definire in modo specifico le parti di testo, che sono in realtà tutti gli elementi di ancoraggio all'interno delle voci di elenco. Scegli come target, imposta loro il blocco in modo da poter impostare le loro dimensioni in modo specifico, quindi modificale in questo modo:
Dato il modo in cui il nostro documento è strutturato, non possiamo spostare troppo l'elemento di navigazione o l'elenco non ordinato. Di conseguenza, dobbiamo indirizzare in modo mirato il primo elemento della lista in modo da poter spostare il testo in posizione. Questo è compiuto con nth-child (IE9 e solo sopra, usa selectivizr per i browser più vecchi).
Passaggio 5: Stili al passaggio del mouse
Come puoi vedere nell'immagine sopra, il menu di navigazione sembra perfetto ora.Sfortunatamente, non fa ancora niente! Non ti preoccupare, abbiamo impostato tutto nel modo in cui ne abbiamo bisogno, quindi poche righe di CSS sono tutto ciò che serve per dare vita a tutto.
Innanzitutto, ho aggiunto un effetto hover al testo in modo da avere un riscontro visivo sul fatto che qualcosa stia accadendo lì. Questo è importante per illustrare il concetto che ciò che l'utente sta facendo a sinistra sta influenzando le foto sulla destra.
Infine, per finire tutto, tutto ciò che dobbiamo fare è aspettare che l'utente si posizioni al passaggio del mouse, quindi prendi una delle immagini all'esterno del contenitore e trascinala sopra l'immagine di sfondo predefinita. Si noti che lo facciamo con il combinatore fratello adiacente che abbiamo imparato prima. Questo assicura che stiamo acquisendo l'immagine specifica abbinata all'ancora su cui si trova il puntatore.
Guardalo in azione
Con quello, siamo tutti finiti! Ora è il momento di dare un'occhiata al frutto del nostro lavoro. Assicurati di passare con il mouse su ciascuno dei link nella barra laterale e guarda come influisce sull'immagine di sfondo.
demo: Clicca qui per il lancio.
Vai a costruire qualcosa
A questo punto dovresti avere una buona idea di come maneggiare gli hover remoti per ottenere alcuni fantasiosi eventi CSS. Pensa a qualcosa di interessante da fare con questa idea e vai a costruirlo. Sembra semplice, ma posso quasi garantire che ti imbatterai in qualche strabiliante intoppo lungo la strada. Fai riferimento qui per vedere come funziona e assicurati di tenerlo fino a quando non lo hai padroneggiato!