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