Cuisine et Web

Recettes pour cuisiniers ou Web Dev en herbes

Une grille d'hexagones qui s'imbriquent.

Rédigé par G.Cyrille 2 commentaires
Classé dans : Tutoriels, WebDev Mots clés : flex, float, shape-outside, SVG

le modéle de boite en flex donne une hauteur de référence aux enfants sans qu'il soit nécessaire de la déclaré dans la feuille de styles pour s'en servir. et c'est plutôt une bonne chose si l'on est dans un cas où cette hauteur varie selon le contenu ou la largeur de l'écran.

Habituellement incompatible avec les régles d'héritage, un enfant (ici un pseudo pour notre exemple) , enfant d'une boite en flex peut donc recevoir un height:100%; pour s'afficher sur toute la hauteur de son parent lui même enfant d'une boite flex.

En faisant flotter cet élement (un pseudo en height:100%) , shape-outside peut-être utiliser.

Voici ce que nous allons faire:

La structure HTML est construite sur un conteneur en flex avec un unique enfant où nous plaçons un pseudo flottant. et du contenu en ligne, nos boite en forme d'héxagone sont découpées avec clip-path et shape-outside appliqué au pseudo flottant se chargera du décallage des lignes impaires.

[data-flex] {
  display:flex;
}
[data-flex] .container:before {
  content:'';
  float:left;
  height:100%;
  width:50px;
  shape-outside: url(/*svg en data uri */);
  
}
.hex {
  background-color : #343434; 
  width     : 50px;
  height    : 57.5px;
  clip-path : polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
  margin :-6px 0px -7px;
  display:inline-block;
  vertical-align:top;
}

L'inventaire de nos besoins

  • 1 boite en flex - HTML
  • 1 boite enfant dans celle-ci - HTML
  • 1 pseudo flottant sur toute la hauteur - CSS
  • la propriété shape-outside - CSS
  • Une forme à appliquer - img/SVG
  • un generateur de data-URI pour y placer notre forme en SVG
  • des enfants en ligne pour glisser autour de cette forme - HTML
  • La propriéte clip-path pour donner une forme hexagonale à ces enfants - CSS

Notre structure de base théorique.

<div data-flex>
  <div class="container">
   <div class="hex"></div>
   <div class="hex"></div>
   <!-- etc. -->
  </div>
</div>

Mise en forme des héxagone

On applique une taille de façon à contenir un héxagone, puis un fond de couleur. Pour le moment nous avons un rectangle.

Pour nous aider à créer notre forme, voici un outil en ligne clippy choissisez l'hexagone et recopier la propriété clip-path et sa valeur qui se trouvent sous l'image. Facile!

Premier réglages

Ajouter autant d'enfants nécessaire à créer 2 lignes d'héxagones.

En fonction de la taille choisie, décallez le premier héxagone de la moitié de sa largeur: .hex:first-child(margin-left: XXpx;.pour créer un décalage d'une ligne à l'autre.

Les deux lignes ne simbriquent pas, une marge vertical négative va permettre de superposer ces lignes et grace au décalage des héxagones, remplir les blancs sans qu'ils se chevauchent.

A ce stade, si il n'y a jamais plus de deux lignes, ce premier réglage est suffisant et on peut passer à autre chose.

répetition du décalage.

Une marge sur le premier élement et un pseudo flottant retaillé shape-outside à hauteur de la 3eme ligne peuvent fonctionné pour un maximum de 4 lignes.

See the Pen tut hexagone by gc-nomade (@gc-nomade) on CodePen.

L'outil clippy vous permet de créer cette forme et de la visualiser en appliquant un fond de couleur.

.conteneur:before {content:'';
  float:left;
  height:100%;
  width:50px;
  background:tomato;
  clip-path:polygon(
    0% 0%, 
    0% 100px, 
    27px 100px, 
    27px 125px, 
    0 125px, 
    0 100%);

La valeur de clip-path peut maintenant être appliquée à shape-outside et ainsi créer un décalage au niveau voulu, exactement là ou la couleur de fond est visible (le petit rectangle couleur tomate).

Répetition sur plus de quatre lignes.

Il est tout à fait possible de continuer à ajouter des points de coordonées a shape-outside:polygon() et crèer de nouvelles zones à intervalles réguliers.

Il sera cependant plus simple de se servir d'une image répetitive. C'est là qu'entre en jeux notre SVG. En utilisant un SVG vide d'une largeur au moins égale au décallage, il est possible de lui appliquer un fond qui se repete, voici le SVG utilisé sur la premiere démonstration, la repetition est effectué par un gradient appliqué comme image de fond: svg utilisé

<svg width="50"  style="background:radial-gradient(circle at  24% 25%, black 20%, transparent 20%) 0 0 / 50px 89px;" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"></svg>

Le svg transposé en data-uri sera utilisable dans la feuille de style comme image de reference pour shape-outside,
outils en ligne pour créer ce type d'url dopiaza.org - tool datauri et pour vous aider a choisir le bon mime type: MDN MIME Types., ce qui donne, ci-dessous, ce type d'url à inserer dans url():

shape-outside: url(data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2250%22%20%20style%3D%22background%3Aradial-gradient%28circle%20at%20%2024%25%2025%25%2C%20black%2020%25%2C%20transparent%2020%25%29%200%200%20%2F%2050px%2089px%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E);

demo en ligne modifiable à votre guise, passez la souris au dessus pour visualiser le gradient qui se repete sur l'element flottant

See the Pen demo hex grid by gc-nomade (@gc-nomade) on CodePen.

Laisser un message.

Quelle est le quatrième caractère du mot xh1eq4 ?

2 commentaires

#1  - Huygo a dit :

Whow! Comment on fait pour le data-uri ?

Répondre
#2  - G.Cyrille a dit :

bonjour, voici un outil en ligne , parmis d'autres, pour générer ce type d'url dopiaza.org - tool datauri . Pour choisir le bon mime type, voici un autre lien utile MDN MIME Types . (je vais ajouter tout ça dans l'article).
Merci de ton retour.

Répondre