Accueil

Traduction

Tutoriel CSS - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

CSS : découpes d'images voire de boites avec propriété clip-path & shape-outside

Rappels

Dans la page précédente vous avez vu que l'on peut arrondir les angles des boites avec la propriété border-radius.
Vous avez vu aussi que grâce aux différentes syntaxes de cette propriété la boite pouvait ressembler à un cercle, une ellipse ou une "patate".
Je vous ai montré que cette propriété peut aussi s'appliquer aux images.

Maintenant si vous voulez que la boite (ou l'image) apparaissent sous forme d'un triangle ou d'un trapèze voire une forme plus complexe il faut utiliser une autre technique : la propriété clip-path.

Propriété clip-path

La propriété clip-path permet de faire apparaître l'image ou la boite sous forme - non pas d'un rectangle - mais d'un triangle, d'un cercle, d'une ellipse, d'un trapèze, etc.
Il suffit de définir un chemin fermé (une forme) et de l'appliquer à l'image ou à la boite.
Toute la partie de l'image extérieure au chemin est alors masquée. C'est pour cette raison que l'on parle de "masque de forme".

Exemple

Ci-dessous 4 images puis 4 boites découpées grâce à "clip-path".

Images découpées
Boites avec masque de forme

Le code correspondant

Le CSS

Les images ou les DIV se positionnent côte à côte.

Pour dessiner une forme fermée il faut utiliser la commande polygon (pour rectangles, triangles, trapèzes, etc.) ou la commande circle ou encore ellipse.

Le code HTML

A chaque DIV on applique deux classes : la classe "boite" pour dessiner un rectangle vert de 40% par 400px et une des quatre classes qui applique un rognage au rectangle.

La propriété clip-path et les anciens navigateurs

Et si le navigateur ne reconnait pas la propriété clip-path ? C'est possible si l'internaute utilise un vieille version de IE.
Il suffit d'introduire un test dans la définition de la classe.

Dans le cadre de la classe "decoupe_cercle" le rognage sera effectué par défaut avec la propriété border-radius. A moins que la nouvelle propriété clip-path soit supportée par le navigateur. Dans ce cas il faut désactiver la propriété "border-radius" (border-radius : 0) et activer "clip-path".

La propriété shape-outside

Si une image est découpée, par exemple, en cercle il est préférable que le texte accolé contourne de façon circulaire l'image.
Sachez que c'est possible désormais avec la propriété shape-outside.

Exemple

Observez les trois paragraphes ci-dessous !
Admirez comme le texte s'écoule proprement autour de l'image découpée : le texte contourne l'image tel un demi-cercle ou une demi-ellipse, etc.

Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia, mundo cognita civitas, cui non certaverit alia advecticiis ita adfluere copiis et internis, et Laodicia et Apamia itidemque Seleucia iam inde a primis auspiciis florentissimae. Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus. Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta vastarat. erat autem quod cogitabat huius modi.

Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia, mundo cognita civitas, cui non certaverit alia advecticiis ita adfluere copiis et internis, et Laodicia et Apamia itidemque Seleucia iam inde a primis auspiciis florentissimae. Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus. Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta vastarat. erat autem quod cogitabat huius modi.

Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia, mundo cognita civitas, cui non certaverit alia advecticiis ita adfluere copiis et internis, et Laodicia et Apamia itidemque Seleucia iam inde a primis auspiciis florentissimae. Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus. Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta vastarat. erat autem quod cogitabat huius modi.

Le code correspondant

Le CSS

Pour chaque classe relative aux images notez l'emploi combiné des propriétés clip-path & shape-outside avec la même valeur. .
Il faut donc appliquer ces deux propriété à l'élément IMG !
L'image découpée flotte à gauche dans le conteneur SECTION.

Le code HTML

Chaque conteneur ARTICLE contient un élément IMG et un élément DIV.
A chaque image est associée une classe qui gère le flottement, le découpage de l'image et du texte accolé.
A chaque DIV est associé la classe "texte".
Ce code ne présente qu'une difficulté ; il ne faut pas oublier de mettre fin au flottement.
D'où la règle de style dans la balise H3: ... style ="clear:both" ...