Tutoriel CSS3 - sommaire

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

Dans la page précédente vous avez vu que l'on peut arrondir les angles des boites avec la propriété border-radius.

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 qui permet de découper une boite, une image.

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 zone 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é.

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.

Les paramètres des différentes commandes :
• 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

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 est implémentée) alors on désactive "border-radius" et on active "clip-path".

Clip-path & ombrage

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

Le code

Le rendu

Dès que vous appliquez une découpe à l'élément, l'ombre portée n'est pas prise en compte par le navigateur.

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.
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

Vous avez vu qu'on peut appliquer la propriété clip-path à des images, des boites.
Ici on applique cette propriété à des éléments button afin d'obtenir des boutons de commande sous forme de flèches.

Le CSS correspondant

	button{display : block ; margin :20px ; background : lime ; 
		width : 300px ; height : 150px; }
	.fleche_double {clip-path : 
		path("M 0,75 L75,0 L225,0 L300,75 L225,150 L75,150 z");}
	.fleche_droite {clip-path : 
		polygon(0 0,80% 0, 100% 50%, 80% 100%, 0 100%);}
	.fleche_gauche {clip-path : 
		polygon(20% 0, 100% 0, 100% 100%, 20% 100%, 0% 50%);}

La fonction polygon(liste de coordonnées x y en %) est plus souple que la fonction path(chemin selon la syntaxe SVG). En effet si vous modifiez la largeur et hauteur de l'élément button vous n'avez pas à changer la définition de la découpe puisque les coordonnées sont exprimées en %.

Le code HTML correspondant

La propriété shape-outside

Si une image est découpée sous forme d'un rond, 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.

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

	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

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 mais aussi l'enroulement 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.

Pour réaliser un masque il faut utiliser les propriétés préfixées "mask-" qui sont :
• 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.

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

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.
Dans les deux classes, la valeur de la propriété mask-image est un dégradé CSS.

Le rendu

Le masquage de l'image correspond à la zone de transparence crée par le dégradé.

Atelier

Revenons à la découpe d'une image qui cette fois doit être un trou de serrure.

Le rendu

Ci-dessous un document HTML dans lequel une image sexy a été découpée sous forme d'un trou de serrure selon deux techniques : le CSS et le SVG.

Le code de ce document HTML (extraits)

Commentaire de ce code

Appliquer un chemin défini en CSS

Je définis dans la classe "chemin" un "path".
Pour simplifier le chemin j'ai défini seulement une suite de droites (pas d'arc de cercle).
J'applique cette classe à l'élément IMG :
<img src ="../images/jolie_fille.jpg" width="500" class ="chemin" >
Vous imaginez qu'avant d'encoder ce chemin j'ai du réaliser un croquis.

Appliquer un chemin défini en SVG

Je crée un canevas SVG invisible (width = 0%) et dans cette zone de dessin je définis une découpe (élement clipPath) qui correspond à une forme complexe (juxtaposition d'un cercle et d'un triangle) et qui est identifiée "trou_serrure".
J'utilise ensuite cette définition SVG dans une instruction HTML :
<img src ="../images/jolie_fille.jpg" width="500" style ="clip-path : url(#trou_serrure);" >
Notez bien la valeur de l'attribut style dans cette instruction.

Je vous rappelle donc q'une définition SVG (ici une découpe mais ça aurait pu être un filtre) peut s'appliquer sans problème à un élément HTML.
Ici la solution SVG est préférable car plus intuitive : ne nécessite pas le recours à un croquis préalable.