Combiner CSS clip-path et Shapes

Comment sortir du modèle de boîte et ouvrir de nouvelles possibilités créatives pour nos mises en page ? Dudley Storey se penche sur clip-path et Shapes et combine les deux modules.

Par

Je me suis penché ces derniers jours sur la façon dont nos pages pourraient commencer à sortir du modèle de “boîtes à l’intérieur de boîtes” qui a servi à construire le web depuis des années — et je me suis dit qu’une façon d’y parvenir serait de fusionner deux possibilités créatives : CSS clip-path et le module CSS Shapes.

See the Pen emXVPa by Pierre Choffe (@pierrechoffe) on CodePen.

Le nouveau Clip

clip-path, hérité de SVG, est utilisé pour masquer du contenu sur les pages web. L’ancienne syntaxe de clip comportait plusieurs limitations importantes — les éléments découpés devaient être positionnés absolument, et ne pouvaient être découpés que dans des formes rectangulaires. Elle a été remplacée par la nouvelle spécification clip-path qui l’ouvre à toutes les formes (dont les cercles, les ellipses, les courbes libres) et n’impose aucune restriction quant à la taille, à la flexibilité ou à la position du contenu.

NdT : pour un tour complet des syntaxes de clip et clip-path, vous pouvez consulter l’excellent article de Chris Coyier Masquer et détourer en CSS.

image
Figure 1 : image masquée dans CSS clip-path Maker

Pour commencer à s’amuser avec clip-path, le plus simple est d’utiliser l’excellent outil “Clippy” de Bennett Feely. Sa seule limite est que vous ne pouvez pas uploader d’images, il vous faudra fournir une URL — et si vous voulez, vous pouvez vous servir de celle que j’utilise dans l’exemple ci-dessus.

Il existe un nombre infini de possibilités de découpage. Pour cette image, j’ai choisi “triangle” dans l’outil de Bennett et j’ai déplacé les points aux positions que montre la figure 1.

Le code apparaît en bas de la fenêtre de l’application. Remarquez qu’il fournit un préfixe constructeur webkit. Pour l’instant, clip-path n’est supporté que par les navigateurs webkit, et Safari requiert toujours des préfixes. Nous verrons tout à l’heure comment faire fonctionner l’effet de découpage dans Firefox et autres navigateurs.

NdT : comme toujours, vous pouvez consulter le détail des compatibilités de clip-path dans Can I Use, et l’article sur Autoprefixer pour l’automatisation des préfixes constructeurs.

Pour ajouter l’image à une page, nous pouvons appliquer une id, ainsi que du texte de remplissage :

//HTML
<img src="vapor-cone.jpg" alt id="penetrator">
<h1>The Need For Speed</h1>
<p>The urge to go faster than the speed of sound is probably as old as Kitty Hawk, as old as mankind’s first realization that there was a barrier to break.

Puis un peu de CSS :

//CSS
img#penetrator {
    width: 50%;
    float: left;
    -webkit-clip-path: polygon(24% 0, 24% 100%, 100% 54%);
    clip-path: polygon(24% 0, 24% 100%, 100% 54%);
}

Notez que les points du chemin de découpe (clip-path) sont spécifiés dans le sens inverse des aiguilles d’une montre à partir du sommet, et sont mesurés en pourcentages (il est également possible de le faire en pixels, mais l’utilisation des pourcentages permet un redimensionnement fluide).

image
Figure 2 : Image avec clip, mais sans shape-outside.

Contrairement à ce que nous attendions, clip-path ne modifie pas la relation d’un élément et du reste de la page. Le découpage n’affecte que l’image, et le texte de remplissage l’entoure comme si elle avait encore sa forme originale. Pour corriger ce comportement, nous devons utiliser un module CSS distinct.

CSS Shapes

Dans de précédents articles, j’ai montré comment utiliser CSS Shapes pour entourer de texte une forme circulaire ou une image courbe, et Sara Soueidan a écrit une excellente introduction sur le sujet (en français ici). Dans le cas présent, nous utilisons une forme polygonale et, avec une logique éclatante, la propriété shape-outside prend exactement les mêmes valeurs que clip-path pour mapper une surface polygonale :

//CSS
img#penetrator {
  width: 50%;
  float: left;
  -webkit-clip-path: polygon(24% 0, 24% 100%, 100% 54%);
  clip-path: polygon(24% 0, 24% 100%, 100% 54%);
  shape-outside: polygon(24% 0, 24% 100%, 100% 54%);
}

Le résultat fait correspondre le chemin de découpe et la forme d’entourage, mais le texte est collé à l’image. La forme elle-même semble un peu étrange, comme si elle flottait dans la page. Dans notre exemple, j’ai corrigé ce point en ajoutant une valeur négative de margin-left à l’image. Ainsi, le clip-path n’est plus aligné avec la forme qui l’enrobe, mais du coup ça fonctionne.

Fonctionnement avec les autres navigateurs

On peut créer un polyfill pour shape-outside, comme nous l’avons déjà vu dans un précédent article de Demosthenes.info. Mais on peut aussi se tourner vers le standard SVG duquel il est dérivé. Sur la même page, nous allons écrire un petit SVG en ligne :

//HTML
<svg id="svgpath">
  <defs>
    <clipPath id="delta" clipPathUnits="objectBoundingBox">
        <polygon points=".24,0 .24,1 1,.54" />
    </clipPath>
  </defs>
</svg>

Ce que nous voulons ici c’est rendre responsif le chemin de découpe SVG, et pour cela nous utilisons clipPathUnits="objectBoundingBox". Le SVG se considère lui-même comme une boîte de 1 × 1, donc le polygone de découpage prend les mêmes valeurs que clip-path, divisées par 100.

Cette méthode SVG est une solution de repli (fallback) pour clip-path, mais elle apparaît en premier dans la déclaration CSS de l’image :

//CSS
img#penetrator {
  width: 50%;
  margin-left: -12%;
  float: left;
  clip-path: url(#delta);
  -webkit-clip-path: polygon(24% 0, 24% 100%, 100% 54%);
  clip-path: polygon(24% 0, 24% 100%, 100% 54%);
  shape-outside: polygon(24% 0, 24% 100%, 100% 54%);
}

Notez bien que le clip-path basé sur une url se réfère à l’id de l’élément clipPath et non à l’id de la racine SVG. #svgpath est seulement utilisé pour dimensionner l’élément, et éviter qu’il ne prenne de la place sur la page :

//CSS
svg#svgpath { 
  width: 0; 
  height: 0;
}

Le résultat — une combinaison de deux modules CSS différents — est un texte “sorti de la boîte”, qui ouvre à de nouvelles possibilités créatives !


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

Articles sur les mêmes thèmes dans la Cascade :

CSS Shapes, une introduction, par Sara Soueidan
Masquer et détourer en CSS, par Chris Coyier


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.