Post on 03-Jun-2020
Guillaume Duverger / Développement & Graphisme
LES EXLUSIONS ET LES FORMES EN CSS :
De prime abord, on pourrait penser que les formes CSS et les exclu-
sions CSS ont la même fonction, à savoir envelopper du contenu autour
d'un élément.
D'ailleurs, au départ, ces deux spécifications faisaient partie du même
module, puis ont été séparées en deux modules différents.
Le module Exclusions CSS est spécifiquement conçu pour permettre à
un contenu d'envelopper un élément sans que celui-ci soit retiré du flux
(avec la propriété float), et indépendamment de la façon dont l'élément
est positionné : absolu, relatif ou fixe.
EXCLUSIONS CSS
Les propriétés des exclusions CSS
La propriété -ms-wrap-flow permet d'indiquer comment les exclusions
agissent sur le contenu en ligne (inline) au sein des éléments de bloc.
Elle comprend les valeurs suivantes :
- auto : par défaut.
1 sur 20
- start
- end
- both
- maximum
- clear
Voyons ci-dessous comment ces valeurs fonctionnent :
2 sur 20
La propriété -ms-wrap-through spécifie comment le contenu doit entou-
rer un élément d’exclusion. Vous pouvez utiliser cette propriété pour dé-
terminer l’effet des exclusions avec les valeurs wrap et none.
La propriété -ms-wrap-margin permet de définir la marge de la zone
d'exclusion. La valeur de la marge doit être positive.
����� Pour l'heure, ce module n'est supporté que par les navigateurs
Microsoft (Internet Explorer 10+, ainsi que Edge d'où le préfixe -ms).
Exclusions CSS et Grid Layout : un couple fait pours'entendre
3 sur 20
A la base, le module CSS Grid layout (https://msdn.microsoft.com/fr-
fr/library/hh673533(v=vs.85).aspx)��� a été lancé par Microsoft, c'est
pourquoi vous trouverez dans le code de l'exemple ci-dessous les pré-
fixes propres aux navigateurs de la marque. Depuis, le module a évolué.
Il est désormais possible de l'utiliser en production puisque la majorité
des navigateurs est compatible. Ce qui n'est pas le cas du premier mo-
dule CSS exclusions (https://caniuse.com/#feat=css-exclusions)��� vu
plus haut dans l'article, toujours en brouillon de travail. C'est ballot.
Exemple ci-dessous :
4 sur 20
5 sur 20
<div class="exclu_grid"><div class="cadre_exclu"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere
quam non enim commodo, ac pellentesque tortor lacinia. Aenean iaculis interdum tempor. Nullam porttitor lectus eget mollis egestas. Cras posuere velit id vehicula tempor. Mauris id ex id nisi sagittis ornare vitae
a erat. Aliquam nisi risus, gravida sit amet augue id, feugiat tempor dui. Vestibulum tincidunt iaculis tellus, eget finibus odio. Quisque ac dapibus massa. Donec placerat nisi velit, quis sagittis turpis lobortis ac. Praesent ornare malesuada velit, id placerat enim imperdiet sit amet. Vestibulum
consequat ligula tellus, quis lacinia mauris porta in. Praesent sit amet faucibus purus. Integer vel sagittis augue.</p><p>Aliquam tempor interdum volutpat. Suspendisse potenti. Nunc nibh elit, sagittis nec libero a, pretium fermentum sapien. Aliquam eu risus eu
dui varius elementum. Curabitur ut ex luctus, egestas dui sit amet, malesuada lectus. Cras a nibh in velit mattis feugiat at at eros. Etiam et leo arcu. Maecenas egestas enim purus, at ornare velit laoreet a. Etiam egestas pharetra diam, non accumsan sapien posuere ornare. Ut sed
velit porttitor dolor tincidunt tincidunt. Pellentesque sit amet pulvinar diam. Cras et purus vulputate, consequat dui vel, cursus risus. Quisque pulvinar convallis tempor. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p><p>Sed mollis fermentum lorem, vel vulputate lectus lacinia sit amet. Praesent pulvinar ante id consequat cursus. Quisque faucibus dui et massa suscipit, nec hendrerit nulla ornare. Donec accumsan eros a
dictum tempor. Vestibulum a metus id quam eleifend ornare. Fusce sit amet lacus ut nisi viverra volutpat ultrices a ipsum. Ut lacus leo, dictum sit amet nulla ac, volutpat tempor nunc. Donec ut enim eget massa luctus finibus ac ac lorem. Vestibulum pretium lacus a orci molestie volutpat
quis eget mi. Aenean lacus erat, dignissim eget mollis auctor, vehicula a dolor. Curabitur id mollis eros, at auctor ipsum.</p></div>
<div class="exclu_grid1"><img src="image.jpg" alt></div><div class="exclu_grid2"><img src="image.jpg" alt></div></div>
6 sur 20
.exclu_grid {
margin: 2rem auto;
padding-bottom: 100vh;display: -ms-grid;-ms-grid-columns: 1fr;
text-align: justify;-ms-grid-rows: 10rem auto 30rem auto auto}/*position images + texte*/
.cadre_exclu{
-ms-grid-column: 1;-ms-grid-row: 1;-ms-grid-row-span: 5
}
.exclu_grid1{
-ms-grid-row: 2;-ms-grid-column: 1;
-ms-wrap-flow: both;/*retour à la ligne du texte sous l'image*/}
.exclu_grid2 {
-ms-grid-row: 4;-ms-wrap-flow: both;/*retour à la ligne du texte sous l'image*/} .exclu_grid img{
padding:5px 10px
}
@media screen and (min-width: 30rem) {
.exclu_grid{
padding-bottom: 50vh;
-ms-grid-columns: 1fr 2fr 2fr 1fr
}
7 sur 20
.cadre_exclu{
-ms-grid-column: 2;-ms-grid-column-span: 2
} .exclu_grid1 {
-ms-grid-row:2;-ms-grid-column:3;-ms-grid-column-span:1
} .exclu_grid2 {
-ms-grid-row: 4;-ms-grid-column: 2;-ms-grid-column-span:1
}
}
@media screen and (min-width: 62.75rem) {
.exclu_grid{
padding-bottom: 0;-ms-grid-columns:1fr 2fr 3fr 1fr
}
}
Exclusions CSS et CSS Regions
Les régions CSS sont des zones définies de la page où le contenu peut
circuler.
8 sur 20
Le module CSS regions (https://www.w3.org/TR/css-regions-1/)��� est
idéal pour les éditeurs tels que les magazines, les sites de nouvelles, les
articles en ligne ou même les livres électroniques dans l'avenir. Ils sont
également utiles pour les mises en page réactives car le contenu suit
l'orientation du périphérique.
Tout comme le module Exclusions CSS, CSS Regions ne bénéficie que
d'un support (https://caniuse.com/#search=region)��� très pauvre.
Les deux modules pourront peut-être, à l'avenir, cohabiter.
CSS SHAPES
Contrairement aux exclusions CSS, les formes CSS, dont le support est
en voie de standardisation (https://caniuse.com/#feat=css-shapes)���,
permettent d'encapsuler un contenu autour de chemins. Le module CSS
shapes est basé sur le modèle de boîte CSS et suit par conséquent le
flux du document.
Ainsi, pour appliquer une propriété de forme CSS à un élément, celui-ci
devra t-il être impérativement flottant.
Il existe deux types de propriétés que nous allons voir ci-dessous.
Propriétéshape-outside:
9 sur 20
Cette propriété permet de faire "couler" le texte autour d'une forme. Elle
s'associe avec la propriété shape-margin.
Les valeurs possibles sont :
- none
- margin-box
- content-box
- border-box
- padding-box
Il existe également des fonctions (ou types de chemins) :
- Fonction circle()
- Fonction ellipse()
- Fonction inset()
- Fonction polygon()
Exemple 1 : image en ligne (inline)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at tinci-
dunt risus, nec varius risus. Pellentesque a nisl dolor. Sed cursus, tur-
pis nec tincidunt pharetra, risus lorem vestibulum velit, sit amet dictum
lacus urna quis nunc. Maecenas euismod ultricies odio, eget convallis
lorem viverra id. In hac habitasse platea dictumst. Suspendisse tinci-
10 sur 20
dunt volutpat elit id posuere. Donec maximus tris-
tique viverra. Pellentesque pretium, est at
tempor sodales, orci eros sollicitudin mau-
ris, vitae sollicitudin nulla augue a nisi.
Proin porta venenatis est vitae interdum.
Lorem ipsum dolor sit amet, consectetur adi-
piscing elit. Nunc at tincidunt risus, nec varius risus.
Pellentesque a nisl dolor. Sed cursus, turpis nec tincidunt pharetra, ri-
sus lorem vestibulum velit, sit amet dictum lacus urna quis nunc.
Maecenas euismod ultricies odio, eget convallis lorem viverra id. In
hac habitasse platea dictumst. Suspendisse tincidunt volutpat elit id
posuere. Donec maximus tristique viverra. Pellentesque pretium, est
at tempor sodales, orci eros sollicitudin mauris, vitae sollicitudin nulla
augue a nisi. Proin porta venenatis est vitae interdum.
11 sur 20
<div><img src="images.jpg" alt><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at
tincidunt risus, nec varius risus. Pellentesque a nisl dolor. Sed cursus, turpis nec tincidunt pharetra, risus lorem vestibulum velit, sit amet dictum lacus urna quis nunc. Maecenas euismod ultricies odio, eget
convallis lorem viverra id. In hac habitasse platea dictumst. Suspendisse tincidunt volutpat elit id posuere. Donec maximus tristique viverra. Pellentesque pretium, est at tempor sodales, orci eros sollicitudin mauris, vitae sollicitudin nulla augue a nisi. Proin porta venenatis est
vitae interdum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at tincidunt risus, nec varius risus. Pellentesque a nisl dolor. Sed cursus, turpis nec tincidunt pharetra, risus lorem vestibulum velit, sit amet
dictum lacus urna quis nunc. Maecenas euismod ultricies odio, eget convallis lorem viverra id. In hac habitasse platea dictumst. Suspendisse tincidunt volutpat elit id posuere. Donec maximus tristique viverra. Pellentesque pretium, est at tempor sodales, orci eros sollicitudin
mauris, vitae sollicitudin nulla augue a nisi. Proin porta venenatis est vitae interdum.</p></div>
/*exemple 1*/
div img{
padding: 10px;float: left;margin-right: 1.5rem;
border-radius: 50%;border: 3px solid #666;shape-outside: circle()
}
Exemple 2 : en arrière-plan
12 sur 20
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Nunc at tincidunt risus,
nec varius risus.
Pellentesque a nisl
dolor. Sed cursus, tur-
pis nec tincidunt pha-
retra, risus lorem ves-
tibulum velit, sit amet
dictum lacus urna quis
nunc. Maecenas euismod ul
tricies odio, eget convallis lorem
viverra id. In hac habitasse platea dictumst. Suspendisse tincidunt volut-
pat elit id posuere. Donec maximus tristique viverra. Pellentesque pre-
tium, est at tempor sodales, orci eros sollicitudin mauris, vitae sollicitudin
nulla augue a nisi. Proin porta venenatis est vitae interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at tincidunt
risus, nec varius risus. Pellentesque a nisl dolor. Sed cursus, turpis nec
tincidunt pharetra, risus lorem vestibulum velit, sit amet dictum lacus ur-
na quis nunc. Maecenas euismod ultricies odio, eget convallis lorem vi-
verra id. In hac habitasse platea dictumst. Suspendisse tincidunt volut-
pat elit id posuere. Donec maximus tristique viverra. Pellentesque pre-
tium, est at tempor sodales, orci eros sollicitudin mauris, vitae sollicitudin
nulla augue a nisi. Proin porta venenatis est vitae interdum.
13 sur 20
/*exemple 2*/
div {
background: url(image.jpg) no-repeat 32% 50%;box-shadow: inset 0 0 5px rgba(0,0,0,.4),0 0 5px rgba(0,0,0,.4);border-radius: 50%;
border: 5px solid #ddd;width: 500px;height: 500px;float: right;
margin-left: 2rem;shape-outside: circle(250px at 50% 50%)
}
Voir un autre exemplede mise en page
� (https://www.guyom-design.com/blog/shapes_css3-exemple.html)
Vous pouvez également extraire une forme à partir d'images avec un ca-
nal alpha en utilisant la propriété shape-image-threshold (https://deve-
loper.mozilla.org/fr/docs/Web/CSS/shape-image-threshold)��� conjointe-
ment à la propriété shape-outside. Cela ne fonctionne que sur des
images transparentes (.gif, .png, .svg).
14 sur 20
<p><img class="shape-image-threshold" src="image.png">blablabla...
</p>
.shape-image-threshold {shape-outside: url("image.png");
shape-image-threshold: 0.5;shape-margin: 10px;float: left
}
Propriétéshape-inside:
La propriété shape-inside fera partie du deuxième niveau du module.
Elle s'associe avec la propriété shape-padding. Tandis que la propriété
shape-outside permet de faire circuler un texte autour d'une image, la
propriété shape-inside permet d'envelopper du texte à l'intérieur d'une
forme.
15 sur 20
CSS masking et CSS shapes
Voici un exemple combinant les masques CSS et les formes CSS :
16 sur 20
.class {
float: left;
width: 512px;height: 512px;shape-outside: url(image.png);
shape-margin: 15px;shape-image-threshold: 0.5;background: #000 url(image.jpg) no-repeat center center/cover;mask-image: url(image.png);
-webkit-mask-image: url(image.png)
}
SOURCE, INSPIRATION, RESSOURCES :
CSS exclusions :
Informations sur le module d'exclusions CSS (https://www.w3.org
/TR/css3-exclusions/)���.
La documentation Microsoft (https://msdn.microsoft.com/library
/hh673558(v=vs.85).aspx)��� sur les exclusions CSS
CSS shapes :
Informations sur le module CSS shapes (https://www.w3.org/TR/css-
shapes/)���.
17 sur 20
Tutoriel sur CSS shapes (EN) (https://www.html5rocks.com/en/tutorials
/shapes/getting-started/)���.
Introduction CSS shapes (FR) (https://la-cascade.io/css-shapes-une-
introduction/)���.
Autre article sur CSS shapes (EN) (https://www.chenhuijing.com
/blog/why-you-should-be-excited-about-css-shapes/)���.
Modèle de boîte CSS Shapes (EN) (http://razvancaliman.com/writing/css-
shapes-reference-boxes/)���.
Séries d'articles sur le sujet (EN) (http://hansmuller-webkit.blog-
spot.fr/)���.
Polyfill (https://github.com/adobe-webplatform/css-shapes-polyfill)���.
CSS Regions :
Documentation Microsoft (https://msdn.microsoft.com/fr-fr/library
/hh673537.aspx)���.
Tutoriel CSS regions (EN) (https://www.html5rocks.com/en/tutorials/re-
gions/adobe/)���.
CSS regions et CSS exclusions(EN) (http://www.brucelawson.co.uk
18 sur 20
/2011/css-regions-css-exclusions/)���.
Article complet (EN) (https://vanseodesign.com/css/regions/)���.
Exemple exclusions CSS et CSS grid (https://codepen.io/rachelandrew
/full/PNWLjP/)���.
Polyfill (https://github.com/FremyCompany/css-regions-polyfill)���.
19 sur 20
La trentaine passée, cultivant un intérêt pour toute
forme d'art, éternel insatisfait et grand amateur de café.
A vingt-quatre ans, je deviens artiste peintre profes-
sionnel (https://www.guyom-design.com/artiste/) (SIRET :
49073847300019) sous le pseudonyme Guyom, puis .G (point G). Je
participe à un certain nombre d'expositions en France, co-organise
des festivals, et ouvre même une galerie dans laquelle j'expose mes
tableaux ainsi que les oeuvres d'artistes locaux.
En 2009, je décide de devenir infographiste freelance tout en conti-
nuant mon activité picturale. Depuis lors, j'ai pu réaliser de nombreux
sites web, des logos, des affiches, des flyers et autres brochures...
Vous pouvez voir mon actualité en me suivant sur mon compte Twitter
(https://twitter.com/guyomdesign) ou en visitant mon blog sur lequel
j'écris des articles, mets à disposition des ressources, des astuces,
des tutoriels... sur des sujets concernant le développement et le gra-
phisme.
20 sur 20