Pubblicato da: Max
In data:
22 Dic 2021
Tempo di lettura:
Dark CSS
Ciao! Nel video-tutorial di oggi, vedremo come realizzare in una pagina web la fantastica Dark Mode, cioè la versione scura o modalità dark, di un sito o una pagina web.
La particolarità di questo tutorial, è che faremo tutto senza scrivere una sola riga di javascript, ma utilizzando solo Html e CSS, attraverso un input di tipo checked, anch’esso opportunamente stilizzato.
Mettiamo subito a lavoro!
Iniziamo creando la struttura di partenza di tutti i siti web: La pagina minima html
E spostandoci sul foglio di stile, resettiamo margini e padding di tutti gli elementi della nostra pagina.
Continuiamo, definendo tutta la struttura html che ci occorre.
Stilizziamo il body
Assegniamo le dichiarazioni di stile ai contenitori container e card.
Stilizziamo h1 e p, puntando specificamente all’h1 della nostra card, con .container . card h1, e alla p della card, grazie al selettore .container . card p. Facciamo questa scelta di selezione specifica per evitare che dalle dichiarazioni assegnate vengano coinvolti altri h1 e p della pagina. Anche se in realtà questo vale solo per il tag paragrafo(p), di cui le pagine web possono essere piene, ma non per il tag titolo h1, in quanto, dovrebbe esserci un solo h1 in ogni pagina web.
A questo punto, concentriamoci sul checkbox, e diamogli lo stile appropriato al suo scopo.
Creiamo il pulsante di switch.
Facciamolo scorrere a destra e a sinistra al click.
Click sul pulsante, lo sfondo diventa scuro e i testi chiari.
L’h1 rimane scuro
Al click, lo sfondo del tasto cambia colore.
Bene! Abbiamo concluso questo video-tutorial, su come realizzare una modalità Dark, senza l’utilizzo di Javascript, ma usando soltanto html e css.
Spero che l’articolo ti sia piaciuto, e che possa soprattutto esserti utile per i tuoi progetti.
Se vuoi scaricare i file creati in questo video-tutorial, clicca su Download e dopo decomprimi il file Zip.
Se vuoi vedere il video-tutorial completo eccolo!
Ciao alla prossima! 🙂
