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.
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 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" ...
Vous pouvez me contacter via Facebook pour questions & suggestions :