Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Premiers pas avec les formes CSS

Habillage du contenu autour de tracés personnalisés

Razvan Caliman

Pendant longtemps, les concepteurs Web ont été contraints de créer dans les limites du rectangle. La plupart des contenus sur le Web sont encore piégés dans des cadres simples, car la plupart des tentatives de création de mises en page non rectangulaires se soldent par un échec. Cela va changer avec l'introduction des formes CSS, disponibles à partir de Chrome 37. Les formes CSS permettent aux concepteurs Web d'habiller du contenu autour de tracés personnalisés, tels que des cercles, des ellipses et des polygones, s'affranchissant ainsi des contraintes du rectangle.

Les formes peuvent être définies manuellement ou déduites à partir d'images.

Prenons un exemple très simple.

Peut-être avez-vous été aussi naïf que moi lorsque vous avez fait flotter une image avec des parties transparentes pour la première fois, en vous attendant à ce que le contenu s'ajuste et comble les espaces, pour finalement être déçu par la forme rectangulaire de l'habillage qui persiste autour de l'élément. Les formes CSS peuvent être utilisées pour résoudre ce problème.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

La déclaration CSS shape-outside: url(image.png) indique au navigateur d'extraire une forme de l'image.

La propriété shape-image-threshold définit le niveau d'opacité minimal des pixels qui seront utilisés pour créer la forme. Sa valeur doit être comprise entre 0.0 (totalement transparent) et 1.0 (totalement opaque). Ainsi, shape-image-threshold: 0.5 signifie que seuls les pixels dont l'opacité est supérieure ou égale à 50 % seront utilisés pour créer la forme.

La propriété float est essentielle ici. La propriété shape-outside définit la forme de la zone autour de laquelle le contenu s'enroule, mais sans la propriété float, vous ne verrez pas les effets de la forme.

Les éléments ont une zone flottante du côté opposé à leur valeur float. Par exemple, si un élément avec une image de tasse de café est flottant à gauche, la zone flottante sera créée à droite de la tasse. Même si vous pouvez concevoir une image avec des espaces des deux côtés, le contenu ne s'enroulera autour de la forme que du côté opposé désigné par la propriété float, à gauche ou à droite, jamais les deux.

À l'avenir, il sera possible d'utiliser shape-outside sur des éléments qui ne sont pas flottants grâce à l'introduction des exclusions CSS.

Créer des formes manuellement

En plus d'extraire des formes à partir d'images, vous pouvez également les coder manuellement. Vous pouvez choisir parmi quelques valeurs fonctionnelles pour créer des formes : circle(), ellipse(), inset() et polygon(). Chaque fonction de forme accepte un ensemble de coordonnées et est associée à une boîte de référence qui établit le système de coordonnées. Nous reviendrons sur les zones de référence dans un instant.

La fonction circle()

Illustration de la valeur de forme circle()

La notation complète d'une valeur de forme circulaire est circle(r at cx cy), où r est le rayon du cercle, tandis que cx et cy sont les coordonnées du centre du cercle sur l'axe X et l'axe Y. Les coordonnées du centre du cercle sont facultatives. Si vous les omettez, le centre de l'élément (l'intersection de ses diagonales) sera utilisé par défaut.

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

Dans l'exemple ci-dessus, le contenu s'enroule autour d'un tracé circulaire. L'argument unique 50% spécifie le rayon du cercle, qui, dans ce cas précis, correspond à la moitié de la largeur ou de la hauteur de l'élément. La modification des dimensions de l'élément aura une incidence sur le rayon de la forme circulaire. Voici un exemple simple de la façon dont les formes CSS peuvent être responsives.

Avant d'aller plus loin, une petite précision : il est important de se rappeler que les formes CSS n'influencent que la forme de la zone flottante autour d'un élément. Si l'élément a un arrière-plan, celui-ci ne sera pas découpé par la forme. Pour obtenir cet effet, vous devez utiliser les propriétés de CSS Masking, soit clip-path, soit mask-image. La propriété clip-path est très pratique, car elle suit la même notation que les formes CSS, ce qui vous permet de réutiliser des valeurs.

Illustration de la forme "circle()" + clip-path

Les illustrations de ce document utilisent le détourage pour mettre en évidence la forme et vous aider à comprendre les effets.

Revenons à la forme circulaire.

Lorsque vous utilisez des pourcentages pour le rayon du cercle, la valeur est en fait calculée à l'aide d'une formule légèrement plus complexe : sqrt(width^2 + height^2) / sqrt(2). Il est utile de comprendre cela, car cela vous aidera à imaginer la forme du cercle obtenu si les dimensions de l'élément ne sont pas égales.

Tous les types d'unités CSS peuvent être utilisés dans les coordonnées de la fonction de forme : px, em, rem, vw, vh, etc. Vous pouvez choisir celui qui est suffisamment flexible ou rigide pour vos besoins.

Vous pouvez ajuster la position du cercle en définissant des valeurs explicites pour les coordonnées de son centre.

.element{
  shape-outside: circle(50% at 0 0);
}

Le centre du cercle est ainsi positionné à l'origine du système de coordonnées. Qu'est-ce que le système de coordonnées ? C'est là que nous introduisons les cadres de référence.

Boîtes de référence pour les formes CSS

La boîte de référence est une boîte virtuelle autour de l'élément, qui établit le système de coordonnées utilisé pour dessiner et positionner la forme. L'origine du système de coordonnées se trouve dans l'angle supérieur gauche, l'axe X pointant vers la droite et l'axe Y vers le bas.

Système de coordonnées pour les formes CSS

N'oubliez pas que shape-outside modifie la forme de la zone flottante autour de laquelle le contenu s'enroule. La zone flottante s'étend jusqu'aux bords extérieurs de la zone définie par la propriété margin. Il s'agit de la margin-box, qui est la boîte de référence par défaut d'une forme si aucune n'est explicitement mentionnée.

Les deux déclarations CSS suivantes donnent des résultats identiques :

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

Nous n'avons pas encore défini de marge sur l'élément. À ce stade, on peut supposer que l'origine du système de coordonnées et le centre du cercle se trouvent dans l'angle supérieur gauche de la zone de contenu de l'élément. Cela change lorsque vous définissez une marge :

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

L'origine du système de coordonnées se trouve désormais en dehors de la zone de contenu de l'élément (100 px vers le haut et 100 px vers la gauche), tout comme le centre du cercle. La valeur calculée du rayon du cercle augmente également pour tenir compte de la surface accrue du système de coordonnées établi par la zone de référence margin-box.