Bases pour utiliser les clip-pats et shape-outside en webdesign

1. CSSFLIP
shape-outside
les principes

2. Clip-path & shapes2
Outil en ligne
La création de forme via la
fonction clip-path peut être
assez laborieuse.
Heureusement il existe des
outils en ligne très efficace :
clippy.
Attention : la fonction clip-path ne
fonctionne pas sur IE. La fonction
shape-outside ne fonctionne pas
sur IE et il faut l’activer sur Firefox
via about:config.
Codes en ligne :
https://goo.gl/c87wu7 ou git clone
https://github.com/erwantanguy/
shapes
https://bennettfeely.com/clippy/
Voir aussi :
http://www.cssplant.com/clip-path-
generator
Des explications sur les mises en
place :
§ https://tympanus.net/codrops/
css_reference/clip-path/ &
https://tympanus.net/codrops/
css_reference/shape-outside/
§ https://www.sarasoueidan.com/
blog/css-shapes/
§ https://www.html5rocks.com/en/
tutorials/shapes/getting-started/
§ https://la-cascade.io/css-shapes-
une-introduction/

3. Clip-path & shapes3
Clip-path et shapes
Les 2 propriétés sont très
proches dans la construction.
Elles permettent de créer
différentes formes via des
fonctions spécifiques :
§ circle()
§ ellipse()
§ inset()
§ polygon()
https://la-cascade.io/css-
shapes-une-introduction/
Pour que l’élément avec un
shape puisse être en action, il
est nécessaire de le mettre en
float.
Il est recommandé aussi de lui
donner des dimensions.
Voir aussi cet excellent
article :
http://karenmenezes.com/
shapes-polygon/

4. Clip-path et shape-outside
1.
Introduction

5. Clip-path & shapes5
Suivre des formes
Les formes sur des objets (images ou
balises) se font via clip-path en css.
Mais pour que le texte se mette en
place en suivant la forme, il faut
reprendre le code avec shape-outside.
L’addition des deux propriétés permet
le résultat final.
http://newsletter.alwaysdata.net/
meetup.html
Sans shape-outside Sans clip-path

6. Uniquement sur Chrome/webkit
2.
Image

7. Clip-path & shapes7
Une image en transparence
Pour l’instant ce n’est possible de le
faire uniquement sur les navigateurs
sous webkit (Safari et Chrome) et
Opéra.
Cela permet de se passer de forme
complexe (polygon).
shape-outside: url(images/arbre-
detoure-vert-jaune.png);
shape-image-threshold: 0.5;
La marge autour de l’image se fera via
shape-margin :
shape-margin: 10px;

8. Et aussi sur Firefox
3.
Image (suite)

9. Clip-path & shapes9
Pour entourer une image
La version pour entourer une image
aussi sur Firefox va prendre un peu
plus de temps puisque qu’il sera
nécessaire de créer le polygone sur un
outil. Plus il y aura de points, plus
l’entourage sera précis.
Comme Firefox n’interprète pas
encore shape-margin, il est nécessaire
d’utiliser les margins.
clip-path: polygon(61% 0%, 67% 3%, 70% 8%, 75% 11%,
81% 14%, 81% 18%, 87% 22%, 97% 25%, 99% 33%, 90%
38%, 96% 43%, 98% 50%, 96% 57%, 91% 60%, 90% 67%,
81% 69%, 74% 70%, 73% 75%, 65% 73%, 58% 72%, 55%
76%, 55% 82%, 56% 89%, 58% 100%, 1% 99%, 1% 0%);
float: left;
margin-right: 25px;

10. Et aussi sur Firefox
4.
Block

11. Clip-path & shapes11
Content-box ou border-box
Ces propriétés sont encore mal
interprétées par Firefox mais
permettent quand même un code
moins complexe.
La gestion des marges avec Firefox est
encore trop artisanales.
Pour la partie blockquote même avec
Chrome et un shape-margin, le
résultat est assez aléatoire.
Chrome
Firefox

12. Les formes les plus simples
5.
Autres exemples

13. Clip-path & shapes13
Avec des formes simples
Il est simple ensuite de mettre en
place dans des zones spécifiques, un
affichage différent sur des blocs ou
des images.

14. Et demain ?
6.
Les limites

15. Clip-path & shapes15
Et demain ?
De nombreux articles en ligne
évoquent les évolutions des
shapes.
Au-delà de l’interprétation de
l’existant par tous les
navigateurs récents
(Microsoft Edge
notamment !!!), certaines
propriétés à venir sont assez
attendues pour des effets
permettant des approches
plus subtiles.
Shape-inside : à l’inverse de
outside, cette propriété
permettrait de conditionner
un contenu textuel, par
exemple, à l’intérieur d’une
zone.
CSS Masks (Firefox
uniquement)
Shape-outside: url(#idsvg) :
pour récupérer des formes en
svg et les approcher
directement

16. Formateur / Chef de
projet web
06 62 15 11 02
erwan@ticoet.me
@erwan_t @ticoetfr
Erwan Tanguy