Clip-path CSS

Le clip-path est une propriété CSS au moyen de laquelle une section d’élément CSS peut être définie. Les clip-paths permettent d’afficher des éléments dans de nombreuses formes géométriques différentes sans que le fichier graphique ne soit préalablement modifié. Les formes de base sont des graphiques vectoriels évolutifs (SVG).

Contexte

À l’origine, seuls des éléments rectangulaires pouvaient être créés avec le CSS. Cela voulait dire que les éléments CSS étaient toujours générés par des navigateurs de formes géométriques similaires. Avec la propriété “border-radius”, les éléments à coins arrondis pouvaient être affichés sur des sites web, mais il n’était pas encore possible de mettre en place des formes personnalisés. De nos jours, les éléments peuvent être façonnés pratiquement sous n’importe quelle forme avec le clip-path de la propriété CSS3 : on peut utiliser des chemins de détourage complexes, qui peuvent également être définis par des graphiques SVG.

Options

Le clip-path CSS permet de créer quatre formes de base : rectangulaire, elliptique, circulaire ou polygonale.

Deux exemples :

Rectangle mesurant 10 x 50 pixels, les coins étant arrondis à 5 pixels (rayon vertical et horizontal).

img {  
clip-path: rectangle (10px, 10px, 50px, 50px, 5px, 5px);
}

Cercle composé du centre (100px pour les axes X et Y) et du rayon (troisième valeur).

img {
  clip-path: circle (100px, 100px, 50px);
}

En conjonction avec les masques, les formes créées peuvent en outre être masquées avec le clip-path CSS. Il en résultera des options d’affichage individuelles complètes. Pour ce faire, les coordonnées sont enregistrées dans une image SVG, qui est ensuite intégrée dans un document HTML avec son propre identifiant. L’élément clip-path correspondant forme alors le cadre.

<svg>
  <defs>
    <clipPath id="form">
      <circle cx="100" cy="100" r="50" />
    </clipPath>
  </defs>
</svg>

puis transmis ici comme ID :

img {
  clip-path: url(#form);
}

La transparence des couleurs peut également être définie avec un masquage. Un exemple pour une forme personnalisée et des codes correspondants peut être trouvé ici.

Avantages pour le référencement

En utilisant le clip-path CSS, il est possible de définir des formes individuelles pour les graphiques sans avoir à les personnaliser. L’avantage est que le graphique de base peut être facilement indexé en tant que tel. Des possibilités variées dans le webdesign garantissent également qu’un site web se distingue et que son apparence devienne un point de vente unique. Le grand avantage des clip-paths est que la technique peut être parfaitement utilisée pour le design responsive dans le cadre de l’optimisation mobile, car les unités peuvent par exemple être spécifiées en pourcentage. Dans le même temps, il est plus facile de faire de même en utilisant les formes de base. À ce jour, le clip-path CSS est conjointement pris en charge avec un masque SVG par Mozilla Firefox. Chrome ne reconnaît que les formes géométriques de base, tandis que les utilisateurs d’Internet Explorer ne peuvent apercevoir aucune des deux variations.

Lien web

• SVG, style et animation avec CSS, la-cascade.io, 14.11.2014