Brood X : le principe des cigales en CSS

Un texte étrange et poétique dans lequel Dudley Storey l'enchanteur nous entraîne dans l'univers fantastique de Magicicada Septemdecim. Ou comment les nombres premiers peuvent stimuler notre imaginaire et notre créativité.

Par

NdT : Je suis tombé par hasard sur cet article étrange où se mêlent technique et poésie de l’énergie vitale en lisant le livre de Lea Verou CSS Secrets, qui y fait référence.

Quelque part au Nord de l’Amérique, des insectes sont enfouis au plus profond de la terre, attendant le jour où ils émergeront dans un immense bourdonnement pour tout dévorer sur leur chemin. Des nuées de millions d’insectes affamés obscurciront le ciel dans un vacarme assourdissant de cymbale pour mourir un mois plus tard, laissant la terre à leurs descendants qui reviendront au terme d’un nouveau cycle.

Ce n’est pas là l’intrigue du prochain film Pitch Black ou du jeu Gears of War, mais la réalité : Magicicada est une espèce de cigale qui apparaît à l’occasion de cycles de 13 ans et 17 ans à travers les États-Unis et le Canada. 2013 a vu la dernière apparition du phénomène et Bob Dylan évoque cet événement magique, vécu en 1970, dans sa chanson Day of the Locusts.

Pour nous, la question intéressante est de savoir pourquoi ces valeurs répétées de 13 et 17, et à quel titre ces valeurs nous intéressent-elles pour les pages web ?

La couvée première

Vous avez sans doute reconnu 13 et 17 comme des nombres premiers, autrement dit des nombres qui ne peuvent être divisés que par eux-mêmes et par 1. D’autres nombres premiers seraient 2, 3, 5, 7 et 11.

Un aspect intéressant des nombres premiers est que lorsqu’ils sont répétés, la probabilité qu’un cycle coïncide avec un autre est faible. Prenons par exemple 3 et 7 :

123456789101112131415
123456789101112131415

Les populations nord-américaines de cigales ont évolué aux alentours de la dernière période glaciaire pour surgir en séquences de nombres premiers, afin d’éviter la compétition entre elles et pour assurer leur survie.

Appliquer les nombres premiers aux backgrounds

Comment appliquer ces considérations au développement web ? En considérant les problèmes de design auxquels nous sommes confrontés aujourd’hui : le tuilage de backgrounds par exemple. Quelle que soit la taille de votre image de background, les bords où les “tuiles” se rejoignent apparaissent comme une jointure sur n’importe quel moniteur suffisamment grand (et ils deviennent toujours plus grands). L’alternative est soit de prendre une image unique plein écran, soit de manipuler soigneusement une image sur Photoshop pour fondre les jointures.

Si nous comprenons les nombres premiers — et le fait que CSS nous permet de créer des dégradés utilisables comme images de backgrounds multiples — nous pouvons réaliser facilement un background infini sans tuilage. (Techniquement, la seule chose qui compte est que la largeur de chaque tuile soit un nombre premier par rapport à tous les autres. Je continuerai à utiliser les nombres premiers traditionnels pour cet exemple).

Admettons que la première “tuile” fasse 17px de large. Le dégradé ira de gauche à droite, commençant comme une couleur solide jusqu’à la moitié de sa surface, puis devenant complètement transparente. Pour leur côté hyper pratique, j’utiliserai des couleurs HSLA :

//CSS
div.prime {
  background: rgb(231,144,15);
  background-image: linear-gradient(90deg, hsla(255,100%,100%,.07) 50%, transparent 50%);
  background-size: 17px;
}

Appliqué à une <div> vide ayant une classe prime et une hauteur définie, le dégradé se répète ainsi :

C’est joli mais pas très significatif. Réalisons une autre tuile à l’identique, mais cette fois-ci large de 37px (un autre nombre premier) :

//CSS
div.prime {
  background: rgb(231,144,15);
  background-image: linear-gradient(90deg, hsla(255,100%,100%,.17) 50%, transparent 50%);
  background-size: 37px;
}

Le background devient maintenant :

Là encore, c’est joli, mais rien de spécial. Maintenant nous allons commencer à rendre les choses intéressantes en appliquant les deux dégradés au même élément en même temps :

//CSS
background: rgb(231,144,15);
  background-image: linear-gradient(90deg, hsla(255,100%,100%,.07) 50%, transparent 50%),
    linear-gradient(90deg, hsla(255,100%,100%,.17) 50%, transparent 50%);
  background-size: 17px, 37px;

}

Le résultat :

Ah, là ça devient intéressant. Comme les dégradés sont partiellement transparents, ils s’entrelacent mais d’une manière imprévisible. Cela dit, il y a encore un peu de tuilage, nous allons résoudre cela en créant un troisième dégradé :

//CSS
div.prime {
  background: rgb(231,144,15);
  background-image: linear-gradient(90deg, hsla(255,100%,100%,.07) 50%, transparent 50%),
    linear-gradient(90deg, hsla(255,100%,100%,.17) 50%, transparent 50%),
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.21) 50%);
  background-size: 17px, 37px, 53px;
}

...ce qui nous donne :

Comme vous pouvez le voir, les nombres premiers, les dégradés et les backgrounds multiples nous permettent de créer des designs infinis intéressants et variés, de manière simple et sans tuilage. On pourrait rendre le procédé encore plus simple, ce que je montrerai dans un prochain article, en utilisant Sass pour auto-générer des backgrounds basés sur les nombres premiers.

Note : rien de tout ceci n’aurait été possible sans la perspicacité d’Alex Walker, il y a trois ans. C’est son article (et la disparition malheureuse du travail associé) qui ont motivé cet article.
Eric Meyer est le premier à ma connaissance à avoir utilisé les dégradés CSS pour générer des backgrounds basés sur les nombres premiers. Son travail a ensuite été développé par Randy Merrill (à qui j’ai emprunté le pattern ci-dessus) et Michael Arestad.

Gardez votre calme, ce ne sont que des cigales de 17 ans

Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Autres articles sur les dégradés dans La Cascade.


Du même auteur dans La Cascade :

5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, Demosthenes.info.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.