Catégories
Astuces et Design

Sortir des sentiers battus avec CSS Grid

La prise en charge de CSS Grid dans les navigateurs modernes a ouvert des possibilités de mise en page comme jamais auparavant. Nous pouvons créer des conceptions plus complexes avec moins d'éléments qu'avec Flexbox seule. Mais quand vous pensez à CSS Grid, vous pensez généralement à une mise en page carrée, non?




Plusieurs grilles rectangulaires

Certaines des mises en page sur l’excellent Grid by Example de Rachel Andrew.

Andy Barefoot crée des mises en page magnifiques et réactives qui se sentent si différentes de votre conception Web typique, et il utilise CSS Grid pour le faire. Il pousse le média plus loin, et j'espère que les concepteurs et les développeurs seront inspirés pour concevoir et coder les sites que vous ne pensiez pas possibles.

Grille de livre responsive




Une grille de formes de diamants tenant des livres

Avant d’entrer dans les aspects techniques de ce stylo, je veux faire une pause et apprécier le design brillant de cette pièce. Les formes et les combinaisons de couleurs sont excellentes et il a choisi de magnifiques couvertures de livres qui ajoutent à la sensation de qualité.

Voici le stylo en action.

Nous allons décomposer ces techniques:

  • Comment il met en place la grille
  • Comment il assemble les diamants
  • Comment il fait les formes de diamant

Mise en place de la grille

Regardez d'abord le code HTML minimal avec lequel nous travaillons. Andy fait beaucoup avec très peu d'éléments DOM.

<ul>
  <li>
    <img src="/book01.jpg" alt="" />
  li>
  <li>
    <img src="/book02.jpg" alt="" />
  li>
  
ul>

Examinons les propriétés CSS qui définissent la grille, ainsi que l'une des sept requêtes multimédias qui la rendent réactive.


:root {
  --columns: 3;
}


ul {
  grid-template-columns: repeat(var(--columns), 1fr);
}


li {
  grid-column-end: span 2;
}


li:nth-child(2n) {
  grid-column-start: 2;
}


@media (min-width: 1200px) {
  :root {
    --columns: 9;
  }
  li:nth-child(6n-2) {
    grid-column-start: auto;
  }
  li:nth-child(8n-3) {
    grid-column-start: 2;
  }
}

La requête multimédia fait que le premier élément de toutes les lignes paires commence dans la deuxième colonne. Cela nous donne quelque chose comme ça.




grille contour propagation

Ici, les limites de la grille sont affichées en rouge et chaque colonne et ligne sont représentées par une ligne en pointillé. Ensuite, nous verrons comment il rassemble les diamants.

Assembler les formes ensemble

Nous voyons donc comment la grille est mise en place, mais comment les assemble-t-il parfaitement comme ça?




Une version modifiée de cette pièce montrant la grille superposée sur le dessus

Deux étapes:

  1. Décale une ligne sur deux pour qu'elle commence dans la deuxième colonne avec grid-column-start: 2.
  2. Ensemble margin-top: -50% sur tous les éléments de la liste pour les déplacer vers le haut de la moitié de leur hauteur.

Voici une démonstration pour le voir en action.

Vous pouvez voir comment Andy prend la grille de diamants et les déplace pour s'emboîter parfaitement. La ligne pointillée blanche décrit chaque élément de la grille, afin que vous puissiez voir comment ils se chevauchent.

Faire les formes

Maintenant que nous savons comment Andy arrange les formes, parlons de la façon dont il les crée. Il crée la forme derrière le livre avec le li:before pseudo élément, et la forme en V en bas avec le li:after élément. Survolez cette démo pour séparer les pièces.

Andy crée chaque forme avec un clip-path, ce qui signifie qu'il n'a pas à se soucier des transformations telles que la rotation. Ensuite, il fait cette super astuce où vous pouvez appliquer deux arrière-plans au même élément.

background-size: 50% 100%;
background-position: left, right;

La première valeur de background-size définit la largeur à la moitié de la forme. Puis en utilisant background-position: left, right; il crée deux arrière-plans, chacun épinglé sur un côté. L'ordre importe ici, car il correspond à l'ordre de la propriété background-image:

background-image: linear-gradient(45deg, var(--pink) 40%, var(--green) 40%),
  linear-gradient(-45deg, var(--pink) 40%, var(--green) 40%);

Andy a appris la technique en creusant dans le code de l’un des excellents morceaux de Single Div de Lynn Fisher. C’est aussi ce qui lui a inspiré le design.




Un motif répétitif de carrés colorés

Un motif créé par Lynn Fisher avec A Single Div.

Affichage de chaussures isométrique

Quelqu'un d'autre pourrait faire une blague sur un homme nommé Barefoot qui fabrique une galerie de chaussures, mais je suis beaucoup trop mature pour les jeux de mots.

Une fois de plus, Andy propose une manière brillante d'afficher des produits sur le Web.

Les cubes peuvent rendre difficile de dire comment il tire celui-ci, alors ajoutons des bordures aux éléments.




Le même affichage de chaussures mais avec quelques éléments soulignés

Ici, j'ai placé une bordure noire en pointillés autour de la grille, une ligne bleue autour de chaque élément de liste et une bordure rouge autour de l'image à l'intérieur de cet élément de liste. Vous pouvez voir Andy utiliser la technique où toutes les autres colonnes sont déplacées vers la droite, créant le même effet stupéfiant que nous avons vu avec les livres. Ici, il déplace également les images de chaussures vers le bas avec un positionnement absolu et une transformation CSS.

Ce qui vend vraiment cette pièce, c'est l'image de fond qu'il utilise pour créer les cubes.

Il se répète avec le nombre de colonnes grâce à cette ligne de CSS.

background-size: calc(200% / (var(--columns)));

--columns est défini avec des requêtes multimédias comme avec la grille de livres d'avant.

Voici Andy sur la création des formes avec de jolies touches:

J'ai créé l'image dans Affinity Designer en utilisant une grille triangulaire de 30 degrés. Les diamants ont un léger dégradé de couleur appliqué sur la diagonale courte afin que la couleur soit un peu plus sombre dans les «coins» pour faire ressortir un peu plus l'effet 3D.

Puis il l’a optimisé avec SVGOMG et en a fait un arrière-plan CSS avec le convertisseur de Mike Foskett. Deux excellentes ressources qui méritent une place dans votre dossier de signets.

Grille de portrait masqué

Le site Web personnel d’Andy est l’un de mes portefeuilles de développeurs préférés. Au lieu du mouvement typique d'empiler la conception de bureau pour mobile, le site a Trois différentes versions: ordinateur de bureau, tablette et mobile.




Site d'Andy dans les formats ordinateur, mobile et tablette

Les trois mises en page d'AndyBarefoot.com. Chacun est construit avec CSS Grid.

J'adore particulièrement le design de la version tablette, alors concentrons-nous sur la façon dont il a créé celle-ci.




Une grille révélant le visage et le nom d'Andy

Voici une description animée des étapes de cette superbe mise en page. Les lignes pointillées blanches sont les limites de chaque li dans la pièce. Ceci est juste une récréation approximative pour vous montrer les techniques générales. Parcourez le site d'Andy aux tailles de «tablette» pour la vraie affaire.

Les «étapes» de la ventilation ci-dessus:

  1. Teintez l'image avec filter: sepia(40%);
  2. Créez une grille au-dessus de l'image avec des éléments rouges
  3. Incliner la grille -11deg et changez-le
  4. Ajouter gap il y a donc de l'espace entre les éléments
  5. Commencez à placer des éléments transparents qui s'étendent sur plusieurs colonnes
  6. Placez les éléments qui contiennent le nom d'Andy et s'étendent sur plusieurs colonnes
  7. Ajouter un box-shadow à chaque élément pour remplir le gap

Andy utilise vw pour chaque unité pour s'assurer qu'elle est réactive, et ses yeux sont toujours parfaitement cadrés à travers ce trou dans la grille.

Encore une fois, nous devons parler du superbe design de cette pièce. Voici Andy sur l’inspiration du design.

Esthétiquement, j'ai commencé par essayer quelque chose comme les vieilles affiches de propagande soviétique avec les couleurs rouge et crème et le filtre sépia sur toutes les images. Avec mon visage derrière le masque frappant une pose héroïque comme un héros soviétique fraîchement travaillé dans les mines CSS. Ou quelque chose.

Ah oui, le vieux Hammer et CSSickle. C’est une grande inspiration et un excellent résultat final.

Emballer

Nous avons vérifié trois pièces géniales qui utilisent toutes CSS Grid de manière originale. En décalant la colonne de départ ou en biaisant toute la grille, vous pouvez obtenir des résultats assez fantastiques. Je suis ravi de voir les nouvelles façons dont les développeurs utilisent CSS Grid lors de sa mise en œuvre sur de plus en plus de sites de production.

Merci beaucoup à Andy Barefoot de m'avoir parlé et de m'avoir permis de me plonger dans son incroyable travail. Passez du temps à fouiller dans ses excellentes démos CodePen, consultez son site Web brillant et suivez-le sur Twitter.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *