Il progetto di oggi sarà divertente. Creeremo una pagina demo HTML / CSS di base, quindi aggiungiamo un pulsante che consente all'utente di alternare lo schema dei colori della pagina tra gli stati: giorno e notte. Mentre i colori cambiano, così vari altri elementi nella pagina.
La parte davvero fantastica è che possiamo eliminare tutto usando solo i CSS. Lungo la strada impareremo come creare un evento click basato su CSS e come maneggiare pseudo elementi per manipolare il contenuto della pagina.
Cosa stiamo costruendo
Fondamentalmente, avremo una fase molto semplice che può essere alternata tra due stati. Lo stato predefinito è un giorno? tema, che utilizza uno sfondo chiaro e testo scuro. Il secondo stato è una? Notte? tema con uno sfondo scuro e testo chiaro. Con il semplice clic di un pulsante, sarete in grado di passare da uno all'altro.
? Il tema della luce e del buio mostrerà anche titoli differenti e immagini di sfondo?Non contento di semplici cambiamenti di colore, volevo portare ancora più avanti questa idea, quindi cambiamo anche alcune altre cose. Il tema del buio e della luce mostrerà anche titoli differenti e immagini di sfondo.
Ancora una volta, solo per metterci in mostra, eseguiremo tutta questa magia senza una sola goccia di JavaScript. Iniziamo.
Passo 1. HTML della pagina
La prima cosa che faremo è costruire la nostra pagina di test. Non c'è bisogno di essere molto qui, solo alcuni elementi di base con cui possiamo giocare nel nostro CSS. Come puoi vedere, ho usato un titolo, tre paragrafi e un'immagine.
La cosa veramente strana qui è il vuoto? Headerimage? div. Normalmente, vorrei semplicemente inserire un'immagine qui, ma se vogliamo essere in grado di scambiare questa immagine con il nostro CSS, dovremo inserire la foto come immagine di sfondo.
Passo 2. Starter CSS
Prima di scavare e iniziare a disegnare pezzi specifici del nostro markup, abbiamo un sacco di impostazioni da fare. Per prima cosa, useremo dimensionamento border-box per rendere le nostre relazioni dimensionali un po 'più facili da gestire. Questo manipola il modello di box CSS in modo che la larghezza specifica di un oggetto includa effettivamente padding e bordi.
Successivamente, ho aggiunto una transizione a tutto ciò che riguarda la pagina. Questo è certamente non consigliato per pagine Web serie, ma per la nostra piccola demo divertente, è il modo perfetto per assicurarsi che la transizione di accensione / spegnimento luci sia animata.
Per finire, ho semplicemente definito le dimensioni e il riempimento per i contenitori delle pagine. Si noti che se vogliamo usare altezza: 100% sul principale classe, quindi dobbiamo assicurarci che sia il corpo sia l'HTML siano impostati per occupare l'intera altezza della pagina.
Passaggio 3. Titolo CSS
Ora è il momento di iniziare a disegnare gli elementi specifici sulla pagina. Inizieremo con il nostro titolo. Centralo, assegnagli una famiglia di caratteri e trasformalo in maiuscolo. Quindi, ecco dove le cose si fanno interessanti, usa uno pseudo elemento da aggiungere alla parola? dopo il testo che abbiamo inserito nel nostro HTML.
Gli elementi pseudo sembrano un po 'complicati quando stai per iniziare, ma è importante capire esattamente cosa sta succedendo qui. In sostanza, il nostro HTML imposta un titolo con la parola? Luci? e il nostro CSS salta dentro e aggiunge la parola? On.?
Per una spiegazione completa degli elementi pseudo, consulta? Lowdown su: Before e: After in CSS.?
Passaggio 4. CSS di paragrafo
Il prossimo sono i tre paragrafi sotto il titolo. Questi devono essere fatti fluttuare a sinistra, impostare un terzo della larghezza del genitore e quindi cancellati. Ci sono anche alcune modifiche visive qui, ma tutto è abbastanza semplice.
Passaggio 5. Big Photo CSS
Per completare la pagina demo, assegnare un'immagine di sfondo al headerimage classe e definire le dimensioni. Come al solito, sto catturando un'immagine da LoremPixel.
Controllo avanzamento
A questo punto, la tua pagina dovrebbe assomigliare all'immagine qui sotto. Nel complesso, non è molto impressionante? ancora!
Passaggio 6. Light Switch HTML
Ora che abbiamo una demo con cui lavorare, è ora di installare un? Interruttore della luce? che è un modo elegante per dire che stiamo per lanciare un pulsante che cambia alcuni stili nella pagina. Il trucco per fare ciò con puro CSS è ampiamente delineato in un post precedente, "Utilizzo delle caselle di controllo per attivare i CSS e creare clic sugli eventi".
In quel post, abbiamo imparato come dirottare una casella di controllo e piegarla alla nostra volontà.Non è la più semantica delle tecniche, ma è sicuramente un'esplosione con cui giocare. Per far iniziare questa festa, aggiungi un'etichetta e l'input della casella di controllo nella parte superiore del corpo nel tuo codice HTML.
Passaggio 7. Interruttore della luce CSS
In sostanza, quello che faremo qui è nascondere la casella di controllo e modellare l'etichetta in modo che assomigli ad un pulsante. La ragione per cui questo funziona è che, in HTML, l'etichetta per una determinata casella di controllo può essere cliccata come la stessa scatola per attivare / disattivare lo stato.
Per rimuoverlo, imposta la visualizzazione dell'etichetta su "blocco", quindi imposta altezza, larghezza, colore di sfondo, allineamento del testo, tipo di carattere e margine come sotto. Notare anche che ho impostato la posizione su "fisso" ,? che consente alla luce di rimanere visibile mentre scorri la pagina verso il basso. Al passaggio del mouse, cambiamo semplicemente i colori.
Per finire, usiamo il posizionamento assoluto sulla checkbox stessa e lo spingiamo verso la terra di nessuno, nascondendolo efficacemente dalla pagina.
Controllo avanzamento
Questo ci dà un piccolo pulsante che sanguina dal lato sinistro della pagina. Ecco una panoramica dei due stati che abbiamo impostato:
Passaggio 8. Cambia il colore di sfondo
Ora che abbiamo impostato il nostro interruttore della luce, è ora di puntarlo nel nostro CSS e definire il?: Controllato? stato. Il vero voodoo qui è che siamo in grado di virare su altri selettori e in realtà cambiare quasi tutto sulla nostra pagina demo quando si fa clic sul pulsante. Iniziamo cambiando il colore di sfondo della pagina:
Qui abbiamo usato il combinatore fratello adiacente, che è impostato per afferrare qualsiasi? principale? classe che segue immediatamente il nostro interruttore luci controllato. Ciò renderà scuro il colore dello sfondo quando l'interruttore è spento.
Il trucco
La parte eccentrica qui è che devi legare il secondo selettore alla casella di controllo in qualche modo perché in realtà tutto costituisce un selettore complicato (e probabilmente piuttosto inefficiente). Ad esempio, non potevamo semplicemente afferrare il corpo, ma abbiamo dovuto usare un selettore di pari livello che definiva la relazione tra la casella di controllo e un altro elemento. Puoi anche estrarlo con il combinatore di bambini, che vedremo nel passaggio successivo.
Passaggio 9. Cambia molte cose!
Ora che sappiamo come usare l'interruttore della luce per cambiare gli elementi sulla pagina, possiamo diventare pazzi. Qui cambio il colore del testo, il colore di sfondo e persino l'immagine di sfondo in una foto notturna! Ho anche cambiato il h2: dopo testo da leggere? Off? in modo che il titolo si alternerà tra "Luci accese"? e? luci spente? mentre giochi con l'interruttore. Molto carino!
Questo ci dà un bel tema scuro che l'utente può scegliere di attivare.
Guardalo dal vivo
Tutto il nostro duro lavoro è stato ripagato, non è ora di vedere i frutti del nostro lavoro. Assicurati di fare clic sull'interruttore della luce a sinistra per vedere l'effetto. Inoltre, lancia la demo su CodePen e mostraci come potresti migliorare ancora!
demo: Clicca qui per il lancio.
Conclusione
Oggi abbiamo fatto un sacco di fantasiosi trucchi CSS con pochissimo sforzo. Abbiamo creato un evento click rubando una casella di controllo, utilizzato cambiando elementi pseudo e attivato l'aspetto generale di una pagina.
Come sempre, grazie per la lettura. Spero che tu abbia imparato alcune cose lungo la strada, lo faccio sempre!