Single-div — Trois anneaux et une div

Si vous êtes passés à côté, en 2014, Lynn Fisher a lancé un véritable mouvement avec les single DIV. On trouve rapidement quelques exemples impressionnants surtout pour les développeurs qui, comme moi, ont un jour rencontré des difficultés à aligner 2 div.

Malgré les cheveux arrachés, et les grincements de dents, nous savons tous que le CSS peut répondre à toute notre créativité. Toutefois, avant de découvrir les single div j’étais loin de m’imaginer que le CSS pouvait parfois s’assimiler à de l’art.

Il n’est ici pas question d’expliquer tous les concepts CSS utilisés, mais juste de les citer, le but est uniquement de sensibiliser et de faire découvrir ce mouvement mal connu mais tellement impressionnant (et je sais de quoi je parle!).

Les principaux ingrédients

Côté HTML, forcément : une seule DIV (comme son nom l’indique)

Côté CSS, on se rend vite compte, que quelques éléments reviennent souvent :

• pseudo-éléments,
• formes,
• gradient,
• shadow.

Et le dernier, mais pas des moindres : de l’imagination pour assembler tous ces éléments et réaliser ce que l’on souhaite !

Voyons cela de plus près

Pseudo-éléments

En CSS les pseudo-éléments sont utilisés pour styliser une partie bien définie d’un composant.

Généralement, ils vont être utilisés pour :

• appliquer un style particulier sur une puce, ou sur le premier caractère d’un texte, ajouter une ligne, un décor, …
• ou insérer du contenu avant ou après un élément.

Donc, grâce au pseudo élément (:before et :after), avec une seule div, nous allons pouvoir obtenir 3 éléments bien distincts :

Formes

En CSS, il est possible de créer une infinité de formes. Tout commence par un carré dont on va modifier la largeur ou la longueur pour avoir un rectangle, ou ajouter un border-radius pour dessiner un cercle, ou des border pour dessiner un triangle, et ainsi de suite, …

En combinant tout cela, il est possible de créer multitude de formes, comme :

Faisons une pause, avec un premier exemple

Avec ces deux premiers concepts, nous allons déjà pouvoir créer, par exemple : un octogone.

Notre octogone sera ici composé de 3 formes distinctes:

Décomposition de notre octogone

• La première, un carré simple :

• La seconde, un trapèze :

• Et la troisième, un trapèze, mais dans l’autre sens (on inverse la propriétéborder ):

Ainsi, nous obtenons notre octogone :

Gradient / Shadow

Les dégradés, et les ombres sont utilisés pour donner de la profondeur et du relief, ce qui rend les assemblages de formes beaucoup plus réaliste. Avec une bonne maîtrise des jeux de lumières, des formes de base, et une bonne combinaison d’images d’arrière-plan nous pouvons obtenir des ombrages plus complexes.

Voici un exemple d’ombrage sur un stylo qui donne l’impression que celui ci sort de l’écran :

Avant de dessiner des stylos en CSS, commençons par une forme plus simple, le rond :

Si on y ajoute : background-image: radial-gradient(circle at 25px 25px, white 5%, rgba(255,255,255,0) 40%) , on donne du relief :

Nos 3 anneaux

Le logo de Norsys est composés de 3 anneaux sur le principe des anneaux booroméens. Nous allons maintenant décliner ces formes en un exemple.

Dessinons d’abord nos 3 cercles “entrelacés” , à l’aide de radial-gradient (pour donner un peu de relief à notre logo) :

div

Ajoutons-y le libellé “Norsys”, avec le pseudo-élément after:

Et avec un peu d’animation, nous obtenons le résultat final :

Cet exemple met en pratique l’ensemble des concepts abordés dans l’article mais est loin de montrer l’éventail des possibilités offertes. Le plus difficile reste pour moi de réussir à visualiser ce que l’on cherche à représenter via les différentes formes CSS. Il faut découper et trouver les bonnes combinaisons.

Pour aller plus loin :

• Le hashtag twitter : #divtober
• Le site de Lynn Fisher sur les single div : https://a.singlediv.com/