Accentsconagua
Share
Dans ce didacticiel, nous allons construire un calendrier de l’avent saisonnier en utilisant CSS Grid, SVG et une poignée de paroles de fête! Commençons par regarder ce sur quoi nous allons travailler - cliquez sur les jours pour voir ce qui se passe en dessous:
Vous n'avez pas besoin de beaucoup pour ce didacticiel, juste d'un éditeur de code (sur CodePen pour vous simplifier la tâche) et de connaissances de base en HTML et CSS. Vous volonté J'ai besoin d’illustrations festives: j’ai pris des illustrations du très talentueux masastarus d’Envato Elements (elles sont vectorielles et absolument parfaites pour cela):
Enfants heureux fêtant Noël
Groupe d'enfants et sapin de NoëlPour notre calendrier de l’avent, nous allons utiliser 25 éléments de la grille; un pour chacun des jours précédant Noël et un autre pour tenir un titre graphique. Cela ressemblera à ceci sur de petits écrans:
Et ceci sur des écrans plus grands:
L'élément de grille turquoise contiendra notre graphique de titre.
Pour démarrer, nous avons besoin de 25 éléments dans un conteneur, alors assemblons du code HTML:
Pointe: Étant donné la nature répétitive de ce balisage, vous préférerez peut-être utiliser un langage de modélisation comme HAML. HAML vous laissera passer en boucle sur 24 éléments pour vous éviter d'écrire chacun d'eux. Le petit extrait suivant compile exactement ce que vous voyez ci-dessus:
% section.grid-1% div.title - (1… 24) .each do | i | % div : class => "jour - # i"
Quand nous imbriquons encore plus d'éléments dans ces divs, vous apprécierez le temps que HAML vous fait gagner!
Ajoutons maintenant quelques styles de base pour établir notre grille. Nous commençons par assigner affichage: grille; à notre élément de conteneur. Puis, après quelques dimensions, nous définissons les éléments de la grille.
/ * Première disposition de grille mobile * / .grid-1 display: grid; largeur: 96%; largeur maximale: 900px; marge: 2% auto; Grille-modèle-colonnes: répéter (3, 1fr); grid-template-rows: auto; intervalle de grille: 25 px;
Nous sommes passés au «mobile d’abord», vous constaterez donc que nous ne définissons que trois colonnes pour commencer; nous allons utiliser une requête de média dans un moment pour permettre des écrans plus grands.
Grille-modèle-colonnes: répéter (3, 1fr); nous donne trois colonnes de largeur égale (1fr unité)grid-template-rows: auto; est en fait la valeur par défaut, mais il est indiqué que les lignes n’auront aucune hauteur spécifique qui leur soit attribuée. Nous pouvons en ajouter autant que nous le souhaitons et elles grandiront avec le contenu..intervalle de grille: 25 px; définit nos gouttières.C'est tout ce dont nous avons besoin, Grid peut gérer les choses d'ici si nous la laissons, mais nous voulons être plus précis quant à l'emplacement de chaque élément de la grille. Pour cette raison, nous utiliserons des zones de grille.
Nous pouvons attribuer un nom à chaque zone de la grille que nous avons définie et l'écrire de manière très visuelle:
grid-template-areas: "tt t" "d23 d20 d12" "d2 d14 d4" "d5 d22 d16" "d1 d7 d9" "d10 d11 d18" "d13 d3 d15" "d6 d17 d8" "d19 d24 d21";
Ici, nous nommons la première zone, qui s'étend sur trois colonnes sur la première ligne t (où nous allons placer le titre). Ce nom n’est peut-être pas le plus utile, mais il fera le travail pour le moment. Chacune des autres zones se voit attribuer un nom correspondant aux numéros du jour et, comme vous pouvez le constater, nous pouvons les placer où bon vous semble. La possibilité de disposer les choses «au hasard» comme celle-ci est parfaite pour un calendrier de l'Avent.
Avec l'ajout d'une requête média, nous pouvons (très facilement) changer la disposition pour des écrans plus grands.
/ * requête multimédia * / écran uniquement multimédia et (largeur minimale: 500 pixels) .grid-1 grid-template-columns: repeat (6, 1fr); grid-template-areas: "t2 t2 d7 d8" "t t t4 d11 d12" "t t19 d9 d13" "d6 d1 d24 d24 d21 d20" "d17 d18 d24 d24 d5 d22 d" d3 d23 d16 d14 d10 d15 ";
Avec cette requête média, nous déclarons que pour les fenêtres d'une largeur supérieure à 500px (valeur arbitraire), nous allons modifier la grille afin qu'elle comporte six colonnes: Grille-modèle-colonnes: répéter (6, 1fr);.
Et nous pouvons complètement redéfinir la disposition des éléments en plaçant les jours où bon vous semble. Vous remarquerez que le bloc de titre occupe maintenant trois colonnes et trois lignes en haut à gauche, et que d24 occupe une surface de 2 × 2, pour lui donner plus de signification. Cela deviendra clair lorsque nous assignerons nos éléments de grille aux zones de la grille à l'étape suivante..
Pour l'instant, nous ne voyons rien de ce que nous avons fait, ajoutons donc quelques styles provisoires aux éléments de la grille pour rendre les choses visibles..
section div background: # 2e313d; rembourrage: 40px;
Regarde:
Besoin d'un apprêt sur les zones de la grille? En savoir plus sur le tout dans le tutoriel de ce débutant:
Nous devons maintenant affecter nos éléments de grille aux zones que nous avons définies. Nous faisons cela comme suit:
/ * éléments individuels * / .title grid-area: t; .day-1 grid-area: d1; .day-2 grid-area: d2; .day-3 grid-area: d3; …
Vous pouvez voir notre div.title a été affecté à la zone de la grille t, et chaque jour a été assigné à une zone correspondante. Il n'y a rien à dire que vous ne pouvez pas attribuer .jour-3 à surface de la grille: d16; bien sûr, nous choisissons simplement d'organiser les choses de cette façon. À quoi ça ressemble?
C'est la structure de base tout triée, nous devons maintenant créer nos portes CSS. Nous allons placer deux divs dans chaque élément de la grille - un pour le devant de la porte, un autre pour le dos - tous les deux enveloppés dans un autre div, et nous allons utiliser une case à cocher pour inverser le tout quand cliqué.
Nous commençons par ajouter une étiquette, une case à cocher et les divs à chaque élément de la grille:
Encore une fois, vous devez procéder de la sorte pour les 24 éléments de la grille, ce qui représente un bloc volumineux de balises répétitives longues de 245 lignes. Vous trouverez peut-être HAML utile. Voici à quoi cela ressemblerait:
% div : class => "jour - # i"% label% entrée : type => "case à cocher" .door. Front # i .back
Avec un rembourrage légèrement ajusté, voici à quoi ressemblent toutes ces cases:
Prépare toi; ce qui s'en vient est sans doute le morceau le plus complexe de toute cette construction. C'est un gros morceau et très peu fonctionne sans que tout soit présent, alors supportez-moi. Nous allons faire quelques changements avec les transformations 3D.
Tout d'abord, nous masquons les cases à cocher, puis nous déclarons que nous souhaitons appliquer un certain niveau de perspective à nos étiquettes (perspective: 1000px; gère ça). transformer-style: preserve-3d; indique que les enfants de l'étiquette seront affichés dans un espace 3D au lieu d'un plan. Nous utilisons ensuite des styles Flexbox pour nous assurer que l’étiquette occupe toute la zone disponible..
Certains styles sur le .porte élément (qui contient les faces avant et arrière) puis définissez le moment de la transition et rangez les choses plus loin:
/ * styles de porte * / .grid-1 input display: none; label perspective: 1000px; transformer-style: preserve-3d; curseur: pointeur; affichage: flex; hauteur minimale: 100%; largeur: 100%; hauteur: 120px; .door width: 100%; transformer-style: preserve-3d; transition: tous les 300ms; bordure: 2px en pointillé transparent;
Bon, maintenant, concentrons-nous sur les faces avant et arrière de notre porte.
.porte div position: absolute; hauteur: 100%; largeur: 100%; visibilité face arrière: masquée; affichage: flex; align-items: centre; justifier-contenu: centre; .door .back background-color: # 2e313d; transformer: rotateY (180deg);
le .porte div sélecteur pointe à la fois la .de face et le .retour divs. Nous l’utilisons pour faire à chacun 100% la largeur et la hauteur du .porte conteneur, et absolument positionné en haut à gauche. Les règles de la Flexbox s’assurent que le contenu à l'intérieur (le nombre) est centralement aligné et que visibilité face arrière: masquée; Cette règle garantit qu’aucun des visages ne peut être vu lorsque leur verso nous fait face. C’est important, car nous nous concentrons ensuite sur la .retour et réglez-le pour retourner avec transformer: rotateY (180deg);.
Tout cela a entraîné un effet plutôt cool. Nous allons utiliser l'état coché de la case à cocher pour faire la transition des visages. Lorsque nous cliquons sur l'étiquette (qui remplit toute la surface de la grille), elle coche et décoche la case à cocher, même si elle n'est pas affichée. En fonction de cet état, nous modifions de quelle manière la .porte est confronté.
étiquette: survol .door border-color: # 385052; : vérifié + .door transform: rotateY (180deg);
La première règle nous donne un état de survol. La deuxième règle utilise un sélecteur adjacent, donc quand un .porte l'élément est immédiatement précédé d'un :vérifié élément, nous le faisons pivoter de 180 degrés sur l’axe Y (nous le retournons). Tout cela nous donne notre fonctionnalité de porte fondamentale!
Rendons les choses jolies. Le premier visuel que nous allons insérer est notre graphique de titre. En utilisant l’illustration de Noël illustrant les enfants heureux, j’ai pris le titre, modifié les détails et enregistré un fichier SVG..
Pointe: pour des vecteurs détaillés comme ceux-ci, dans Illustrator, accédez à Objet> Chemin> Simplifier… et vous pouvez réduire la complexité. En réduisant le nombre de courbes et de points, vous pouvez réduire considérablement la taille du fichier sans perdre trop d'effet global..
Il y a plusieurs façons d’ajouter cette image à la page, mais je viens de placer un img tag dans notre balisage:
Certains styles donnent à notre image une fluidité et l’alignent au centre de la grille:
.titre display: flex; align-items: centre; justifier-contenu: centre; .title img width: 90%; hauteur: auto;
Pour améliorer le fond vierge, nous ajoutons un autre fichier SVG (la neige et les nuages) au corps via CSS:
body background: url (snow-bg.svg) centre supérieur sans répétition # 82d8cb; taille du fond: couverture;
Chacune de nos 24 portes doit également avoir une image cachée derrière elles. Encore une fois, nous pourrions le faire de différentes manières, mais dans ce cas, nous allons sauvegarder un tas de fichiers SVG et les ajouter en tant qu'arrière-plans via le CSS. Pour chaque porte, après avoir défini sa zone de grille, nous aurons une règle pour le .retour visage:
.jour-6 surface de la grille: d6; .day-6 .back background: url (snowflake.svg);
Voici ce que cela nous donne:
Assez bon! Maintenant, nous avons juste besoin de ranger ces images avec quelques règles générales.
Tout d’abord, ces images d’arrière-plan doivent apparaître une seule fois, nous allons donc ajouter un non répété. Ils doivent également être centrés et correctement dimensionnés.
.door .back background-size: contenir; position de fond: centre centre; répétition de fond: non répétée; couleur de fond: # 2e313d; transformer: rotateY (180deg);
Certains rayon de la frontière ajouté à .porte et .porte div nous donne une esthétique plus conviviale. Et enfin, nous lions à la police Kalam sur Google pour peaufiner ce dernier détail typographique:
Modes:
/ * ajouté à .door div * / font-family: 'Kalam', cursif; couleur: # 385052; taille de police: 2em; poids de police: gras; ombre du texte: 1px 1px 0 rgba (255, 255, 255, 0.2);
Cela met fin aux choses! Bien sûr, cela concerne uniquement la valeur de nouveauté et la pratique de la grille CSS (le statut de chaque porte n'est pas enregistré pour la prochaine session du navigateur), mais nous avons parcouru un long chemin avec juste quelques balises et certains styles.
Le support est un dernier point à mentionner; Certains aspects de ce didacticiel ne bénéficient pas encore d'une prise en charge complète du navigateur. Pour obtenir des conseils sur la gestion de ce problème, reportez-vous aux ressources indiquées ci-dessous..
J'espère que vous apprécierez le tutoriel et que vous aurez plaisir à compter les jours!
