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

Premiers pas avec les formes CSS

Encapsuler du contenu autour des chemins d'accès personnalisés

Razvan Caliman

Pendant longtemps, les concepteurs Web ont été obligés de créer en respectant les contraintes du rectangle. La plupart des contenus sur le Web sont encore piégés dans de simples boîtes, car la plupart des aventures créatives dans des mises en page non rectangulaires finissent par être frustrées. Avec l'introduction des formes CSS, disponibles à partir de Chrome 37, cela va changer. Les formes CSS permettent aux concepteurs Web d'encapsuler du contenu autour de tracés personnalisés, tels que des cercles, des ellipses et des polygones, éliminant ainsi les contraintes du rectangle.

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

Voyons 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 pensant que le contenu encapsulait et remplissait les lacunes, pour être déçu par la forme enveloppante rectangulaire persistante autour de l'élément. Vous pouvez utiliser des formes CSS 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 (en pixels) qui sera utilisé 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 d'une opacité de 50% ou plus seront utilisés pour créer la forme.

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 doit s'encapsuler, sans le float, vous ne verrez pas les effets de cette forme.

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

À l'avenir, vous pourrez utiliser shape-outside sur les éléments qui ne sont pas flottants avec les exclusions CSS d'introduction.

Créer des formes manuellement

En plus d'extraire des formes à partir d'images, vous pouvez également les coder manuellement. Plusieurs valeurs fonctionnelles permettent de créer des formes: circle(), ellipse(), inset() et polygon(). Chaque fonction de forme accepte un ensemble de coordonnées et est associée à un boîtier de référence qui établit le système de coordonnées. Vous en saurez plus sur les boîtes de référence dans quelques instants.

La fonctionCircle()

Illustration de la valeur de la forme loop()

La notation complète pour une valeur de forme de cercle 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 encapsule la partie externe d'un tracé circulaire. L'argument unique 50% spécifie le rayon du cercle, qui, dans ce cas précis, équivaut à 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. Cet exemple illustre la manière dont les formes CSS peuvent être responsives.

Avant d'aller plus loin, gardez à l'esprit 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, il 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 est très pratique, car elle suit la même notation que les formes CSS, ce qui vous permet de réutiliser les valeurs.

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

Les illustrations de ce document utilisent le rognage 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 avec 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 circulaire obtenue 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 shape (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);
}

Cela permet de positionner le centre du cercle à l'origine du système de coordonnées. Quel est le système de coordonnées ? C'est ici que nous présentons les encadrés de référence.

Zones 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 doit s'encapsuler. La zone flottante s'étend jusqu'aux bords extérieurs de la zone définie par la propriété margin. Il s'agit de margin-box. Il s'agit de 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, 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 pixels vers le haut et 100 pixels à 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 le champ de référence margin-box.