Traduction

Tutoriel CSS - sommaire

Tutoriel mis à jour au 20 octobre 2023

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

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

Propriétés clip-path & shape-outside & mask

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 empêche une portion d'un élément d'être affichée en définissant une région de rognage.
Seule la zone spécifique de l'élément à l'intérieur de la région sera affichée, le reste sera masqué.

Si vous voulez masquer une zone interne de l'image il faut utiliser la propriété mask-image ; voir fin du chapitre.

Exemple

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

Images découpées

Boites découpées

Le code correspondant

Le CSS

img {display : inline-block ; width :40% ; margin : 1% ;}  
.boite{ display : inline-block ; width : 40%; height : 400px ; margin : 1% ; background : lime;}
                                           
.decoupe_triangle{clip-path : polygon(0 100%, 50% 0, 100% 100%);}
.decoupe_cercle{clip-path : circle(40% at center center); }
.decoupe_ellipse{clip-path : ellipse(50% 40% at 50% 50%) ; }
.decoupe_trapeze{clip-path : polygon(0 100%, 10% 0, 90% 0, 100% 100%) ; }

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.

polygon : les coordonnées X et Y de chaque points du polygone ; chaque paire séparée par une virgule
circle : la valeur du rayon suivie des coordonnées X, Y du centre du rayon ; mot at entre rayon et coordonnées du centre
ellipse : valeurs des rayons horizontal et vertical suivies des coordonnées du centre de l'ellipse

Le code HTML

...
<img src ="../images/brune_nue.jpg"  class ="decoupe_ellipse" />
<img src ="../images/bikini2.jpg"  class ="decoupe_trapeze" />
<img src ="../images/bikini8.jpg"  class ="decoupe_triangle" />
<img src ="../images/bikini6.jpg" class ="decoupe_cercle" />
...
<div  class =" boite decoupe_triangle"> </div>
<div  class ="boite decoupe_cercle"> </div>
<div  class ="boite decoupe_ellipse"> </div
<div  class ="boite decoupe_trapeze"></div>
...

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

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

Et si le navigateur ne reconnait pas la propriété clip-path ?
Il suffit d'introduire un style conditionnel sous forme de deux règles de style. .decoupe_cercle{border-radius : 50% ;} @supports (clip-path) {.decoupe_cercle {border-radius : 0; clip-path : circle(40% at 50% 50%); }}

Il faut d'abord définir une classe (ici "decoupe") avec une propriété connue de tous les navigateurs : border-radius
Puis la deuxième règle introduite par "@support(clip-path)" pose un test ; si le test est VRAI (donc si clip-path implémentée) alors on désactive "border-radius" et on active "clip-path".

Clip-path & ombrage

Une boite ou image découpée ne peut être ombrée quelque soit la méthode (box-shadow : ... OU filter : drop-shadow(...)).

Le code

<div class ="boite" style ="box-shadow : 10px 10px 10px black;"></div>
<div class ="boite decoupe_cercle" style ="box-shadow : 10px 10px 10px black;"></div>
<img src ="../images/brune_nue.jpg" class ="decoupe_cercle" style ="box-shadow : 10px 10px 10px black;">
<img src ="../images/brune_nue.jpg" class ="decoupe_ellipse" style ="filter: drop-shadow(10px 10px 10px black)">

Le rendu

Dès que vous appliquez une découpe à l'élément, l'ombre portée ne s'applique pas

Dessiner des formes complexes avec clip-path

La propriété clip-path combinée avec la fonction polygon() permet de dessiner des losanges, des hexagones, des octogones, des pentagones, des étoiles, etc.
Lorsque les coordonnées X & Y sont exprimées en % dans la commande polygon(), ce modèle de rognage peut s'appliquer à n'importe boite indépendamment de sa taille.
Il existe aussi la fonction path() argumentée avec un chemin exprimé en absolu ou relatif selon la syntaxe SVG.
Définir les chemins en SVG

Exemple

Le code correspondant

...
<style> 
.carre1 {width : 150px ; height : 150px ; background : lavender; margin : 10px auto; }
.carre2 {width : 300px ; height : 300px ; background : turquoise; margin : 10px auto; }
.losange {clip-path : polygon(50% 0, 100% 50%, 50% 100%, 0 50%);}
.hexagone {clip-path : polygon(50% 0,100% 25%, 100% 75%,50% 100%,0 75%, 0 25% );}
.chemin {clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');}
...
<h3>Je dessine un  grand losange</h3>
<div class ="carre2 losange" ></div>
<h3>Je dessine un  petit losange</h3>
<div class ="carre1 losange" ></div>
<h3>Je dessine un grand hexagone</h3>
<div class ="carre2 hexagone" ></div>
<h3>Je dessine un petit hexagone</h3>
<div class ="carre1 hexagone" ></div>
<h3>Je dessine une petite borne</h3>
<div  class ="carre1 chemin" /></div>
...

Dans la classe "chemin" le "path" exprimé en absolu correspond à des segments et un arc de cercle.
Seriez vous capable de définir un modèle de détourage correspondant à un pentagone, un octogone, une étoile à six branches (fonction polygon) à un trou de serrure (fonction 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é s'écoule de façon circulaire autour de l'image. C'est possible désormais grace à 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.

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

	article {width : 80% ; margin : 10px auto ; border : 1px solid red; }
	.image1 {float : left ; width : 20%; clip-path : circle(50% at center center) ; margin : 10px; 
		shape-outside : circle(50% at center center); }
	.image2 {float : left ; width : 20%; clip-path : ellipse(40% 50% at 50% 50%) ; margin : 10px; 
			shape-outside : ellipse(40% 50% at 50% 50%); }
	.image3 {float : left ; width : 20%; clip-path : polygon(0 100%, 10% 0, 90% 0, 100% 100%) ; margin : 10px; 
			shape-outside : polygon(0 100%, 10% 0, 90% 0, 100% 100%); }
	.texte p {font-size : 18px; text-align : justifiy; padding: 5px; }

Pour chaque classe relative aux images notez l'emploi combiné des propriétés clip-path & shape-outside avec les mêmes valeurs
Attention, il faut donc appliquer ces deux propriété à l'élément IMG !

Le code HTML

...
<article>
	<img src ="../images/bikini6.jpg" class ="image1">
	<div class ="texte">
		<p>Dein Syria per speciosam interpatet diffusa planitiem ...	
	</div>
</article>
<article>
	<img src ="../images/bikini2.jpg" class ="image2">
	<div class ="texte">
		<p>Dein Syria per speciosam interpatet diffusa planitiem ...	
	</div>
</article>
<article>
	<img src ="../images/bikini8.jpg" class ="image3">
	<div class ="texte">
		<p>Dein Syria per speciosam interpatet diffusa planitiem ...	
	</div>
</article>
<h3 style ="clear: both">Le code correspondant</h2>
...

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 : <h3... style ="clear:both" > Le code correspondant ...

Le raccourci mask

Avec le masquage CSS, vous créez un calque de masque à placer sur un élément pour masquer partiellement ou entièrement des parties de l'élément.

mask-image
mask-mode
mask-repeat
mask-position

Vous pouvez bien sur utiliser le raccourci mask.
La propriété CSS mask-image spécifie une image de calque de masque. L'image du calque de masque peut être une image PNG, une image SVG, un dégradé CSS.

La plupart des navigateurs ne prennent en charge que partiellement le masquage CSS. Vous devrez utiliser le préfixe -webkit- en plus de la propriété standard dans la plupart des navigateurs.

Exemple de page avec emploi de la propriété mask

...
.masque1 {
  -webkit-mask-image: radial-gradient(transparent 50%, black 50%);
  mask-image: radial-gradient(transparent 50%, black 50%);
}
.masque2 {
  -webkit-mask-image: radial-gradient(black 50%, transparent 50%);
  mask-image: radial-gradient(black 50%, transparent 50%);
}
.ombrage {filter : drop-shadow(10px 10px 10px black); }
</style>
</head><body>
<p>Ci-dessous image native et ombrée: </p>
<img src="otarie.jpg" class="centre ombrage">
<p>Ci-dessous l'image rogné de l'intérieur puis de l'extérieur : </p>
<img src="otarie.jpg" class="masque1" width ="40%" >
<img src="otarie.jpg" class="masque2 ombrage" width ="40%" >
...

Dans les classes "masque1" & "masque2" je n'ai utilisé que la propriété "mask-image" puisque pour les autres propriétés préfixées "mask"; je garde les valeurs par défaut. Notez que cette propriété a pour valeur un dégrad

Le rendu

Le masquage de l'image correspond à la zone de transparence.
Notez qu'il y a incompatibilité entre les propriétés "mask" et "filter: drop-shadow()".

Traduction

Tutoriel CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Nouveautés CSS3 - suite

Transformations, transitions & animations

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Propriétés clip-path & shape-outside & mask

Rappels

Propriété clip-path

Exemple

Images découpées

Boites découpées

Le code correspondant

Le CSS

Le code HTML

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

Clip-path & ombrage

Le code

Le rendu

Dessiner des formes complexes avec clip-path

Exemple

Le code correspondant

La propriété shape-outside

Exemple

Le code correspondant

Le CSS

Le code HTML

Le raccourci mask

Exemple de page avec emploi de la propriété mask

Le rendu