Cette page a été traduite par l'API Cloud Translation.

Premiers pas avec les formes CSS

Encapsuler du contenu autour de chemins personnalisés

Razvan Caliman

Pendant longtemps, les concepteurs Web ont été contraints de créer en respectant les contraintes du rectangle. La plupart des contenus sur le Web sont toujours enfermés dans des cases simples, car la plupart des tentatives créatives de mise en page non rectangulaire se terminent par de la frustration. Cela va changer avec l'introduction des formes CSS, disponibles à partir de Chrome 37. Les formes CSS permettent aux concepteurs Web d'encapsuler le contenu autour de chemins personnalisés, tels que des cercles, des ellipses et des polygones, et ainsi de s'affranchir des contraintes du rectangle.

Les formes peuvent être définies manuellement ou inférées à partir d'images.

Prenons un exemple très simple.

Peut-être avez-vous été aussi naïf que moi lorsque vous avez fait flotter pour la première fois une image avec des parties transparentes en attendant que le contenu enveloppe et remplisse les espaces vides, pour être déçu par la forme enveloppée rectangulaire 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.

Dans ce cas, la propriété float est essentielle. Bien que la propriété shape-outside définisse la forme de la zone autour de laquelle le contenu sera mis en forme, sans le flottant, vous ne verrez pas les effets de la forme.

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

À l'avenir, vous pourrez utiliser shape-outside sur des éléments qui ne sont pas flottants avec 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. Plusieurs valeurs fonctionnelles sont disponibles pour créer des formes: circle(), ellipse(), inset() et polygon(). Chaque fonction de forme accepte un ensemble de coordonnées et est associée à un cadre de référence qui établit le système de coordonnées. Nous reviendrons sur les encadrés de référence dans un instant.

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 correspond au 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 entoure l'extérieur 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 influence le rayon de la forme du cercle. Il s'agit d'un exemple de base de la façon dont les formes CSS peuvent être responsives.

Avant d'aller plus loin, notez que les formes CSS n'affectent que la forme de la zone de flottaison autour d'un élément. Si l'élément comporte un arrière-plan, celui-ci ne sera pas rogné par la forme. Pour obtenir cet effet, vous devez utiliser les propriétés du masquage CSS : clip-path ou mask-image. La propriété clip-path s'avère très pratique, car elle suit la même notation que les formes CSS. Vous pouvez donc réutiliser les valeurs.

Illustration de la forme "circle()" et de la propriété clip-path

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

Retour à 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 qui en résultera 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 celle qui est suffisamment flexible ou rigide pour répondre à 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 placé à l'origine du système de coordonnées. Quel est le système de coordonnées ? C'est là que nous introduisons les encadrés de référence.

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

Le cadre de référence est un cadre virtuel 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 son coin supérieur gauche, l'axe X pointant vers la droite et l'axe Y pointant 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 sera encapsulé. La zone de flottaison 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 zone 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 pour l'élément. À ce stade, nous pouvons supposer que l'origine du système de coordonnées et le centre du cercle se trouvent dans le coin supérieur gauche de la zone de contenu de l'élément. Ce comportement 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 l'augmentation de la surface du système de coordonnées établi par la zone de référence margin-box.