Le projet d'aujourd'hui va être amusant. Nous allons créer une page de démonstration HTML / CSS de base, puis ajouter un bouton permettant à l’utilisateur de basculer le jeu de couleurs de la page entre les états: jour et nuit. Lorsque les couleurs changent, divers autres éléments de la page le seront également.
La partie vraiment géniale est que nous pouvons tirer tout cela en utilisant seulement CSS. En cours de route, nous allons apprendre à créer un événement de clic basé sur CSS, ainsi qu’à manipuler des pseudo-éléments pour manipuler le contenu de la page.
Ce que nous construisons
Fondamentalement, nous allons avoir une étape très simple qui peut être basculée entre deux états. L'état par défaut sera un? Jour? thème, qui utilise un fond clair et un texte sombre. Le deuxième état sera une? Nuit? thème avec un fond sombre et un texte clair. En un clic, vous pourrez basculer entre les deux.
"Les thèmes sombre et clair présenteront également différents titres et images d'arrière-plan."Non content de simples changements de couleur, je voulais aller plus loin dans cette idée, nous allons donc changer quelques autres choses. Les thèmes sombre et clair présenteront également différents titres et images d'arrière-plan.
Encore une fois, juste pour montrer, nous allons effectuer toute cette magie sans une seule goutte de JavaScript. Commençons.
Étape 1. Page HTML
La première chose à faire est de construire notre page de test. Il n’ya pas besoin d’être grand-chose ici, mais quelques éléments de base avec lesquels nous pouvons jouer dans notre code CSS. Comme vous pouvez le constater, j’ai utilisé un titre, trois paragraphes et une image.
La chose vraiment étrange ici est le vide? Headerimage? div. Normalement, je jetterais simplement une image ici, mais si nous voulons pouvoir échanger cette image dans notre CSS, nous devrons insérer la photo en tant qu'image d'arrière-plan.
Étape 2. CSS de démarrage
Avant de creuser et de commencer à styler des éléments spécifiques de notre balisage, nous avons beaucoup de travail à faire. Tout d'abord, nous allons utiliser Dimensionnement de la bordure pour rendre nos relations de taille un peu plus facile à gérer. Cela manipule le modèle de boîte CSS afin que la largeur spécifique d'un objet inclue réellement le remplissage et les bordures.
Ensuite, j'ai ajouté une transition à tout ce qui se trouve sur la page. C'est certainement ne pas recommandé pour les pages Web sérieuses, mais pour notre petite démo amusante, c'est le moyen idéal de s'assurer que la transition on / off de la lumière est animée.
Pour finir, j'ai simplement défini les tailles et le remplissage des conteneurs de pages. Notez que si nous voulons utiliser hauteur: 100% sur le principale classe, alors nous devons nous assurer que le corps et HTML sont également définis pour occuper toute la hauteur de la page.
Étape 3. Titre CSS
Il est maintenant temps de commencer à styler les éléments spécifiques de la page. Nous allons commencer avec notre titre. Centrez-le, donnez-lui une famille de polices et transformez-le en majuscule. Ensuite, voici où les choses deviennent intéressantes, utilisez un pseudo-élément pour ajouter le mot? après le texte que nous avons inséré dans notre code HTML.
Les pseudo-éléments semblent un peu compliqués au début, mais il est important de comprendre exactement ce qui se passe ici. Essentiellement, notre code HTML définit un titre avec le mot? Lights? et notre CSS intervient alors et ajoute le mot? On.?
Pour une explication complète des pseudo-éléments, consultez? The Lowdown on: Before et: After in CSS.?
Étape 4. Paragraphe CSS
Ensuite, les trois paragraphes sous le titre. Celles-ci doivent être laissées flottantes, définies sur un tiers de la largeur du parent, puis effacées. Il y a aussi quelques ajustements visuels ici, mais tout est assez simple.
Étape 5. Big Photo CSS
Pour terminer la page de démonstration, attribuez une image d’arrière-plan à la headerimage classe et définir les dimensions. Comme d'habitude, je récupère une image de LoremPixel.
Vérification des progrès
À ce stade, votre page devrait ressembler à l'image ci-dessous. Dans l'ensemble, ce n'est pas très impressionnant? encore!
Étape 6. Interrupteur De Lumière HTML
Maintenant que nous avons une démo à utiliser, il est temps d'installer un "interrupteur d'éclairage". ce qui est une façon élégante de dire que nous allons ajouter un bouton qui modifie certains styles de la page. L’astuce pour faire cela avec du CSS pur est en grande partie décrite dans un post précédent, "Utilisation de cases à cocher pour basculer le CSS et créer des événements de clic".
Dans cet article, nous avons appris à détourner une case à cocher et à la plier à notre volonté.Ce n'est pas la technique la plus sémantique, mais c'est vraiment un plaisir de jouer avec. Pour lancer cette fête, ajoutez une étiquette et une case à cocher en haut du corps de votre code HTML.
Étape 7. Commutateur d'éclairage CSS
Ce que nous allons faire ici consiste essentiellement à masquer la case à cocher elle-même et à attribuer à l'étiquette le caractère d'un bouton. La raison pour laquelle cela fonctionne est que, en HTML, le libellé d'une case à cocher donnée peut être cliqué de la même manière que la boîte elle-même pour basculer l'état inactif / activé.
Pour retirer ceci, définissez l'affichage de l'étiquette sur "block", puis définissez une hauteur, une largeur, une couleur d'arrière-plan, un alignement du texte, une police et une marge comme ci-dessous. Notez également que je règle la position sur? ce qui permet à l'interrupteur d'éclairage de rester visible lorsque vous faites défiler la page. En vol stationnaire, nous changeons simplement les couleurs.
Pour finir, nous utilisons le positionnement absolu sur la case à cocher elle-même et le poussons vers le no man's land, le cachant efficacement de la page.
Vérification des progrès
Cela nous donne un petit bouton qui saigne du côté gauche de la page. Voici une photo des deux états que nous avons mis en place:
Étape 8 Changer la couleur de fond
Maintenant que notre interrupteur est configuré, il est temps de le cibler dans notre CSS et de définir le?: Vérifié? Etat. Le vrai vaudou ici est que nous pouvons utiliser d'autres sélecteurs et changer à peu près tout sur notre page de démonstration lorsque l'utilisateur clique sur le bouton. Commençons par changer la couleur de fond de la page:
Ici nous avons utilisé le combinateur de fratrie adjacent, qui est prêt à en saisir? la classe qui suit immédiatement notre interrupteur vérifié. Cela rendra effectivement la couleur d'arrière-plan sombre lorsque le commutateur est désactivé.
L'astuce
La partie bizarre ici est que vous devez lier le deuxième sélecteur à la case à cocher car cela constitue vraiment un sélecteur compliqué (et probablement assez inefficace). Par exemple, nous ne pouvions pas simplement saisir le corps, nous devions utiliser un sélecteur de fratrie qui définissait la relation entre la case à cocher et un autre élément. Vous pouvez également retirer ceci avec le combinateur enfant, que nous verrons dans la prochaine étape.
Étape 9. Changer beaucoup de choses!
Maintenant que nous savons utiliser l’interrupteur pour changer des éléments de la page, nous pouvons devenir fous. Ici, je change la couleur du texte, la couleur de fond et même l'image de fond en photo de nuit! J'ai aussi changé le h2: après texte à lire? Off? de sorte que le titre alternera entre? Lights On? et? Lumières éteintes? pendant que vous jouez avec la bascule. Plutôt cool!
Cela nous donne un joli thème sombre que l'utilisateur peut choisir d'activer.
Voir en direct
Tout notre travail acharné a porté ses fruits, pas le moment de regarder les fruits de notre travail. Assurez-vous de cliquer sur l'interrupteur situé à gauche pour voir l'effet. De plus, lancez la démo sur CodePen et montrez-nous comment vous pourriez l'améliorer encore!
Démo: Cliquez ici pour lancer.
Conclusion
Aujourd'hui, nous avons réussi beaucoup d'astuces sophistiquées avec très peu d'effort. Nous avons créé un événement de clic en détournant une case à cocher, en utilisant des pseudo-éléments changeants et en modifiant l’aspect général d’une page.
Comme toujours, merci d'avoir lu. J'espère que vous avez appris quelques choses en cours de route, je le fais toujours!