
Nous avons vu dans [l’article précédent](/articles/utiliser-hsl-pour-vos-couleurs/) tout l’intérêt qu’il y avait à utiliser HSL pour créer et manipuler les couleurs, mais il est des domaines où cela présente tellement d’avantages qu’il est presque surprenant que les développeurs n’en profitent pas plus.

<figure role="group"><img src="/images/holi-2x.jpeg" width="1536" height="820" alt="jeune fille recouverte de peinture et tirant la langue"/></figure>

<h2>Créer des prototypes rapides de schémas de couleurs</h2>

[HSL](https://fr.wikipedia.org/wiki/Teinte_saturation_lumière) est idéal pour la création rapide de [schémas de couleurs](http://en.wikipedia.org/wiki/Color_scheme), en particulier pour les développeurs qui ne maîtrisent pas parfaitement le design ou la théorie des couleurs. <span aria-hidden="true" data-icon="&#9758;"></span> (_NdT : si c’est votre cas, pas d’inquiétude&nbsp;! Vous retrouverez dans la Cascade tout un tas d’articles et de ressources pour maîtriser les couleurs comme un pro, voyez la liste dans la [page du tag "couleur"](/tags/couleur)_). L’utilisation de quelques règles simples permet de créer des choix de couleurs harmonieux qui fonctionnent en toute situation.

Prenons un exemple, disons que vous avez une couleur principale et que vous voulez l’utiliser pour générer rapidement le schéma de couleurs d’un site. Admettons, par exemple, que vous ayez une couleur orange dérivée du logo du client, qui correspond à `hsl(30, 90%, 29%)`.

Pour générer instantanément une couleur complémentaire, il suffit d’ajouter 180 degrés à la valeur de la couleur&nbsp;: dans notre exemple, cela donne `hsl(210, 90%, 29%)`. Facile, non&nbsp;? Et si votre première couleur a une valeur supérieure à 180 degrés, pas de souci, votre navigateur saura “faire le tour du cadran de l’horloge” et convertir les valeurs supérieures à 360 degrés. Il sait même gérer les valeurs négatives.

Pour créer en un tournemain un schéma de couleurs monochromatique&nbsp;: prenez la valeur de saturation et soustrayez un tiers. Notre base de couleur est `hsl(30, 90%, 29%)`, les couleurs additionnelles seront donc `hsl(30, 60%, 29%)` et `hsl(30, 30%, 29%)`.

Pour un schéma de couleurs neutre&nbsp;: soustrayez et/ou ajoutez à la couleur un nombre de degrés identiques à chaque fois, mais jamais supérieur à 90°. Par exemple, à partir d’une couleur de 30°, on obtiendra `hsl(0,90%,29%)` et `hsl(60,90%,29%)`.

Pour un schéma de couleurs triadique, ajoutez 120° à la valeur de la couleur principale.

Bien utilisé, ceci élimine le débat sur la question de savoir “ce qui irait bien avec ça&nbsp;?” et vous aide à générer le design d’un site très rapidement.

<h2>Ajustement rapide de couleurs</h2>

Combien de fois un client vous a-t-il demandé “pourriez-vous éclaircir un peu le background&nbsp;?” Si vous avez spécifié les couleurs en [RGB](http://fr.wikipedia.org/wiki/Rouge_vert_bleu) ou en [Hexadécimal](http://fr.wikipedia.org/wiki/Noms_de_couleur_du_Web), il vous faudra ajuster trois composants simultanément, en faisant attention que l’un ne prenne pas plus d’importance que l’autre. Si votre schéma de couleurs est en HSL, rien de plus facile et sûr. Le background orange doit être plus sombre&nbsp;? Vous prenez votre background&nbsp;:

    body { background: hsl(60,100%,50%); }

...et vous réduisez la dernière composante (luminosité) :

    body { background: hsl(60,100%,40%); }

Et voilà ! Et si vous avez utilisé les techniques de schémas de couleurs dont nous avons parlé ci-dessus, il suffit d’ajuster les autres couleurs —&nbsp;tout aussi facilement.

<h2>Créer rapidement des variantes de couleurs</h2>

J’ai travaillé sur un article qui utilise [un dégradé radial](/articles/les-degrades-css/#radial) pour créer une lumière témoin sur le bouton que vous voyez ici (le rendu est meilleur sur Webkit au moment où j’écris ceci), basé sur ce travail de simurai&nbsp;:

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/simurai/pen/rJwpz/">
  Animated Radio Inputs</a> de <a href="/auteurs/simurai">simurai</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

Si l’on fait abstraction des préfixes constructeurs, le code CSS3 ressemble à ceci&nbsp;:

    //CSS
    input {
      background-image:
        radial-gradient( hsla(0,100%,90%,1) 0%,
        hsla(0,100%,70%,1) 15%,
        hsla(0,100%,60%,.3) 28%,
        hsla(0,100%,30%,0) 70% );
    }

<figure role="group"><img src="/images/red-button-compressor.jpeg" width="206" height="75" alt=""/><figcaption>Lumière témoin rouge, inspirée de simurai</figcaption></figure>

Si je veux une lumière bleue, tout ce que j’ai à faire c’est de faire tourner la composante couleur du code HSL&nbsp;:

    //CSS
    input {
      background-image:
        radial-gradient( hsla(200,100%,90%,1) 0%,
        hsla(200,100%,70%,1) 15%,
        hsla(200,100%,60%,.3) 28%,
        hsla(200,100%,30%,0) 70% );
    }

<figure role="group"><img src="/images/blue-button-compressor.jpeg" width="206" height="73" alt=""/><figcaption>Lumière témoin bleue, vite fait !</figcaption></figure>

La nouvelle lumière a la même intensité et la même brillance, dans une couleur différente. Pas besoin de bricoler entre les rouges, les verts et les bleus.

<h2>Quand ne faut-il &nbsp;<em>pas</em>&nbsp; utiliser HSL ?</h2>

Réponse courte : quand votre site doit être visible sur IE8 et avant. Si vous avez besoin de la compatibilité IE, [Sass peut automatiquement transférer les couleurs HSL en hexadécimal](http://thenewcode.com/982/Learning-Sass-With-CodePen-Part-Four-Color)... Donc vous pouvez commencer dès aujourd’hui à profiter de tout ce qu’HSL peut vous apporter&nbsp;!


3 raisons d'utiliser HSL pour vos couleurs


[Dans un précédent article](/articles/backgrounds-svg-les-rayures/), j’ai présenté l’utilisation de [SVG](/tags/svg/) dans des backgrounds “carrelés”. Ces simples lignes et rayures peuvent devenir des formes complexes, et on peut les mélanger à des images bitmap via CSS Blend Modes pour créer des backgrounds “pop art”. Ces techniques permettent de créer des effets visuels plus riches avec un code plus simple et plus de flexibilité que [mon essai précédent](http://thenewcode.com/307/Pop-Art-Web-Page-Backgrounds-Via-CSS3-Gradients-Merged-With-Images) qui faisait appel aux dégradés CSS.

## Motif en échiquier

Pour créer un échiquier avec SVG, il suffit d’utiliser deux [éléments carrés](/les-bases-de-svg-rectangles-et-carres/) disposés diagonalement&nbsp;:

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <g fill="#ccc">
    <rect width="25" height="25" />
    <rect x="25" y="25" width="25" height="25" />
  </g>
</svg>
```

Ce qui produit :

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <g fill="#ccc">
    <rect width="25" height="25" />
    <rect x="25" y="25" width="25" height="25" />
  </g>
</svg>

<br/>
Appliqué par-dessus une image bitmap&nbsp;:

```css
section#grid {
  background-image: url(checkerboard.svg), url(grace-kelly.jpg);
  background-size: 100px 100px, cover;
  background-blend-mode: overlay;
}
```

Cela nous donne ce bel effet :

  <div class="sd-kelly"></div>

L’image bitmap est dimensionnée pour couvrir la surface de l’élément. Le motif en échiquier se répète tous les 100px à la fois horizontalement et verticalement. Mais plutôt que de recouvrir l’image, il se mélange avec elle dans le mode `overlay` ( _NdT : en fait ici dans le mode `multiply` qui est plus doux_.)

## Motif à pois

La même idée peut être utilisée pour recouvrir une image d’un motif à pois, à l’aide de cinq [cercles SVG](/articles/les-bases-de-svg-cercles-et-ellipses/)&nbsp;: un au centre exact de la [viewbox](/articles/comprendre-svg-viewbox/) et les quatre autres ayant leur centre à chaque coin.

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<style type="text/css">
  circle { fill: #f99; }
</style>
<circle cx="0" cy="0" r="100"/>
<circle cx="300" cy="0" r="100"/>
<circle cx="0" cy="300" r="100" />
<circle cx="300" cy="300" r="100"/>
<circle cx="150" cy="150" r="100"/></svg>
```

Ce qui crée ce pattern :

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><style type="text/css">circle{fill:#f99}</style><circle cx="0" cy="0" r="80"></circle><circle cx="300" cy="0" r="80"></circle><circle cx="0" cy="300" r="80"></circle><circle cx="300" cy="300" r="80"></circle><circle cx="150" cy="150" r="80"></circle></svg>

On sauvegarde ce code comme `circle-grid.svg` et on applique le SVG sur l’image bitmap dans le background de l’élément&nbsp;:

```CSS
section#circles {
  background-image: url(kelly-brook-as-gilda.jpg), url(circle-grid.svg);
  background-size: cover, 100px 100px;
  background-blend-mode: multiply;
  }
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_PqQmxM" src="//codepen.io/dudleystorey/embed/PqQmxM?height=450&amp;theme-id=light&amp;slug-hash=PqQmxM&amp;user=dudleystorey&amp;default-tab=result" scrolling="no" frameborder="0" height="450" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/PqQmxM/">
  Pop Art Backgrounds with SVG & Blend Modes</a> de Dudley Storey dans <a href="https://codepen.io">CodePen</a></span>
</div>
  
## Conclusion
  
J’espère que cela vous a donné une idée de la façon dont vous pouvez mettre en œuvre vos propres idées. Il y a bien d’autres possibilités de designs de ce genre, nous les verrons dans de futurs articles.


Backgrounds Pop-Art avec SVG et Blend Modes


Un récent [dossier de travail réalisé par un de mes étudiants](http://tyler-mackenzie.ca/) utilisait une image de background “en écailles”, très intéressante, encodée en base64. J’ai [décodé la texture](https://www.base64decode.org/) puis j’ai apporté quelques améliorations au SVG. Pour compléter, j’ai créé un background hexagonal simple que je partage ici.

<h2>Motif en écailles</h2>

Pour les écailles, le balisage est assez simple&nbsp;:

```
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
    <pattern id="scales" width="30" height="30"
    patternUnits="userSpaceOnUse"  patternTransform="scale(2)">
            <g id="curves">
                <path id="inner" d="M0 0c0,30, 30,30 30,0" />
                <path id="outer" d="M0 0c0,30, 30,30 30,0" />
            </g>
            <use x="15" y="15" xlink:href="#curves" />
            <use x="-15" y="15" xlink:href="#curves" />
            <use x="0" y="0" xlink:href="#curves" />
            <use x="15" y="-15" xlink:href="#curves" />
            <use x="-15" y="-15" xlink:href="#curves" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#scales)" />
</svg>
```

Le SVG utilise la technique standard du `<pattern>` que j’ai déjà illustrée dans de précédents articles (par exemple&nbsp;: [motifs japonais](/articles/motifs-svg-japonais), [diagonales et motifs SVG en background](/articles/diagonales-et-motifs-svg-en-background)) . Moins habituel, le motif utilisé dans le pattern est [un élément “groupe”](/articles/les-bases-de-svg-groupes/).

L’arrière-plan SVG est associé aux styles suivants&nbsp;:

```
svg {
  background: #0F7173;
}
#scales {
  fill: #0F7173;
}
#inner {
    stroke: #0c4c4d;
    stroke-width: 3.1;
}
#outer {
  stroke: #098f92;
  stroke-width: 0.9;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_xZyKVp" src="//codepen.io/dudleystorey/embed/xZyKVp?height=300&amp;theme-id=light&amp;slug-hash=xZyKVp&amp;user=dudleystorey&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/xZyKVp">écailles SVG</a> de dudleystorey dans <a href="https://codepen.io">CodePen</a></span>
</div>

Remarquez que l’élément SVG et les écailles utilisent la même couleur pour leur `background` et `fill`. Cette technique est répétée dans l’exemple de motifs hexagonaux qui va suivre.

> Le pattern pourait être amélioré en définissant le `stroke` des chemins (_path_) en rgba plutôt qu’en valeurs hexadécimales. On pourrait ainsi les corriger automatiquement si les couleurs de background et de fill des écailles étaient modifiées.

<h2>Motifs hexagonaux</h2>

Le code comprend un balisage minimal pour créer un background hexagonal lié&nbsp;:

```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%">
     <defs>
        <pattern id="hexagons" width="50" height="43.4"
        patternUnits="userSpaceOnUse"
        patternTransform="scale(5) translate(2) rotate(45)">
            <polygon
            points="24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2"
            id="hex" />
            <use xlink:href="#hex" x="25" />
            <use xlink:href="#hex" x="-25" />
            <use xlink:href="#hex" x="12.5" y="-21.7" />
            <use xlink:href="#hex" x="-12.5" y="-21.7" />
        </pattern>
     </defs>
<rect width="100%" height="100%" fill="url(#hexagons)" />
</svg>
```

Le pattern utilise le CSS suivant&nbsp;:

```
svg {
  background: rgb(125,155,132);
}
polygon {
  fill: rgb(125,155,132);
  stroke-width: 2;
  stroke: #000;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_YwdYxq" src="//codepen.io/dudleystorey/embed/YwdYxq?height=300&amp;theme-id=light&amp;slug-hash=YwdYxq&amp;user=dudleystorey&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/YwdYxq">background SVG hexagones</a> de dudleystorey dans <a href="https://codepen.io">CodePen</a></span>
</div>

Là encore, le SVG utilise la même technique consistant à s’appuyer sur les mêmes `background` et `fill` pour l’élément SVG et ses polygones pour “remplir” l’espace vide. Dans cet exemple, j’ai utilisé une série de transformations du pattern pour le placé légèrement “en dehors” de la page.

> Le `translate` est particulièrement important car un hexagone ayant un bord placé contre une bordure du viewport semblera avoir un côté plus long que l’autre.

Les traits (_stroke_) SVG s’étendent de manière égale de chaque côté d’une ligne interne représentant le chemin, par conséquent une augmentation de la valeur `stroke-width` (“épaisseur du trait”) aura pour conséquence de réduire la taille des hexagones.

<h3>Exemples CodePen</h3>

Les exemples CodePen qui précèdent utilisent le code SVG directement dans le HTML pour plus de clarté. En production, le CSS serait intégré au SVG et l’ensemble serait transformé en code base64 qui serait utilisé comme valeur de la propriété `background-image`.


Backgrounds SVG : hexagones et écailles


Indépendantes de la résolution, légères, faciles à éditer, les images vectorielles ont de nombreux avantages sur les [dégradés css](/articles/les-degrades-css/)&nbsp;:

1. La syntaxe SVG pour les rayures est plus simple et moins verbeuse que celle des dégradés CSS.
2. Les backgrounds SVG sont mieux supportés par les navigateurs (SVG est compatible avec IE9 mais les dégradés CSS ne sont supportés qu’à partir de IE10).
3. On peut réaliser des backgrounds bien plus complexes avec SVG qu’avec CSS.

Mais pour être efficaces, les illustrations vectorielles doivent suivre quelques règles&nbsp;:

<h2>Règles générales</h2>

- Tout comme les [backgrounds répétés en bitmap](http://thenewcode.com/991/Cross-Fading-Background-Images), vous avez seulement besoin d’une “tuile” ou d’un “carreau” pour réaliser un carrelage. Un seul `<pattern>` suffit pour construire l’ensemble.
- Votre fichier SVG doit être aussi petit, “léger” et éditable que possible&nbsp;: cela impliquera un peu de travail manuel.
- En général, il est bon de garder au moins une composante couleur de votre background dans votre CSS, pour une meilleure flexibilité.

Nous allons commencer par quelques exemples. Remarquez bien que je me suis concentré sur les backgrounds répétés, les backgrounds simples en SVG sont traités à peu près de la même façon que leurs équivalents en bitmap.

<h2>Rayures simples en SVG</h2>

Un effet de “rayures” simple n’est rien d’autre qu’une surface remplie à côté d’une surface vide, le tout répété à l’infini. Dans le cas de SVG, la manière la plus simple de réaliser cette surface pleine est d’utiliser [un élément rectangle](/articles/les-bases-de-svg-rectangles-et-carres/). Sauvegardez le code suivant dans un fichier `stripe.svg`&nbsp;:

    <svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"> <rect width="0.5" height="1" /> </svg>

Remarquez que `viewBox` **ou** les attributs équivalents `width` et `height` peuvent être utilisés pour dimensionner l’élément `<svg>` lorsqu’on crée des images de background.

Ce fichier SVG peut être appliqué au background d’une page web via&nbsp;:

    //CSS
    body { background-image: url(stripe.svg); }

Par défaut, le SVG s’étendra pour couvrir la surface entière de l’élément. Il en résultera une division de la page, moitié noire (le remplissage par défaut du rectangle SVG) et moitié blanche (la couleur de background par défaut de la page web, puisque toute surface non explicitement colorée en SVG est automatiquement transparente).

Pour que ce motif SVG se répète plus d’une fois, nous pouvons modifier la `background-size` dans notre déclaration CSS&nbsp;: une largeur x suivie d’une hauteur y.

     //CSS
    body {
      background-image: url(stripe.svg);
      background-size: 20px 20px;
    }

Ce qui donne :

<figure role="group"><img src="/images/bw-vertical-stripes.png" width="602" height="317" alt="rayures verticales noires et blanches"/></figure>

Un aspect sympa et pratique de cette concision de notre illustration SVG c’est qu’elle est très simple à modifier. par exemple, pour la transformer de verticale en horizontale, il suffit de modifier `background-size`&nbsp;:

Rayures horizontales : `body { background-size: 1px 10px; }`  
Rayures verticales : `body { background-size: 10px 1px; }`

Pour plus de versatilité, vous pouvez colorer les rayures grâce à `rgba` ou [HSL](/articles/utiliser-hsl-pour-vos-couleurs/) et renvoyer la question du `background-color` de la page à CSS&nbsp;:

    <svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
      <rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" />
    </svg>

Le CSS :

    body {
      background-image: url(stripe.svg);
      background-size: 20px 20px;
      background-color: #669;
    }

Ce fichier SVG est suffisamment petit pour être inséré en ligne dans le CSS lui-même, ce qui évite une requête HTTP&nbsp;:

    body {
      background-image: url(’data:image/svg+xml;utf8,<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" /></svg>’);
      background-size: 20px 20px;
    }

Faites bien attention aux guillemets ! Ce SVG utilise des doubles guillemets en interne, ce qui signifie que nous devons utiliser des guillemets simples à l’extérieur pour éviter que notre navigateur s’embrouille.

Vous pouvez également encoder le fichier SVG en base64 et utiliser ce code dans le CSS&nbsp;:

    body { background-image: url(’data:image/svg+xml;base64,
    PHN2ZyB2aWV3Qm94PSIwIDAgMiAxIiB4bWxucz0iaHR0cDovL3d3dy53
    My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5Z
    TWluIG1lZXQiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjIiIGZpbGw
    9ImhzbGEoMzIsIDQyJSwgNTAlLCAuNSkiIC8+PC9zdmc+’); }

C’est évidemment une option, mais elle présente trois désavantages&nbsp;:

- La version Data URI occupe plus d’espace que la version SVG en ligne.
- Le fait de convertir l’image en base64 la rend non éditable. Pour faire un changement, il vous faudra retrouver le fichier SVG original, le modifier, le convertir en base64 et l’ajouter à votre CSS.
- le désencodage de base64 est plus lent sur les plateformes mobiles.

Toutefois, l’utilisation de base64 vous donne un peu plus de compatibilité navigateurs. Au final, c’est à vous de décider.

<h2>Séparer les lignes</h2>
Il est facile de rendre les lignes plus fines ou plus épaisses dans notre exemple, via `background-size`, mais une chose que cela ne changera pas c’est le *ratio* entre l’épaisseur des lignes et l’espace alentour. Pour changer cela, nous retournons à notre SVG et nous rendons notre rectangle plus large ou plus étroit&nbsp;:

    <svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
      <rect width=".25" height="1" />
    </svg>

Ce qui produit :

<figure role="group"><img src="/images/yv-vertical-stripes.png" width="613" height="310" alt="rayures fines jaunes sur fond violet"/></figure>

<h2>Réaliser des motifs plus complexes</h2>

Une fois les bases intégrées, il est aisé de réaliser des variations plus complexes de rayures horizontales et verticales en SVG. Par exemple, un motif guingan (Vichy) serait réalisé via un rectangle de ⅓ de large recouvrant un élément de ⅓ de hauteur.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <g fill="rgba(0,0,0,0.3)">
        <rect width="100" height="33" />
        <rect width="33" height="100" x="67" />
      </g>
    </svg>

Les mêmes concepts peuvent être utilisés pour créer des plaids et des tartans, mais les plus complexes d’entre eux devraient plutôt utiliser la syntaxe `<pattern>` de SVG que nous pouvons retrouver dans l’article [Diagonales et motifs SVG en background](/articles/diagonales-et-motifs-svg-en-background/).


Backgrounds SVG : les rayures


Ce qui est bien quand on enseigne, c’est que les étudiants arrivent toujours avec de nouvelles idées. L’un d’eux voulait reproduire un effet observé sur [Squarespace](http://www.squarespace.com/about/values), où une `div` semble entaillée&nbsp;:

<figure role="group"><img src="/images/navigation-compressor.jpeg" width="800" height="100" alt="navigation, l’onglet sélectionné semble porter une entaille"/></figure>

Sachant que son niveau lui permettait de comprendre les HTML et CSS du site, je me suis lancé avec elle dans la réalisation de cet effet. Ce découpage de la `nav` n’est pas si facile, ma première idée était de créer une image aux dimensions de l’entaille et de l’intégrer avec `::after`, mais ce n’est pas très responsif et pas aisé à gérer.

## Clip Path entre en scène

La propriété CSS clip-path permet de cacher des portions d’un élément via le masquage (_masking_) et le découpage, ou détourage (_clipping_).

<figure role="group"><img src="/images/ville-compressor.jpeg" width="300" height="300" alt=""/><figcaption>L’image qui nous servira de base pour nos découpages.</figcaption></figure>

En bref, la façon dont la propriété fonctionne est simple&nbsp;: on fournit une série de valeurs X et Y pour créer un chemin. Ces valeurs, une fois un chemin complet créé, découpent l’image située à l’intérieur.

Nous pouvons créer de nombreuses formes différentes à partir de cercles, d’ellipses, de polygones. La créativité est la seule limite.

<h3>Un triangle simple</h3>

<div class="clipbox clipPolygon"></div>

L’effet ci-dessus est obtenu en utilisant simplement un élément et en lui appliquant un clip-path.

    //CSS
    .clipClass {
       clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }

### Whoa, détaillons tout ça

De la même façon que pour la propriété `position`, nous devons penser en termes de valeurs X et Y. X:0 et Y:0 sont situés dans le coin supérieur gauche de l’élément. X:100% signifie qu’on a atteint le côté droit et Y:100% le bas.

Ok, cool. Donc le chemin que nous venons de créer utilise les points suivants&nbsp;:

    x: 0, y:100%
    x: 50%, y: 0
    x: 100%, y: 100%

Un chemin simple, qui part du bas à gauche, se déplace horizontalement jusqu’à la moitié de l’espace (50%), puis monte jusqu’en haut (0) pour atteindre le 2e point, puis va tout à fait à droite horizontalement et en bas, pour atteindre le 3e point&nbsp;: 3 points&nbsp;=&nbsp;un&nbsp;triangle&nbsp;!

Tout ce qui ne se trouve pas à l’intérieur de ces limites est simplement découpé et n’apparaît pas. L’élément lui-même garde ses dimensions, bien que le mode de présentation ait changé.

### Formes

Dans ce premier exemple, nous avons utilisé un polygone pour créer une forme et définir un chemin en créant des paires x et y, séparées par des virgules. Mais nous pouvons travailler avec différentes formes, qui prennent des valeurs différentes.

<h3>Cercles</h3>

<div class="clipbox clipCircle"></div>

Pour créer des cercles, nous passons trois valeurs. L’axe des x et des y nous donne les coordonnées du centre du cercle, et le rayon définit sa taille. La syntaxe est la suivante : “dimension du rayon (at) coordonnées du centre”&nbsp;:

    //CSS
    .clipClass {
      clip-path: circle(50% at 50% 50%);
    }

<h3>Ellipses</h3>

<div class="clipbox clipEllipse"></div>

Si vous préférez une forme oblongue, vous pouvez choisir l’[ellipse](http://fr.wikipedia.org/wiki/Ellipse_%28math%C3%A9matiques%29). Pour celle-ci, vous devez fournir quatre valeurs, une valeur sur l’axe des x, une sur l’axe des y, et les deux valeurs correspondant au centre. Ici encore, les coordonnées du centre sont précédées du mot-clé “at”&nbsp;:

    //CSS
    .clipClass {
      clip-path: ellipse(30% 20% at 50% 50%);
    }

<h3>Inset</h3>

<div class="clipbox clipInset"></div>

Si les angles aigus des polygones ne vous plaisent pas et que vous souhaitez créer des rectangles arrondis, utilisez les valeurs “inset”. Inset prend quatre valeurs, correspondant aux positions haut, droit, bas, gauche et permet l’utilisation d’un rayon sur chacune de ces valeurs.

    //CSS
    .clipClass {
      clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
    }

Ce qui se lit comme&nbsp;:

    inset(<haut> <droit> <bas> <gauche> round <rayon-haut> <rayon-droit> <rayon-bas> <rayon-gauche>)

Un peu long ? Bonne nouvelle, il y a un raccourci&nbsp;:

    //CSS
    .clipClass {
      clip-path: inset(25% 0 round 0 25%);
    }

#### Références rapides :

**Cercle** : circle(rayon at x y)

**Ellipse** : ellipse(rayon-x rayon-y at x y)

**Polygone** : polygon(x y, x y, ...)

**Inset** : inset(haut droit bas gauche round rayon-haut rayon-droit rayon-bas rayon-gauche)

### Créer des formes

Les cercles et les formes utilisant les rayons sont limités à quelques valeurs, par conséquent les polygones sont souvent un meilleur choix pour créer des formes complexes. Comme nous pouvons définir autant de points que nous le voulons, nous pouvons découper notre élément dans des formes très variées.

<h3>Bulle de bande dessinée</h3>

<div class="clipbox clipComic"></div>

    //CSS
    .clipClass {
      clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
    }

<h3>Étoile</h3>

<div class="clipbox clipStar"></div>

    //CSS
    .clipClass {
      clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
    }

### Animation

Maintenant que nous maîtrisons mieux les formes et la façon de les produire, nous pouvons nous amuser à créer des effets.

Nous pouvons par exemple avoir une forme qui s’applique au survol, en utilisant une propriété [transition](https://la-cascade.io/transition/) pour créer un effet en douceur. Cependant, nous devons garder à l’esprit qu’il nous faut créer un état initial par défaut, utilisant les mêmes points que ceux qui nous serviront pour notre état modifié.

<div class="clipbox clipAnimate"></div>

    //CSS
    .animateClass {
      clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0);
      transition: clip-path 0.5s;
    }
    .animateClass:hover {
      clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    }

## Utilisation en production

Comme toujours, pour connaître les détails à jour de la compatibilité vous pouvez consulter [Can I Use](http://caniuse.com/#search=css%20clip-path).

### Retour à notre tâche initiale

Tout ceci parce que nous voulions recréer la navigation Squarespace, vous vous rappelez ? Eh bien maintenant, si nous utilisons le positionnement pour recouvrir un élément par un autre, puis que nous utilisons clip-path pour masquer l’image, nous pouvons simplement montrer l’image de background sans avoir à appliquer de techniques complexes de remplacement d’images.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_https://codepen.io/rachelandrew/pen/vEZOeq" src="//codepen.io/rachelandrew/embed/vEZOeq?height=400&amp;theme-id=light&amp;slug-hash=vEZOeq&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/vEZOeq/">
  Squarespace clip-path</a> de Drew Minns dans <a href="https://codepen.io">CodePen</a></span>
</div>

Je ne sais pas ce que vous en pensez, mais je trouve que l’avenir est de plus en plus géométrique.


Comprendre Clip Path


Un cas intéressant d’utilisation de CSS Blend Mode est l’amélioration du design des diagrammes et des graphes.

## Diagrammes de Venn améliorés

Prenez par exemple le diagramme de Venn classique illustrant [la règle "Fast, Cheap, Good"](https://en.wikipedia.org/wiki/Project_management_triangle)&nbsp;: Le markup [SVG](/tags/svg/)</span></span> du diagramme de base pourrait être&nbsp;:

```xml
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
      <title>Project Triangle</title>
      <desc>Three overlapping circles, labelled "Good", "Fast" and "Cheap"</desc>
      <style type="text/css">
        svg {
          background: #1c1c38;
          }
        circle {
          opacity: 0.76;
          }
        text {
          font-family: Avenir Black, Avenir, sans-serif;
          font-weight: 700;
          font-size: 36px;
          }
      </style>
      <circle fill="#ED1F24" cx="163" cy="165" r="141" aria-labelledby="#fast" /> <circle fill="#55C6D9" cx="250" cy="306" r="141" aria-labelledby="#good" /> <circle fill="#FEE600" cx="337" cy="165" r="141" aria-labelledby="#cheap">      <text x="100" y="165" id="fast">FAST</text>
      <text x="310" y="165" id="good">GOOD</text>
      <text x="190" y="340" id="cheap">CHEAP</text>
  </svg>
```

Le résultat :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><title>Project Triangle</title><desc>Three overlapping circles, labelled "Good", "Fast" and "Cheap"</desc><style type="text/css">svg { background: #1c1c38; }circle { opacity: 0.76; }text { font-family: Avenir Black, Avenir, sans-serif;font-weight: 700; font-size: 36px;}</style><circle fill="#ED1F24" cx="163" cy="165" r="141" aria-labelledby="#fast" /><circle fill="#55C6D9" cx="250" cy="306" r="141" aria-labelledby="#good" /><circle fill="#FEE600" cx="337" cy="165" r="141" aria-labelledby="#cheap" /><text x="100" y="165" id="fast">FAST</text><text x="310" y="165" id="good">GOOD</text><text x="190" y="340" id="cheap">CHEAP</text></svg>

Remarquez que nous aurions pu laisser l’opacité en ligne pour chacun des cercles, puisque c’est également un attribut de présentation SVG. Je les ai intégrés comme des styles pour économiser de l’espace et éviter des répétitions inutiles. J’ai utilisé `aria-labelledby` pour l’accessibilité afin d’associer chaque cercle avec le texte approprié.

C’est un bon début, mais nous pouvons améliorer l’apparence du diagramme en ajoutant `mix-blend-mode` aux éléments `circle`&nbsp;:

```css
circle {
  opacity: 0.76;
  mix-blend-mode: color-dodge;
}
```

Ce qui nous donne&nbsp;:

<figure role="group"><img src="/images/venn.svg" alt="le diagramme fast, good, cheap"  width="450" height="450" alt="diagramme amélioré"/></figure>

👉🏾 _Nota Bene_ : pour parvenir au résultat espéré, les éléments auxquels on applique `mix-blend-mode` _ne doivent pas être_ sur un fond blanc ou noir purs. C’est une bonne règle pour tester vos blend modes en général.\n\nTout comme `opacity`, nous aurions pu appliquer la version SVG native de `blend-mode`, les filtres `<feBlend>`. Comme beaucoup d’aspects récents de CSS, les blend modes ont leurs racines dans la syntaxe SVG. J’ai utilisé la version CSS dans la mesure où il s’agit d’une _amélioration_ de la présentation, et non une obligation, et la syntaxe CSS est plus simple à écrire et à utiliser.

## Graphiques à barres améliorés

<div class="bargraph">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200">
<line x1="69.7" y1="187.9" x2="422.7" y2="187.9"></line>
<line x1="69.7" y1="187.9" x2="69.7" y2="183.4"></line>
<line x1="422.7" y1="187.9" x2="422.7" y2="183.4"></line>
<line x1="69.7" y1="187.9" x2="69.7" y2="10.2"></line>
<line x1="69.7" y1="187.9" x2="78.6" y2="187.9"></line>
<line x1="69.7" y1="152.3" x2="78.6" y2="152.3"></line>
<line x1="69.7" y1="116.8" x2="78.6" y2="116.8"></line>
<line x1="69.7" y1="81.3" x2="78.6" y2="81.3"></line>
<line x1="69.7" y1="45.7" x2="78.6" y2="45.7"></line>
<line x1="69.7" y1="10.2" x2="78.6" y2="10.2"></line>
<rect x="342.7" y="51.1" width="42.4" height="136.8"></rect>
<rect x="295.7" y="47.5" width="42.4" height="140.4"></rect>
<rect x="248.6" y="63.5" width="42.4" height="124.4"></rect>
<rect x="201.5" y="57.8" width="42.4" height="130.1"></rect>
<rect x="154.5" y="45.7" width="42.4" height="142.1"></rect>
<rect x="107.4" y="42.7" width="42.4" height="145.2"></rect>
</svg>
</div><br/><br/>

Comme dans mon article sur les [textes avec effets blend modes](http://thenewcode.com/1032/Easy-Cross-Browser-Text-Masks-with-Blend-Modes), nous pouvons utiliser les blend modes pour donner un background aux barres verticales d’un diagramme en barres. Pour cet exemple, j’ai laissé de côté les aspects liés à l’accessibilité ainsi que les légendes, pour plus de clarté. L’effet principal ici est obtenu par le fait que le SVG qui contient le diagramme en barres est lui-même inclus dans une div qui a une image de background&nbsp;:

```css
div {
  background-image: url(new-york-city-skyline.jpg);
  background-size: cover;
  font-size: 0;
}
svg {
  background: #fff;
  mix-blend-mode: lighten;
}
rect {
  fill: #202020;
  width: 42.4px;
}
```

Nous pourrions donner un aspect plus propre à l’effet en redimensionnant l’image de background. Telles quelles, les axes des abscisses et des ordonnées prennent également l’effet. Une autre manière de faire serait d’entourer les rectangles représentant les barres avec des [éléments clip-path](http://thenewcode.com/1007/Combining-CSS-clip-path-and-Shapes-for-New-Layout-Possibilities), ce qui fonctionnerait assez comme notre effet blend-mode.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_eNQbjz" src="//codepen.io/dudleystorey/embed/eNQbjz?height=450&amp;theme-id=light&amp;slug-hash=eNQbjz&amp;user=dudleystorey&amp;default-tab=result" scrolling="no" frameborder="0" height="450" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/eNQbjz/">
  Better SVG Diagrams & Graphs with Blend Modes</a> de Dudley Storey dans <a href="https://codepen.io">CodePen</a></span>
</div>

_(Photo par [Josh Liba](https://www.flickr.com/photos/jliba/8067975235), sous licence [CC-BY-NC-ND 2.0](https://creativecommons.org/licenses/by-nc-nd/2.0/))_


Créer de superbes diagrammes avec SVG et Blend Modes


On trouve beaucoup de livres et d’articles sur la Typographie, mais très peu explorent la question de la sélection et de l’association des polices de caractères. Les vannes étant sur le point de s’ouvrir <sup id="backto1"><a href="#1">(1)</a></sup> et les polices promises à une prochaine liberté d’utilisation sur les sites web, savoir choisir la bonne police est en passe de devenir un nouveau défi pour les designers. Par où commencer&nbsp;?

Jusqu’à présent, l’utilisation de polices de caractères autres que celles installées par défaut sur nos ordinateurs impliquait de recourir à des images, à Flash ou à des solutions de contournement. Les navigateurs ont mis la balle dans notre camp avec la mise en oeuvre de la propriété CSS `@font-face` qui permet aux designers de faire un lien vers n’importe quelle police pour l’importer dans une page.

Cela a jeté une lumière crue sur la grande préoccupation des fonderies&nbsp;: la plupart des fabricants de polices ont longtemps refusé d’accorder des licences pour l’utilisation de leurs polices de caractères sur le net, craignant un piratage massif. L’implémentation de `@font-face` a permis d’exposer clairement ce problème et a poussé les parties concernées à trouver une solution positive pour tout le monde. Depuis, des solutions existent ou sont en construction, qui vont d’accords de license accordés aux utilisateurs jusqu’à des services tiers tels que [Typekit](https://typekit.com), [Typotheque](https://www.typotheque.com/blog/typotheque_launches_its_web_fonts_service) et [Kernest](http://kernest.com). Les designers ont maintenant l’embarras du choix et les fabricants de polices peuvent gagner de l’argent avec leurs créations. Problème résolu, donc ? Plus ou moins.

## Le meilleur des mondes

Nous avons été gâtés. Jusqu’à présent, il est probable que si vous éditiez du texte sur une page web dans une police de caractères système et à une taille raisonnable, le résultat était lisible. De plus, nous connaissons les avantages et les défauts des polices que nous avons été forcés d’utiliser. Mais de nombreuses polices auxquelles nous aurons bientôt accès n’ont jamais été pensées pour les écrans, d’où des soucis à se faire en termes d’esthétique ou de lisibilité.

Les problèmes techniques liés aux polices pour le web sont bien réels, depuis l’incohérence du rendu selon les navigateurs et les plateformes jusqu’aux problèmes inhérents au chargement de fichiers de polices ou de familles de polices&nbsp;: le poids des pages peut monter facilement à plus de 100k. Mais supposons pour l’instant que ces problèmes seront résolus sous peu, et concentrons-nous sur ce que nous aurons à faire après.

Il y a une possibilité sérieuse qu’avec cet accès aux bibliothèques de polices nous n’ouvrions la boîte de Pandore. Beaucoup de gens ont _quelques_ connaissances en matière de typographie, mais mon intuition est que de nombreux designers resteront perplexes face aux nouveaux défis auxquels ils sont confrontés.

## Contexte et signification

Être designer web demandera bientôt une compréhension plus profonde de la typogaphie et de la façon dont fonctionnent les polices de caractères. Les options seront sans doute limitées au commencement, mais leur nombre va aller croissant et comme on le sait, un grand pouvoir impose de grandes responsabilités. Ce n’est pas parce que vous _pouvez_ utiliser cette police qui a l’air d’avoir des pattes d’éléphant que vous le _devez_.

Les polices système que nous utilisons communément, telles que Georgia, Verdana et Arial sont devenues tellement omniprésentes qu’il n’est presque plus imaginable de les utiliser en dehors du web. L’expression esthétique qu’il nous était impossible de réaliser en raison d’un choix insuffisant nous laissait le temps de peaufiner la lisibilité. Cela a fait du web un univers du &ldquo;set it and forget it&rdquo; (installez le et n’y pensez plus), en raison de la rapidité de publication, mais aussi de l’absence de contrôle précis sur la typographie, tel qu’il existe pour l’impression classique.

## Exigence

On peut utiliser une police parce qu’elle a l’air intéressante et cela peut donner des résultats acceptables, mais pratiquer l’art de la typographie implique de comprendre réellement les polices et ce qu’elles signifient. Le choix d’une police acceptable n’est pas compliqué, mais choisir celle qui convient parfaitement, dans un contexte technique et social donné, peut s’avérer difficile.

La célèbre designer de polices [Zuzana Licko](http://fr.wikipedia.org/wiki/Zuzana_Licko) a dit un jour que &ldquo;nous lisons le mieux ce que nous lisons le plus&rdquo;. Cette notion sonne juste s’agissant d’un comportement acquis, elle révèle aussi le principal défi du typographe : la lecture est un acte personnel et relatif. Lire un long passage en écriture [gothique](http://fr.wikipedia.org/wiki/Écriture_gothique), qui était considéré &ldquo;lisible&rdquo; il y a quelques siècles, nous demanderait aujourd’hui un effort bien plus considérable que si nous le lisions dans une police [sérif](<http://fr.wikipedia.org/wiki/Empattement_(typographie)>) ou [sans sérif](http://fr.wikipedia.org/wiki/Linéale), sur papier ou en ligne.

Au-delà de la question de la lisibilité, les considérations sur la typographie se réduisent pour l’essentiel à des questions de contraste et de forme. Les détails d’une police injectent du sens dans un design : des lignes douces et l’épaisseur du trait par exemple peuvent servir un contenu délicat ou lui donner élégance et dignité. Ces mêmes attributs peuvent être juxtaposés avec un contenu inattendu pour produire un effet ironique.

Voici maintenant une liste de qualités et quelques méthodes à garder à l’esprit quand vous vous lancerez dans le monde toujours plus vaste des polices de caractères pour le web.

## Le guide à tomber par terre pour choisir et associer des polices

Cherchez en premier lieu des polices lisibles —&nbsp;celles que nous utilisons et lisons quotidiennement.

### Contraste

Le contraste est probablement ce que nous devons avoir d’abord à l’esprit. Quand on associe des polices, il est important d’être capable de les distinguer mais le contraste a d’autres fonctions. Des polices très différentes peuvent jouer l’une avec l’autre de façon complémentaire ou au contraire résister l’une à l’autre en créant une certaine tension, alors que des polices qui semblent trop similaires peuvent affaiblir le message et embrouiller le langage du design visuel.

### Les basiques du corps de texte

<figure role="group"><img src="/images/bobulate.png" width="540" height="530" alt="exemple de page bien faite, Bobulate"/><figcaption><a href="http://bobulate.com">Bobulate.com</a> utilise <a href="https://typekit.com/fonts/skolar-web">Skolar</a>, à travers <a href="https://typekit.com">Typekit</a>.</figcaption></figure>

Lorsque je choisis des polices, j’aime commencer par celle que j’utiliserai dans mon corps de texte, car c’est sur elle que le lecteur passera le plus de temps. Préférez des polices robustes et lisibles même dans une taille réduite, et ayant un bon contraste entre les caractères.

Les meilleures polices de texte ont de la personnalité, mais pas suffisamment pour nous distraire du contenu. Les polices à forte personnalité conviennent mieux à l’affichage, car elles peuvent devenir lourdes dans de longs passages.

### Lisez-moi

<figure role="group"><img src="/images/legible.png" width="540" height="167" alt="Deux textes identiques dans deux polices différentes"/><figcaption>Quand le texte s’amenuise, hauteur d’x et contraste sont utiles.</figcaption></figure>

Les conventions habituelles concernant le choix des polices s’appliquent pour l’écran, mais en raison de l’écart de qualité entre l’écran et l’imprimerie, ces conventions devraient être suivies de façon encore plus stricte pour l’écran, et même de manière légèrement exagérée. De grandes [hauteurs d’x](http://fr.wikipedia.org/wiki/Hauteur_d%27x) et un corps de caractère robuste rendront votre texte lisible, même à taille réduite. Par exemple, [Verdana](http://fr.wikipedia.org/wiki/Verdana) et [Georgia](<http://fr.wikipedia.org/wiki/Georgia_(police_d%27écriture)>), toutes deux des polices éprouvées pour l’écran, ont une grande hauteur d’x et un peu plus d’espace entre les lettres ce qui fait que le texte reste clair même lorsqu’il est de petite taille.

### Quel est le message ?

<figure role="group"><img src="/images/grindhouse.jpeg" width="540" height="424" alt="Un pastiche d’affiche de film des années 70"/><figcaption>Cette affiche de film utilise beaucoup de polices et de types, à l’imitation des affiches emblématiques des années&nbsp;70.</figcaption></figure>

Une bonne façon de comprendre ce dont vous réalisez le design est de rédiger une description générale des qualités du message que vous souhaitez faire passer, puis de chercher les polices qui incarnent ces qualités. Si vous êtes dans un design sérieux, une police d’affichage fantaisiste écrite à la main ([scripte](<http://fr.wikipedia.org/wiki/Scripte_(typographie)>)) ne conviendra sans doute pas. Mais une police robuste comme [Franklin Gothic](http://www.myfonts.com/fonts/adobe/franklin-gothic/roman/) pourra transmettre un sentiment de stabilité et de force tout en conférant un air d’importance.

Une seule police peut être assez pour dire ce que vous avez à dire, deux est généralement beaucoup. Si vous en utilisez plus, il faut que ce soit pour de bonnes raisons —&nbsp;comme d’essayer de retrouver l’esthétique de vieilles affiches de [boxe](https://www.google.com/search?q=boxing+poster&tbm=isch), de films ou de musique par exemple.

### Une sans, une sérif

<figure role="group"><img src="/images/bodoni_futura.png" width="540" height="464" alt="Le texte ’Hello’ dans deux polices d’affichage différentes"/><figcaption>Bodoni et Futura ont des formes de lettres très différentes, mais leur structure est basée sur les mêmes principes géométriques.</figcaption></figure>

Un des moyens les plus simples pour créer un équilibre et un contraste en typographie est de choisir une association serif / sans-serif. C’est une combinaison simple et facile à gérer qui peut donner un aspect très cohérent à votre texte si vous choisissez les bonnes polices.

Sans que ce soit une règle absolue, les polices du même designer fonctionnent généralement bien ensemble. Comme dans deux toiles d’un même artiste, vous pouvez parfois voir la main du designer dans deux polices qu’il a réalisées. [Perpetua](http://www.myfonts.com/fonts/adobe/perpetua/regular/) et [Gill Sans](http://www.myfonts.com/fonts/adobe/gill-sans/regular/) d’Eric Gill fonctionnent bien ensemble car elles partagent les mêmes traits et les mêmes courbes. De la même façon, des polices conçues pour être appariées, comme [Meta Sans](http://www.fontshop.com/fontlist/super_families/ff_meta_sans_ff_meta_serif/) et [Meta Serif](http://metaserif.com), s’associent bien.

Utiliser plus d’une police d’[affichage](http://en.wikipedia.org/wiki/Typeface#Display_type) ou [scripte](<http://fr.wikipedia.org/wiki/Scripte_(typographie)>) est en général une mauvaise idée. Il y a des exceptions à chaque règle, mais ces polices ont une telle personnalité qu’une seule suffit et deux ne feraient qu’apporter de la confusion.

Cherchez des polices conçues avec les mêmes principes. Par exemple, bien que d’aspect très différent, [Futura](<http://fr.wikipedia.org/wiki/Futura_(police_d%27écriture)>) et [Bodoni](http://en.wikipedia.org/wiki/Bodoni) forment une superbe association parce qu’elles ont été inspirées par les mêmes formes géométriques simples.

<figure role="group"><img src="/images/baskerville_futura.png" width="540" height="167" alt="Deux polices contrastées"/><figcaption>Baskerville et Futura, "vieux" et "nouveau".</figcaption></figure>

Sinon, il est possible d’associer deux polices divergentes pour créer un nouveau sens ou une juxtaposition intéressante, à condition que le contraste soit fort. Combiner une [police transitionnelle](http://en.wikipedia.org/wiki/Baskerville) comme [Baskerville](http://www.myfonts.com/fonts/adobe/itc-new-baskerville/roman/) avec une police moderne comme Futura peut créer un expression forte à partir de l’idée de vieux vs nouveau.

### Explorez des styles différents

<figure role="group"><img src="/images/proxima_nova.png" width="540" height="278" alt="Les composantes d’une famille de police"/><figcaption>Des familles de polices comme <a href="http://www.marksimonson.com/fonts/view/proxima-nova">Proxima Nova</a> de Mark Simonson contiennent des graisses variées, ouvrant un champ de possibilités typographiques.</figcaption></figure>

Choisir des familles de polices comportant une bonne sélection de [graisses](<http://fr.wikipedia.org/wiki/Graisse_(typographie)>) et de styles vous donne plus de flexibilité sans avoir à recourir à d’autres polices. Utilisez un gras pour contraster avec une police extra-légère ou italique, essayez des majuscules ou des petites capitales avec un peu de d’espacement entre les lettres pour un sous-titre. Si vous choisissez des polices qui ne contiennent qu’une seule graisse, il sera plus difficile de créer le contraste requis pour distinguer visuellement les sections d’un texte.

### À la bibliothèque !

Beaucoup de polices ont un lien avec une période culturelle ou une sous-culture. Selon ce que vous créez, cela peut être un avantage ou un désavantage. Il est toujours bon d’en savoir plus sur une police en s’informant sur le lieu, l’époque, les raisons pour lesquelles elle a été créée. Parfois une police peut avoir le bon &ldquo;look&rdquo; mais évoquer des connotations erronées. Par exemple [Trajan](http://www.myfonts.com/fonts/adobe/trajan/trajan/) a été utilisée pour des films épiques, policiers, romantiques, pour des comédies et... pour [n’importe quel film](http://vimeo.com/432490), bien qu’étant romaine et agée de 1900&nbsp;ans. Les polices en écriture gothique ont longtemps servi aux groupes de heavy metal ou à tout ce qui devait être &ldquo;inquiétant&rdquo; ou &ldquo;dark&rdquo;. Il faut comprendre ces implications culturelles pour les éviter, ou au contraire en faire un bon usage.

### Money, honey

Nous avons été tellement habitués aux polices système que de nombreux professionnels rechignent à l’idée de payer pour des polices. Mais même quand vous utilisez les polices que vous trouvez sur votre ordinateur, vous utilisez des polices que vous avez payées, leur prix est inclus dans celui de votre système d’exploitation. Il y a beaucoup de polices gratuites, mais la plupart le sont pour une bonne raison&nbsp;: il leur manque souvent beaucoup de choses, crénage, ligatures, etc. et elles ne sont pas suffisamment robustes pour être utilisées sérieusement. Les polices solides, comme à peu près tout ce qui est de qualité, coûtent généralement quelque chose.

### Suivez votre instinct

Parfois une paire de polices semble aller bien ensemble, même si vous ne savez pas pourquoi. Les lignes qui précèdent sont des guides, pas des lois&nbsp;: il y a une myriade de polices et de styles, et vous serez parfois surpris de voir des polices s’associer à l’encontre de toute logique.

### Toujours plus loin !

Le nombre de polices disponibles augmente chaque jour. Si votre police favorite n’est pas encore là, elle le sera bientôt, même si le problème des licences n’est pas résolu de sitôt.

Avec l’arrivée de polices toujours plus nombreuses, nous devons comprendre comment elles peuvent servir au mieux nos designs et les choisir sur des critères autres que la seule nouveauté. Si l’essentiel du web est constitué de texte —&nbsp;ce qu’il est&nbsp;— la typographie peut être en effet un outil très puissant.
<span id="1"></span>

---

(1) Cet article en avance sur son temps date de 2009.&nbsp;&nbsp;&nbsp;<a href="#backto1" style="text-decoration:none">↩︎</a>


De la Typographie Web

Des styles de listes créatifs


Pour les designers expérimentés, la mise en forme du texte peut paraître naturelle, mais pour ceux qui commencent dans ce domaine, j'ai dressé une liste des choses à faire (Do's) et à ne pas faire (Don'ts). Ce sera un bon outil pour apprendre, mais aussi une checklist à garder sous le coude pour vos futurs projets. Allons-y :

## Do: établir une hiérarchie typographique

On peut établir une hiérarchie typographique par divers moyens, que ce soit la taille de la police (font-size), sa graisse (font-weight), la couleur et le contraste. Son but est donner une structure à la page et de guider l'utilisateur à travers le contenu. Notre regard parcourt rapidement un texte tel un scan pour en comprendre la structure, et sans une claire hiérarchie, le texte devient beaucoup plus difficile à scanner et donc à lire. Dans l'exemple ci-dessous, le texte de gauche est établi dans une taille et une graisse uniques, du coup on fait difficilement la distinction entre le titre et le corps du texte. Le même texte à droite fait apparaître une hiérarchie typographique claire qui rend aisée la distinction entre ses différents composants. Ici, je n'ai utilisé que la taille et la graisse pour établir une hiérarchie, mais vous pouvez aussi expérimenter la couleur et le contraste.

<figure role='group'><img src="/images/hierarchy.jpg" width="782" height="620" alt=""><figcaption></figcaption></figure>

## DON'T: N'utilisez pas un texte trop petit

Tout le monde n'a pas 10/10 chez l'ophtalmo, il faut vous assurer que votre texte est suffisamment grand pour pouvoir être lu confortablement. Personnellement je recommanderais de ne pas descendre en-dessous de 14pt. (<span id="a1">[1](#f1)</span>)

<figure role='group'><img src="/images/text_size.jpg" width="782" height="620" alt=""><figcaption></figcaption></figure>

## DO: Choisissez une police appropriée pour le corps du texte

c'est un autre facteur important pour la lisibilité de votre texte. Une police comme Satisfy pourrait être en accord avec l'esthétique de votre site, mais son utilisation pour le corps de votre texte aura un impact négatif sur vos utilisateurs parce qu'elle est beaucop plus difficile à lire que votre police sérif ou sans-sérif habituelle. Regardez les exemples ci-dessous et vous remarquerez que la lecture du texte de gauche vous demande plus d'effort que celle du texte de droite.

<figure role='group'><img src="/images/font_choice.jpg" width="782" height="620" alt=""><figcaption></figcaption></figure>

## DON'T: n'utilisez pas trop de polices dans une même page

Ce n'est pas parce que des services comme Typekit ou Google Fonts vous donnent accès à des milliers de polices que vous devez les utiliser sans discernement. Comme le montre l'exemple suivant, si elle n'est pas réalisée à bon escient l'utilisation de polices multiples peut brouiller un message. Je recommande habituellement de ne pas en utiliser plus de 2 ou 3.

<figure role='group'><img src="/images/too_many_fonts.jpg" width="782" height="620" alt=""><figcaption></figcaption></figure>

## DO: faites respirer votre texte

L'absence d'espace entre les lignes de votre texte affecte sa lisibilité car le parcours de vos yeux d'une ligne à l'autre est plus difficile. Ce problème est aisément résolu en augmentant la hauteur de ligne (line-height), mais attention à ne pas exagérer car trop d'espace entre les lignes complique également la lecture.

<figure role='group'><img src="/images/line_height.jpg" width="782" height="620" alt=""><figcaption></figcaption></figure>

## DON'T: n'utilisez pas les majuscules en continu

Les gens ne sont pas habitués à lire de longs morceaux de textes en majuscules, c'est en réalité plus difficile à lire. De plus, un texte tout en lettres capitales a une connotation agressive ou bruyante (QUELQU'UN QUI CRIE !) et si vous l'utilisez dans un email il sera considéré comme un spam. Il est donc important de bien considérer comment et quand vous utilisez les mots en majuscules et de ne le faire qu'avec modération.

<figure role='group'><img src="/images/all_caps.jpg" width="782" height="620" alt=""><figcaption></figcaption></figure>

## DO: Essayez de limiter vos paragraphes à 40-60 caractères par ligne

Si une ligne est trop longue, le lecteur perd progressivement sa concentration et peut avoir des difficultés à passer d'une ligne à l'autre. Si elle est trop courte, l'oeil fait des allers-retours trop fréquents ce qui crée un mauvais rythme. Le lecteur peut aussi commencer à lire la ligne suivante trop tôt et perdre des mots en cours de route. C'est pour cela que l'on considère que la longueur de ligne optimale se situe entre 40 et 60 caractères par ligne. (<span id="a2">[2](#f2)</span>)

<figure role='group'><img src="/images/charactersperline.jpg" width="782" height="620" alt=""><figcaption></figcaption></figure>

## DON'T: n'utilisez pas trop de textes centrés

Un texte centré est difficile à lire parce que les bords de chaque ligne sont inégaux et du coup plus compliqués à scanner par l'oeil car chaque ligne commence à un endroit différent. Les blocs de texte centré sont également plus compliqués à aligner avec d'autres objets dans la page et sont souvent considérés un peu amateurs. Tout comme les textes en majuscules, il faut donc les utiliser avec modération et choisir plutôt le texte aligné à gauche comme votre standard.

<figure role='group'><img src="/images/centered_text.jpg" width="782" height="620" alt=""><figcaption></figcaption></figure>

## DO: assurez-vous d'avoir un contraste suffisant entre texte et background

Le contraste est un aspect de la typographie qui affecte la lisibilité. S'il n'y a pas suffisamment de contraste entre votre texte et le background, le contenu peut devenir illisible.

<figure role='group'><img src="/images/contrast.jpg" width="782" height="620" alt=""><figcaption></figcaption></figure>

---

<br/><br/>

<small>&nbsp;&nbsp;&nbsp;&nbsp;<b id="f1">1</b> - 14pt correspondent à 19px. On voit souvent recommander 16px comme taille idéale, parfois 18px. En tout cas, ne descendez jamais en-deçà de 14px ! NdT: _Voyez aussi <a href="/articles/une-taille-de-police-enfantine">Une taille de police enfantine</a>, qui milite pour des tailles de police plus lisible_.</small> [↩](#a1)

<small>&nbsp;&nbsp;&nbsp;&nbsp;<b id="f2">2</b> - Certains auteurs considèrent plutôt la fourchette 45-75 comme la longueur idéale du texte par ligne.</small> [↩](#a2)


Do's & Don'ts de la Typographie


## Plongée profonde dans CSS Grid

Vous vous rappelez la réponse de <a href="/auteurs/rachel-andrew">Rachel Andrew</a> à la question "utiliser CSS Grid ou Flexbox"&nbsp;? Sinon vous pouvez [regarder la vidéo](https://www.youtube.com/watch?v=MXEzJ-IncX0&feature=youtu.be&t=1274) (en anglais).

<blockquote cite=""><p>Flexbox est fait pour les layouts unidimensionnels, CSS Grid est fait pour les layouts en 2 dimensions</p>
<p><cite><a href="/auteurs/rachel-andrew">Rachel Andrew</a></cite></p></blockquote>

Je suis sûre que beaucoup l'ont réalisé avant moi, mais avant ma relation torride d'un mois avec CSS Grid je ne m'étais pas rendue compte à quel point Flexbox et Grid sont faits pour s'entendre. C'était quelque chose du genre oeufs et bacon, pomme et cannelle, beurre de cacahuète et confiture —&nbsp;ah ça y est, j'ai faim tout d'un coup.

Vous avez peut-être vu que j'ai apporté une contribution au [CSS Reference de Codrops](https://tympanus.net/codrops/css_reference/). Sérieux, c'est une des meilleures choses qui me soit arrivées en 2016. Une des entrées qui manquaient encore était CSS Grid. Avant de m'y mettre, j'avais juste bricolé un peu avec Grid en construisant un prototype pour [Penang Hokkien](http://penang-hokkien.gitlab.io/) utilisant Grid, histoire de voir si le mode vertical fonctionnerait mieux qu'avec Flexbox.

Et puis je me suis attelée au boulot et j'ai écrit [l'article](https://tympanus.net/codrops/css_reference/grid/).

3 semaines plus tard, j'avais l'impression d'avoir fusionné avec [Metal Cactuar](http://exvius.gamepedia.com/Metal_Cactuar) puissance maximum (désolé, _Final Fantasy_ fait partie de ma vie), autrement dit j'étais passé au niveau supérieur.

J'ai passé beaucoup de temps à éplucher la spécification, la lecture des [articles](https://blogs.igalia.com/mrego/) de [Manuel Rego Casasnovas](https://twitter.com/regocas) sur CSS Grid m'a beaucoup aidé ainsi que l'[antisèche de Rachel Andrew](https://rachelandrew.co.uk/css/cheatsheets/box-alignment) à un moment de grande confusion.

Un conseil : quand vous essayez d'apprendre une nouvelle propriété CSS, ayez toujours sous la main un template vide avec lequel vous pourrez expérimenter. Ça m'a vraiment été utile avec une propriété aussi nouvelle que Grid. Je sais, il y a aussi [Codepen](https://codepen.io/) et tout, mais rien ne vaut un template vierge pour une expérimentation libre de toute distraction.

## Exemples et démos

Pour analyser toutes les propriétés, j'ai commencé à construire des grilles très basiques, juste pour voir le fonctionnement des valeurs de propriétés. Si vous avez regardé la syntaxe de `grid-template-rows` dans la spécification, vous savez que ce n'était pas une tâche triviale. Grid lui-même n'est compliqué à apprendre. Mais comme il a été conçu pour être flexible et puissant, il vous faudra un peu de temps pour rentrer dans son fonctionnement.

Quelques-unes des grilles basiques se sont transformées en démos. Certaines trouvaient leur inspiration dans des conversations avec des membres du [CSS Layout Club](https://www.meetup.com/fr-FR/CSS-Layout-Club/). J'ai aussi glané quelques idées dans le cours de Coursera [Ideas from the History of Graphic Design](https://www.coursera.org/learn/graphic-design-history), il y a plein de belles choses (la semaine dernière était consacrée au [Bauhaus](https://fr.wikipedia.org/wiki/Bauhaus)).

Je suis tombée sur cette page de [Malerei, Fotografie, Film](http://bibliothequekandinsky.centrepompidou.fr/imagesbk/RLPF727/M5050_X0031_LIV_RLPF0727.pdf) par [László Moholy-Nagy](https://fr.wikipedia.org/wiki/L%C3%A1szl%C3%B3_Moholy-Nagy), dont la mise en page utilisait une grille originale et l'idée m'est venue qu'on pouvait peut-être la réaliser en CSS...

<figure role="group"><img src="/images/126-640.jpeg" width="640" height="804" alt="grille texte et images, texte horizontal et vertical, symboles, fortes séparations"/><figcaption>Page 126 de Malerei, Fotografie, Film</figcaption></figure>

## Le Bauhaus dans mon navigateur

Voici comment j'ai procédé. J'ai dessiné les lignes de la grille par-dessus l'image en utilisant Sketch, de façon à me faire une idée du nombre de colonnes nécessaires. Dans cet exemple, c'était 1 large colonne suivie de 5 colonnes plus étroites de largeur égale, et j'ai laissé ensuite le navigateur se débrouiller avec la hauteur des rangées.

```
.grid {
  display: grid;
  grid-template-columns: 30% 9% 9% 9% 9% 9%;
  justify-content: center; /* pour justifier la grille au centre du container */
}
```

Ensuite, il y a eu tout le code de placement avec les propriétés `grid-row` et `grid-column`. Mais si vous regardez à nouveau l'image originale, vous verrez que le contenu de chaque cellule a son propre alignement. Par exemple, celui de la première cellule est à droite, celui de la deuxième est en bas à gauche, etc.

👉🏿&nbsp;_NdT&nbsp;: pour consulter les définitions et utilisation des propriétés, voyez l'article [CSS Grid Layout, guide complet](/articles/css-grid-layout-guide-complet))_.

Mon premier réflexe, vu que j'avais cet alignement de boîtes, a été d'appliquer `justify-self` et `align-self` là où c'était nécessaire, pour ajuster les positions de contenu à l'intérieur de chaque cellule. Bien tenté, mais à côté... Le problème est que ces deux propriétés affectent la quantité d'espace occupée par la cellule.

Le design du Bauhaus présente des bordures noires très frappantes autour de chaque cellule. La propriété `border` s'applique à l'item de grille. Toute propriété d'alignement de grille autre que `stretch` adaptera la dimension de l'item grid à son contenu. Toute bordure appliquée à un item grid s'adaptera au contenu de l'item, par conséquent je ne pouvais pas procéder ainsi.

<figure><img width="760" height="509" src="/images/fit.svg" alt="les bordures sont sur les items, mais les dimensions de l'item ne sont pas celles de la cellule"/><figcaption>Ce ne sont pas les bordures souhaitées !</figcaption></figure>

## Flexbox à la rescousse

Par défaut, tous les items grid se comportent comme si leur alignement avait été réglé sur `stretch` sur chaque axe. J'ai donc laissé tomber, pour permettre à la grille de ressembler à une grille, et à la place, j'ai appliqué `display: flex` à l'item grid, ce qui m'a permis d'utiliser les propriétés d'alignement flex sur le container flex, pour positionner le contenu de mon item grid.

<figure><img width="760" height="507" src="/images/flex.svg" alt="les bordures correspondent aux lignes horizontales et verticales de la grille, et ne recouvrent pas les items lorsque ceux-ci s'étendent sur plusieurs cellules"/><figcaption>Ah voilà, cette fois-ci c'est bon.</figcaption></figure>

```
.grid__item:nth-child(5) {
  grid-row: 3 / 5;
  border-right: 1em solid;
  padding: 1em;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
```

Le code ressemble à ce qui précède, mais ce que je veux souligner avant tout c'est qu'il s'agit d'une formidable technique pour la mise en page. Grid pour l'organisation générale, et Flexbox pour les ajustements spécifiques. Voici ce que ça donne [sur Codepen](http://codepen.io/huijing/pen/PpqomV) si vous voulez voir le résultat final.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_PpqomV" src="//codepen.io/huijing/embed/PpqomV?height=600&amp;theme-id=light&amp;slug-hash=PpqomV&amp;user=huijing&amp;default-tab=result" scrolling="no" frameborder="0" height="600" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="http://codepen.io/huijing/pen/PpqomV/">
  Malerei, Fotografie, Film (pg. 126)</a> de Chen Hui Jing dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Bonus : réaliser des formes en CSS

À part les deux photos, tout ce qui est sur la page est réalisé en CSS, autrement dit la flèche et la roue dentée sont des `div` auxquelles j'ai appliqué des styles. J'aime faire des formes en CSS, avec une `div` unique si possible. Il suffit pour cela de quelques propriétés pratiques, `box-shadow`, `border` et [les pseudo-éléments](/articles/les-pseudo-elements-css-before-et-after/).

### La flèche

Les flèches sont assez simples à réaliser. Il vous faut juste un pseudo-élément pour la pointe. Le corps de la flèche est une simple `div` à laquelle on donne une `position: relative` de façon à positionner la pointe par rapport au corps. La pointe est un triangle, qu'on peut réaliser grâce à [l'astuce de la bordure](http://stackoverflow.com/questions/27492191/how-to-make-a-fancy-arrow-using-css).

```
.arrow {
  width: 0.5em;
  height: 65%;
  background-color: #000;
  position: relative;

  &::after {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1em;
    border-style: solid;
    border-width: 1em 1em 0 1em;
    border-color: #000 transparent transparent transparent;
  }
}
```

### La roue dentée

Là, c'est un peu plus compliqué. Le corps de la roue est un cercle, réalisé via `border-radius: 50%`, mais les dents vont nous demander un peu de travail. Je n'ai pas pu le faire avec une seule `div` cette fois-ci (mais si quelqu'un y arrive, contactez-moi). J'ai ajouté une `div` interne. La bonne nouvelle c'est que toutes les dents ont une forme identique, donc l'astuce `box-shadow` peut être utilisée ici.

```
.gear {
  height: 5em;
  width: 5em;
  background-color: #000;
  border-radius: 50%;
  position: relative;

  &::before,
  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    content: '';
  }

  &::before {
    height: 3em;
    width: 1em;
    box-shadow: 0em -3em 0em 0em #000, 0em 3em 0 0em #000;
  }

  &::after {
    height: 1em;
    width: 3em;
    box-shadow: 3em 0 0em 0em #000, -3em 0 0 0em #000;
  }
}
```

Le corps de la roue et les 4 dents directionnées comme les aiguilles d'une boussole ont été réalisées avec une seule `div` et 2 pseudo-éléments. Pour les 4 autres dents, j'ai utilisé la `div` intérieure avec des pseudo-éléments et fait tourner les `box-shadow`. Je dois toujours résoudre le problème de `transform-origin` car je trouve qu'il y a encore une certaine asymétrie.

```
.inner-gear {
  height: 2em;
  width: 2em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #e1e1d5;

  &::before,
  &::after {
    position: absolute;
    display: block;
    content: '';
  }

  &::before {
    height: 3em;
    width: 1em;
    box-shadow: 0em -3em 0em 0em #000, 0em 3em 0 0em #000;
    transform: rotate(45deg);
    transform-origin: (75% 75%);
  }

  &::after {
    height: 1em;
    width: 3em;
    box-shadow: 3em 0 0em 0em #000, -3em 0 0 0em #000;
    transform: rotate(45deg);
    transform-origin: (25% 75%);
  }
}
```

### Conclusion

CSS Grid est vraiment génial, et nous sommes nombreux à le penser. [Jen Simmons](http://jensimmons.com/) a compilé une liste de bonnes ressources Grid, faites un tour sur [Learn CSS Grid](http://jensimmons.com/post/feb-27-2017/learn-css-grid) et essayez de construire quelque chose avec Grid. Vous ne le regretterez pas&nbsp;!


Grid et Flexbox, le duo gagnant

Guide des animations SVG (SMIL)


## Logique vs Design

Quand j’étais tout jeune designer, je faisais confiance à Photoshop ou CSS pour me dire si quelque chose n’allait pas. Si Photoshop indiquait que deux formes étaient alignées, alors elles étaient alignées. Si elles avaient les mêmes dimensions, idem, et si deux couleurs avaient les mêmes valeurs hexadécimales, alors elles avaient le même rendu couleur.

Cette approche était logique, pourtant elle est incorrecte.

Les calculs de nos applications sont évidemment exacts, mais les softwares ne peuvent pas percevoir les formes, les couleurs, les dimensions de la même façon que les êtres humains —&nbsp;ils ne peuvent pas comprendre le _contexte_ d’un objet en relation à d’autres, ou le contexte d’un langage visuel.

L’esprit humain juge et décide en fonction d’un contexte. Comprendre ces différences subtiles et savoir ajuster notre travail en fonction nous permet d’améliorer notre design —&nbsp;peu de gens le verront, mais par contre beaucoup s’en rendront compte si nous n’y avons pas fait suffisamment attention.

Voyons quelques exemples pratiques.

<h2>Alignement et poids visuel</h2>

Les ordinateurs ne peuvent savoir où se situe le poids d’un objet, ils ne connaissent que la largeur, la hauteur ou les positions x & y. Notre travail de designer est de compenser cela par ce qu’on appelle l’ajustement optique.

Dans une icône _Play_, le triangle est centré dans le cercle, n’est-ce pas&nbsp;? Eh bien non, si l’on trace un rectangle sur le triangle, on s’aperçoit qu’il est excentré.

<figure role="group"><img src="/images/play-icon-compressor.jpeg" width="900" height="506" alt=""/><figcaption>L’icône de gauche apparaît centrée, alors qu’en réalité on l’a décalée vers la droite.</figcaption></figure>

À gauche, l’icône n’a pas l’air excentrée, et pourtant elle l’est (et _pas qu’un peu_…), pourquoi&nbsp;? À cause du poids visuel. Le poids ou la masse du triangle se situe dans sa partie gauche, ce qui crée une illusion d’optique le tirant vers la gauche (comme on le voit dans le triangle “mathématiquement correct” à droite).

Pour résoudre ce problème, nous devons déplacer le triangle vers la droite jusqu’à ce qu’il ait _l'air_ centré.

<h2>La couleur</h2>

Les ajustements optiques de couleurs sont plus subtils. Là encore, il s’agit du poids de l’objet et de la quantité de couleur qui apparaît.

En résumé : le même vert, selon qu’il est utilisé pour un texte ou pour un remplissage d’icône, paraîtra plus ou moins clair.

<figure role="group"><img src="/images/heart-recommend-compressor.jpeg" width="900" height="506" alt=""/><figcaption>La combinaison de gauche utilise la même valeur hexadécimale, celle de droite est ajustée en augmentant la quantité de noir dans le texte.</figcaption></figure>

C’est subtil, mais vous pouvez observer que l’icône est plus “lourde” que le texte et que ce dernier semble d’un vert plus clair. Pour ajuster les deux, il convient soit d’éclaircir l’icône, soit d’assombrir le texte -&nbsp;le mieux étant de choisir la couleur qui respectera les critères d’accessibilité. Je recommande d’utiliser les valeurs de couleurs HSB (Photoshop, Sketch ou HSL (CSS) dans vos applications de design. Parmi tous leurs avantages, la possibilité d’ajuster facilement la valeur “B” ou “L” (luminosité).

<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : [Dudley Storey](/auteurs/dudley-storey) a écrit deux articles instructifs sur HSL, dont “[3 raisons d’utiliser HSL pour vos couleurs](/3-raisons-dutiliser-hsl-pour-vos-couleurs/)”_.

<figure role="group"><img itemprop="url" src="/images/heart-recommend-2-compressor.jpeg" width="900" height="481" alt=""/><figcaption>L’ajustement se fait à vue, simplement en modifiant la valeur de “B”.</figcaption></figure>

<h2>L’échelle</h2>

Par échelle, on entend la façon dont notre cerveau perçoit la taille des objects, texte y compris. Si nous traduisons cela en termes de cercles et de carrés, un carré de 120&nbsp;&times;&nbsp;120&nbsp;pixels a une surface supérieure à celle d’un cercle de diamètre égal à 120&nbsp;pixels, le cercle doit donc être légèrement plus grand pour pouvoir compenser.

<figure role="group"><img src="/images/cercle-and-rectangle.jpeg" width="900" height="506" alt=""/><figcaption>À gauche, les deux formes ont des dimensions de 120px, à droite le cercle a un diamètre de 126px.</figcaption></figure>

Comme pour les autres ajustements, on fait dans la subtilité, mais ces modifications aident vraiment votre design à avoir l’air _juste_. C’est souvent un réglage fin d’éléments —&nbsp;comme de modifier des valeurs un pixel à la fois jusqu’à parvenir au bon _feeling_.

<figure role="group"><img src="/images/x-height-revealed-compressor.jpeg" width="900" height="506" alt=""/><figcaption>Le haut et le bas des formes incurvées de Didot dépassent la hauteur d’x et la ligne de base.</figcaption></figure>

C’est également vrai pour la typographie, avec les dépassements (_overshoots_) des lettres arrondies (<i>NdT : Tobias Frere-Jones a écrit deux superbes articles à ce sujet, [Mécanique des polices de caractères, 1](/fonctionnement-des-polices-de-caracteres-1/) et [Mécanique des polices de caractères, 2](/mecanique-des-polices-de-caracteres-2-2/)</i>). Si vous écrivez un texte en [Garamond](http://fr.wikipedia.org/wiki/Garamond_%28police_d%27%C3%A9criture%29) et que vous représentez la [ligne de base](http://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29) et la [hauteur d’x](http://fr.wikipedia.org/wiki/Hauteur_d%27x) du texte, vous verrez les dépassements des formes arrondies. Sans eux, les caractères donneraient l’impression d’être plus petits que leurs voisins.

<h2>Lettres capitales</h2>

Un dernier exemple rapide d’ajustement optique nécessaire&nbsp;: lorsqu’un texte en lettres capitales est placé à côté d’un texte en bas-de-casse. Le premier est proéminent et doit être ajusté pour équilibrer l’ensemble.

<figure role="group"><img src="/images/upper-case-compressor.jpeg" width="900" height="506" alt=""/><figcaption>Dans l’exemple du bas, le texte en capitales a été ajusté de 2px pour donner l’impression qu’il a la même taille.</figcaption></figure>

Sauf si l’objectif de ce design est précisément de donner plus d’importance au texte en lettres capitales, celui-ci doit toujours être réduit de quelques pixels, par exemple en passant de 16 à 14 pixels ou de 12 à 11 pixels.

Lorsqu’on travaille sur une interface importante, chacun de ces petits détails s’accumule et affecte la sensation générale qui se dégage du site.

Une fois que vous l’aurez intégré à votre workflow, réduire un texte de 2 pixels ou déplacer un triangle de 10 pixels ne prendra que quelques instants, mais c’est ce qui rendra votre design proche de la perfection.

<figure role="group"><img src="/images/eye-compressor.jpeg" width="900" height="506" alt="un oeil"/></figure>

Nous ne devons pas compter sur les seuls ordinateurs pour faire tout le travail pour nous, mais également sur nos yeux et notre instinct. Le regard des designers est plus aigu, leur instinct plus aiguisé à mesure qu’ils gagnent en expérience, c’est sur eux que doivent s’appuyer nos décisions.


L'ajustement optique


95% de l’information sur le web est écrite. En bonne logique tout designer web devrait avoir de solides connaissances dans la principale discipline consacrée à donner forme à l’information écrite, à savoir la Typographie.

En 1969, le célèbre typographe suisse [Emil Ruder](http://fr.wikipedia.org/wiki/Emil_Ruder) écrivait au sujet des matériaux imprimés de son époque ce qu'on pourrait dire de nos sites web contemporains&nbsp;:

<blockquote cite=""><p>De nos jours, nous sommes inondés par un tel flot d'information imprimée que la valeur du travail individuel a été dépréciée, nos contemporains harassés n'étant plus à même de suivre tout ce qui est imprimé aujourd’hui. C’est la tâche du typographe de diviser, d’organiser et d’interpréter cette masse d'information imprimée pour faire en sorte que le lecteur trouve ce qui l’intéresse.</p>
<p><cite><a href="http://fr.wikipedia.org/wiki/Emil_Ruder">Emil Ruder</a></cite></p></blockquote>

Avec un peu d’imagination (remplacez imprimé par web), cela ressemble à la description de poste d’un designer de l’information. C’est le rôle d’un tel designer de &ldquo;diviser et d’organiser et d’interpréter cette masse d'information imprimée pour faire en sorte que le lecteur trouve ce qui l’intéresse&rdquo;.

## Micro-Typographie vs Macro-Typographie

Les typographes distinguent la macro-typographie et la micro-typographie. La micro typographie traite des aspects détaillés des caractères et de l'espacement, en se concentrant sur la lisibilité du texte :

- Le suivi et la largeur des glyphes
- Protrusion, crénage de marge ou [exdentation](https://en.wikipedia.org/wiki/Hanging_punctuation)
- Augmentation ou diminution ponctuelle de l'espacement des mots
- Le découpage des mots par l'espacement des mots ou d'autres espaces blancs.

Alors que la micro-typographie est difficile à contrôler dans un support _liquide_ et sans format comme le Web, la macro-typographie couvre de nombreux aspects de ce que nous appelons aujourd'hui la conception Web&nbsp;:

- Le format : Les dimensions de base dans lesquelles nous plaçons les caractères
- La grille : La taille des caractères, la proportion des colonnes
- La hiérarchie : Comment les différentes tailles de caractères et le formatage sont liés les uns aux autres.

Ainsi, la macro-typographie (structure générale d’un texte) par contraste avec la micro-typographie (aspects détaillés des caractères et de l’espacement des mots) couvre beaucoup d’aspects du &ldquo;design de l’information&rdquo;.

Aujourd’hui, les designers de l’information font pour ainsi dire les tâches que réalisaient les typographes il y a 30 ans&nbsp;:

> <i>La typographie a un objectif simple, qui est de transmettre l’information par écrit. Il n’existe pas d’argument ou de considération qui puisse absoudre la typographie de ce devoir. Un document imprimé qui ne peut être lu est un produit sans objet</i>.

Optimiser la typographie consiste à optimiser la lisibilité, l’accessibilité, l’usabilité, l’équilibre graphique général. Organiser des blocs de textes et les combiner avec des images, n’est-ce pas ce font que les graphistes, les spécialistes de l’usabilité, les architectes de l’information&nbsp;? Alors pourquoi est-ce un sujet aussi négligé&nbsp;?

## Trop peu de polices ? Une résolution trop faible ?

Le principal argument –&nbsp;ou la principale récrimination&nbsp;– contre la discipline typographique en ligne est qu’il y a trop peu de polices de caractères disponibles. Le deuxième argument est que la résolution de l’écran est trop faible, ce qui rend difficile la lecture d’un texte pixélisé ou de polices anticrénelées.

Le premier argument est dénué de pertinence&nbsp;: à l’époque de la Renaissance italienne, les typographes n’avaient qu’une seule fonte pour travailler, et pourtant cette période a produit quelques-unes des plus belles réalisations typographiques&nbsp;:

<figure role="group"><img src="/images/garamond-specimen-compressor.jpeg" width="1000" height="1616" alt="une magnifique typographie"/></figure>

Le typographe ne devrait pas trop s’en faire quant au choix de polices dont il dispose. En fait, ce choix ne devrait pas être sa préoccupation principale. Il devrait utiliser ce qui est disponible et faire au mieux.

## Choisir une police n’est pas de la typographie

Le second argument ne vaut pas mieux. Au commencement de l’imprimerie, la qualité des caractères d’impression était bien pire que ce que nous voyons sur les écrans actuels. En outre, si elles sont utilisées professionnellement, les polices numériques sont tout à fait lisibles.

Le design d’information ne consiste pas à utiliser de bonnes polices mais à utiliser une bonne typographie -&nbsp;ce qui est très différent. N’importe qui peut utiliser des polices, quelques-uns savent en choisir de bonnes, mais rares sont ceux qui maîtrisent la typographie.

## Considérez le texte comme une interface utilisateur

C’est vrai, la diversité de rendu des polices selon les navigateurs et les plateformes est agaçante et, oui, les problèmes de résolution rendent toute concentration problématique au delà de cinq minutes. Mais enfin, cela fait partie du travail d’un designer de rendre les textes faciles et agréables à lire sur la plupart des navigateurs et des plateformes. Un interlignage correct, un bon espacement des caractères et des mots, des espaces blancs et l’utilisation parcimonieuse de la couleur, tout ceci aide à la lisibilité. Mais ce n’est pas tout. Un grand designer web sait comment travailler avec un texte, pas seulement en tant que contenu mais aussi comme [une interface utilisateur](http://www.cameronmoll.com/archives/001266.html). Jetez un coup d’œil au site de [Khoi Vinh](http://www.subtraction.com), et vous comprendrez ce que je veux dire (<span aria-hidden="true" data-icon="&#9758;"></span> _NdT: la nouvelle version du site est encore plus parlante&nbsp;!_)&nbsp;:

<figure  role="group"><img src="/images/koih-compressor.gif" alt="Le site de Khoi Vinh"/></figure>

Des exemples plus célèbres de sites [non ornementaux](http://fr.wikipedia.org/wiki/Ornement_et_Crime) qui traitent le texte comme une interface sont&nbsp;: [Google](http://www.google.com), [Ebay](http://www.ebay.fr), [Craigslist](http://www.craigslist.fr), [Youtube](http://www.youtube.com), [Flickr](http://www.flickr.com), [Digg](http://digg.com), [Reddit](http://www.reddit.com), [Delicious](https://delicious.com). Contrôler la typographie n’est pas seulement une nécessité de base du design, savoir comment traiter un texte comme une interface utilisateur est un facteur-clé de succès pour un site web. Ceux qui réussissent ont su créer à la fois une interface simple ET une identité forte. Mais c’est un autre sujet.

---

#### Suggestions de lectures&nbsp;:

**Robert Bringhurst** [The Elements of Typographic Style](https://www.amazon.com/gp/product/0881792128/ref=as_li_tl?ie=UTF8&tag=informationar-20&camp=1789&creative=9325&linkCode=as2&creativeASIN=0881792128&linkId=a7034de643a3a98ca8083ac9a22e6cf3) : le célèbre typographe Robert Bringhurst apporte de la clarté à l'art de la typographie avec ce guide de style magistral. L'endroit idéal pour commencer votre voyage dans les trous de lapin de la typographie.  
**Emil Ruder**, [Typographie](http://www.amazon.fr/Typographie-Emil-Ruder/dp/3721200438/ref=sr_1_1?s=books&ie=UTF8&qid=1375821709&sr=1-1&keywords=emil+ruder)&nbsp;: une bible pour des générations de typographes et de graphistes qui y ont appris les fondamentaux. Ruder, l'un des grands typographes du XXe siècle était un pionnier. Il abandonna les règles conventionnelles de sa discipline et les remplaça par de nouvelles règles qui satisfaisaient aux exigences de la nouvelle typographie.  
**Kimberly Elam**, [Grid Systems : Principles of Organizing Type](http://www.amazon.com/o/ASIN/1568984650) (en anglais)&nbsp;: les systèmes de grilles sont le fondement de tout design typographique, et pourtant ils passent souvent pour des solutions rigides et convenues. Peu de designers comprennent réellement la complexité et les richesses potentielles de la composition à partir de grilles (éventuellement subverties...)  
**Muller-Brockmann**, [Grid Systems : A visual communication manual for graphic designers, typographers and three dimensional designers](http://www.amazon.com/Systems-Graphic-Design-Josef-Muller-Brockmann/dp/3721201450/sr=1-2/qid=1162128429?ie=UTF8&s=books) (en anglais et allemand). Par un professionnel pour les professionnels, voici l'ouvrage définitif sur l'utilisation de systèmes de grilles pour les graphistes. Bien qu'écrite en 1961, cette interprétation est toujours utile aujourd'hui, même pour le design assisté par ordinateur.  
**Gerrit Noordzij**, [The Stroke: Theory of Writing](https://www.amazon.fr/gp/product/0907259308/ref=as_li_tl?ie=UTF8&tag=informationar-20&camp=1789&creative=9325&linkCode=as2&creativeASIN=0907259308&linkId=956f8abcec1264b9629dd257c98d52b8), The Stroke propose une véritable théorie de l'écriture, c'est-à-dire des concepts qui se cachent derrière les lettres sur la page, qu'elles soient écrites au stylo, au crayon ou au pinceau. The Stroke ne s'intéresse pas à la calligraphie d'art et aux belles formes, c'est une description du phénomène des lettres et de la manière dont elles sont réalisées dans l'écriture. Partant de principes de base, Gerrid Noordzij commence par l'espace blanc qui crée la définition en entourant les lettres. Puis, à l'aide de concepts géométriques simples, il décrit dans les moindres détails comment les traits de l'écriture peuvent être formés.


Le web, 95% de typographie


Juste pour le plaisir (et de manière fortuite pour le [week end des tuiles rétro sur CodePen](http://codepen.io/collection/Dmrpwb/)), j'ai réalisé deux nouveaux backgrounds SVG dérivés des motifs géométriques traditionnels japonais.

<h2>Seigaiha</h2>

La traduction littérale de [seigaiha](https://www.jhinparis.com/tissusjaponaisgeometriques/k2ke5csnq9c1nwyxd48xr7gl24c3a2) est “mer bleue et vagues”. À l'origine, ce motif était utilisé dans les cartes chinoises pour représenter l'océan. Importé au Japon un peu avant le 6e siècle de notre ère, il apparaît sur des figurines funéraires [haniwa](https://fr.wikipedia.org/wiki/Haniwa). Il existe de nombreuses variantes du motif qui sont utilisées partout&nbsp;: impressions géométriques, incrustations, ou dessiné au rateau dans les jardins japonais.

<h3>Le SVG</h3>

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
      <defs>
        <pattern id="waves" patternUnits="userSpaceOnUse" width="230.4" height="221.7" patternTransform="scale(.5)">
        <defs>
          <g id="wave" stroke="#000080" fill="none">
            <circle fill="#FFF" stroke-width="8" r="106.7" />
            <circle stroke-width="9" r="81" />
            <circle stroke-width="8" r="55.3" />
            <circle stroke-width="7" r="32.5" />
            <circle stroke-width="7" r="13.2" />
          </g>
        </defs>
        <use x="229.9" y="0.7" xlink:href="#wave" />
        <use x="114.9" y="55.3" xlink:href="#wave" />
        <use x="-114.9" y="55.3" xlink:href="#wave" />
        <use x="0" y="111.3" xlink:href="#wave" />
        <use x="229.9" y="111.3" xlink:href="#wave" />
        <use x="114.9" y="166.4" xlink:href="#wave" />
        <use x="-114.9" y="166.4" xlink:href="#wave" />
        <use x="0" y="222.2" xlink:href="#wave" />
        <use x="345.1" y="166.4" xlink:href="#wave" />
        <use x="229.9" y="222.2" xlink:href="#wave" />
        <use x="114.9" y="277.2" xlink:href="#wave" />
        <use x="-114.9" y="277.2" xlink:href="#wave" />
        <use x="345.1" y="277.2" xlink:href="#wave" />
        </pattern>
      </defs>
     <rect width="100%" height="100%" fill="url(#waves)" />
    </svg>

<div style="margin-bottom: 2em;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"><defs><pattern id="waves" patternUnits="userSpaceOnUse" width="230.4" height="221.7" patternTransform="scale( .5)"><defs><g id="wave" stroke="#000080" fill="none"><circle fill="#FFF" stroke-width="8" r="106.7" /><circle stroke-width="9" r="81" /><circle stroke-width="8" r="55.3" /><circle stroke-width="7" r="32.5" /><circle stroke-width="7" r="13.2" /></g></defs><use x="229.9" y="0.7" xlink:href="#wave" /><use x="114.9" y="55.3" xlink:href="#wave" /><use x="-114.9" y="55.3" xlink:href="#wave" /><use x="0" y="111.3" xlink:href="#wave" /><use x="229.9" y="111.3" xlink:href="#wave" /><use x="114.9" y="166.4" xlink:href="#wave" /><use x="-114.9" y="166.4" xlink:href="#wave" /><use x="0" y="222.2" xlink:href="#wave" /><use x="345.1" y="166.4" xlink:href="#wave" /><use x="229.9" y="222.2" xlink:href="#wave" /><use x="114.9" y="277.2" xlink:href="#wave" /><use x="-114.9" y="277.2" xlink:href="#wave" /><use x="345.1" y="277.2" xlink:href="#wave" /></pattern></defs><rect width="100%" height="100%" fill="url(#waves)" /></svg></div>

Le balisage utilise pour l'essentiel la même idée que mon [design de lignes SVG](/articles/diagonales-et-motifs-svg-en-background/), mais il va un peu plus loin&nbsp;: dans ce cas, j'utilise `defs` à l'intérieur de `defs` pour créer le motif initial. Ce qu'il faut retenir&nbsp;:

1. Le `fill` et le `stroke` par défaut des [cercles](/articles/les-bases-de-svg-cercles-et-ellipses/) ont été déplacés dans un élément groupe pour l'efficacité.
2. Les `cx` et `cy` des cercles n'ont pas besoin d'être définis car le motif lui-même n'est jamais rendu directement&nbsp;; les cercles sont supposés être centrés sur `0,0`.
3. Le plus grand cercle extérieur du motif a un background blanc, qui sert à le remplir et à créer un effet de recouvrement.
4. Le `use` du motif du cercle est disposé en couches allant du dessus vers le dessous à l'intérieur de la surface définie par les `width` et `height` du motif.
5. L'échelle du motif, et donc le nombre de fois qu'il se répète sur la page, est contrôlée par la valeur `scale` de `patternTransform`.

<h2>Asanoha</h2>

Un dessin géométrique régulier tracé à partir d'un motif de feuilles de chanvre qui se recouvrent. Il est utilisé pour les kimono de tous les jours et (traditionnellement) pour les langes des bébés. On le comprend plus aisément si on le voit comme un motif d'étoile à 6 pointes, chacune étant reliée au centre de l'étoile adjacente.

<figure role="group"><img src="/images/asanoha-visualisation-compressor.jpeg" width="768" height="466" alt=""/><figcaption>Visualisation du motif asanoha comme des étoiles à 6 pointes qui se recouvrent les unes les autres.</figcaption></figure>

<h3>Le SVG</h3>

Le motif de cet exemple consiste en un simple [polygone](/articles/les-bases-de-svg-polygones/) couplé à des [lignes et polylignes](/articles/les-bases-de-svg-lignes-simples-et-multiples/)&nbsp;:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <defs>
      <pattern id="ashano" patternUnits="userSpaceOnUse" width="119" height="103" patternTransform="scale(1)">
      <g stroke="#231F20" fill="none">
        <polygon points="89.3,0 89.3,34.4 119,51.6 89.3,68.7 89.3,103.1 59.5,85.9 29.8,103.1 29.8,68.7 0,51.5 29.8,34.4 29.8,0 59.5,17.2"/>
        <line x1="59.5" y1="17.2" x2="59.5" y2="85.9"/>
        <line x1="29.8" y1="103.1" x2="89.3" y2="0"/>
        <line x1="29.8" y1="0" x2="89.3" y2="103.1"/>
        <line x1="0" y1="51.5" x2="119" y2="51.5"/>
        <line x1="29.8" y1="68.7" x2="89.3" y2="34.4"/>
        <line x1="89.3" y1="68.7" x2="29.8" y2="34.4"/>
        <line x1="29.8" y1="0" x2="89.3" y2="0"/>
        <line x1="89.3" y1="0" x2="119" y2="51.6"/>
        <line x1="119" y1="51.6" x2="89.3" y2="103.1"/>
        <line x1="89.3" y1="103.1" x2="29.8" y2="103.1"/>
        <polyline points="89.3,103.1 119,85.9 119,51.5"/>
        <line x1="89.3" y1="103.1" x2="119" y2="103.1"/>
        <polyline points="119,51.5 119,17.2 89.3,0"/>
        <line x1="89.3" y1="0" x2="119" y2="0"/>
        <line x1="119" y1="51.5" x2="89.3" y2="0"/>
        <polyline points="29.8,0.1 0,17.2 0,51.6"/>
        <line x1="0" y1="0" x2="29.8" y2="0.1"/>
        <line x1="29.8" y1="0.1" x2="0" y2="51.6"/>
        <polyline points="0.1,51.5 0.1,85.9 29.8,103.1"/>
        <line x1="0" y1="103" x2="29.8" y2="103.1"/>
        <line x1="0.1" y1="51.5" x2="29.8" y2="103.1"/>
      </g>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#ashano)" />
    </svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"><defs><pattern id="ashano" patternUnits="userSpaceOnUse" width="119" height="103" patternTransform="scale(1)"><g stroke="#231F20" fill="none"><polygon points="89.3,0 89.3,34.4 119,51.6 89.3,68.7 89.3,103.1 59.5,85.9 29.8,103.1 29.8,68.7 0,51.5 29.8,34.4 29.8,0 59.5,17.2"/><line x1="59.5" y1="17.2" x2="59.5" y2="85.9"/><line x1="29.8" y1="103.1" x2="89.3" y2="0"/><line x1="29.8" y1="0" x2="89.3" y2="103.1"/><line x1="0" y1="51.5" x2="119" y2="51.5"/><line x1="29.8" y1="68.7" x2="89.3" y2="34.4"/><line x1="89.3" y1="68.7" x2="29.8" y2="34.4"/><line x1="29.8" y1="0" x2="89.3" y2="0"/><line x1="89.3" y1="0" x2="119" y2="51.6"/><line x1="119" y1="51.6" x2="89.3" y2="103.1"/><line x1="89.3" y1="103.1" x2="29.8" y2="103.1"/><polyline points="89.3,103.1 119,85.9 119,51.5"/><line x1="89.3" y1="103.1" x2="119" y2="103.1"/><polyline points="119,51.5 119,17.2 89.3,0"/><line x1="89.3" y1="0" x2="119" y2="0"/><line x1="119" y1="51.5" x2="89.3" y2="0"/><polyline points="29.8,0.1 0,17.2 0,51.6"/><line x1="0" y1="0" x2="29.8" y2="0.1"/><line x1="29.8" y1="0.1" x2="0" y2="51.6"/><polyline points="0.1,51.5 0.1,85.9 29.8,103.1"/><line x1="0" y1="103" x2="29.8" y2="103.1"/><line x1="0.1" y1="51.5" x2="29.8" y2="103.1"/></g></pattern></defs><rect width="100%" height="100%" fill="url(#ashano)" /></svg>

Dans de prochains articles j'espère passer plus de temps à recréer des motifs japonais et arabes en SVG.


Motifs SVG japonais

Pas besoin de framework UI


La [méthode HSL](http://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re) de création de couleurs en CSS3 est très bien supportée par les navigateurs modernes mais quelque peu négligée par les codeurs, en raison sans doute de sa différence avec [les autres modèles](/tags/couleur/)&nbsp;:

- Il est facile de traduire d’[hexadécimal](http://fr.wikipedia.org/wiki/Noms_de_couleur_du_Web) en [RGB](http://fr.wikipedia.org/wiki/Rouge_vert_bleu), mais plus difficile de traduire de ces modèles vers HSL.
- Les valeurs Hex et RGB de Photoshop peuvent être transférées directement dans votre CSS, ce qui n’est pas le cas de HSB qui n’est _pas_ la même chose que HSL.
- HSL ne vous offre pas une plus grande palette de couleurs que Hex et RGB, on reste sur la même étendue.

Et pourtant, malgré ces quelques restrictions, HSL est la méthode préférée des designers, voici pourquoi.

<figure role="group"><img src="/images/cercle-chromatique-hsl-compressor.jpeg" width="742" height="577" alt="le cercle chromatique"/></figure>

Tout d’abord, il vous faut un nouveau modèle mental pour la couleur, focalisez-vous sur le cercle chromatique. Vous voyez le rouge, le vert et le bleu&nbsp;: au sommet, le rouge est à 0 degrés, le vert à 120 degrés et le bleu à 240 degrés, ensemble ils partagent le cercle en trois parties égales. À distance égale entre eux se trouvent le jaune, le cyan et le magenta (du système de couleurs CMYK) respectivement à 60, 180 et 300 degrés.

_NdT : HSL signifie Hue, Saturation, Luminosity, c’est à dire [Teinte, Saturation, Luminosité](https://fr.wikipedia.org/wiki/Teinte_saturation_luminosit%C3%A9). Ce sont les trois composantes que nous retrouverons dans le code `hsl`_.

En partant du sommet et en tournant dans le sens des aiguilles d’une montre, nous passons par toutes les couleurs de l’arc en ciel.

La première composante de HSL est donc très facile&nbsp;: c’est la position de la couleur (la “teinte") sur le cercle chromatique, exprimée en degrés.

Pour prendre un exemple, le violet se trouve à mi-chemin du bleu (240°) et du magenta (300°), son code serait donc `hsl(270, 100%, 50%)` (ne vous inquiétez pas pour les autres composantes du code, nous allons voir ça tout de suite). Pour obtenir un violet “plus bleu”, il suffit de revenir en arrière vers le bleu, par exemple en faisant `hsl(255, 100%, 50%)`.

La deuxième composante est la saturation, également décrite comme l’intensité. Plus on s’éloigne du centre, plus l’intensité de la couleur augmente, atteignant le maximum de saturation sur le bord extérieur du cercle. Au contraire, plus on va vers le centre, plus la couleur tend vers le gris. En d’autres termes, le degré de saturation dépend de la distance à laquelle on se trouve du gris. Toutes les couleurs HSL ayant une saturation de 0% ont la même ombre (_shade_) de gris, toutes choses étant égales par ailleurs.

<div className="centeredBold">Valeurs de saturation hsl(45, x%, 50%)</div>

<div class="container-hsl">
<span style="background-color:hsl(45,0%,50%);color:#fff">hsl(45,0%,50%)</span>
<span style="background:hsl(45,25%,50%)">hsl(45,25%,50%)</span>
<span style="background:hsl(45,50%,50%)">hsl(45,50%,50%)</span>
<span style="background:hsl(45,75%,50%)">hsl(45,75%,50%)</span>
<span style="background:hsl(45,100%,50%)">hsl(45,100%,50%)</span></div>

Note : Pour la saturation et la luminosité, le signe % doit _toujours_ être inclus, même si la valeur est égale à 0.

La luminosité, ou “brillance”, spécifie la distance à laquelle la couleur se trouve du blanc et du noir. Un niveau de luminosité de 50% signifie que la couleur est en équilibre parfait entre le clair et le sombre, et demeure inchangée. Si l’on réduit la luminosité, la couleur s’assombrit&nbsp;: toute couleur ayant un niveau de luminosité de 0 est un noir pur. Si l’on augmente la luminosité, la couleur s’éclaircit et à l’extrême (100%) elle est blanche. Entre les deux, vous avez de nombreuses possibilités, comme illustré ci-dessous&nbsp;:

<div className="centeredBold">Valeurs de luminosité hsl(90, 100%, x%)</div>

<div class="container-hsl">
<span style="background-color:hsl(90,100%,0%);color:#fff">hsl(90, 100%, 0%)</span>
<span style="background:hsl(90,100%,25%)">hsl(90, 100%, 25%)</span>
<span style="background:hsl(90,100%,50%)">hsl(90, 100%, 50%)</span>
<span style="background:hsl(90,100%,75%)">hsl(90, 100%, 75%)</span>
<span style="background:hsl(90,100%,100%)">hsl(90, 100%, 100%)</span></div>

Avec un peu de pratique, cette carte mentale de la couleur deviendra instinctive et vous trouverez probablement qu’il est bien plus facile de créer et de manipuler les couleurs spécifiées en HSL. Même si vous choisissez de ne pas toujours l’utiliser, HSL présente quelques avantages spécifiques dans certaines circonstances —&nbsp;nous verrons cela dans [le prochain article](/articles/3-raisons-dutiliser-hsl-pour-vos-couleurs/).

**Note** :

Eric Meyer propose [un diagramme bien utile](http://meyerweb.com/eric/css/colors/hsl-16.html) permettant de traduire les mots-clés de couleurs habituels en valeurs HSL, et Lars Gunther a construit un outil pédagogique intéressant pour [utiliser le cercle chromatique](http://itpastorn.github.io/webbteknik/future-stuff/svg/color-wheel.html).


La Cascade

design

Ressources Complémentaires