L'année dernière, Rachel Andrew a écrit un article qui a pris nouveau regard sur CSS Shapes dans lequel elle a réintroduit les lecteurs aux bases de l’utilisation de CSS Shapes. Pour tous ceux qui souhaitent comprendre comment utiliser des propriétés telles que shape-outside shape-margin et shape-image-threshold Rachel est l’approche idéale. 19659003] J'ai vu de nombreux exemples d'utilisation des propriétés, mais très peu vont au-delà de Basic Shapes, notamment circle () ellipse () inset () . Même des exemples utilisant des formes polygones () les dépassent rarement. Compte tenu des possibilités créatives offertes par CSS Shapes, c’est décevant. Mais je suis sûr qu’avec un peu d’inspiration et d’imagination, nous pourrons créer des designs plus distinctifs et plus attrayants. Je vais donc vous montrer comment utiliser les formes CSS pour créer les cinq types de présentations suivants:

1. Formes en V
2. Motifs en Z
3. Formes courbes
4. Formes diagonales
5. Rotation formes

Une petite inspiration

Malheureusement, vous ne trouverez pas beaucoup d’exemples inspirants de sites Web qui utilisent CSS Shapes. Cela ne veut pas dire que l’inspiration n’est pas au rendez-vous, il suffit de regarder un peu plus loin la conception de la publicité, des magazines et des affiches. Cependant, il serait insensé de simplement imiter des œuvres d'une époque et d'un média antérieurs.

Ces dernières années, j'ai rempli d'inspiration les chemises Dropbox et je devrais vraiment déplacer ces exemples vers Pinterest. Heureusement, Kristopher Van Sant a été plus diligent que moi en élaborant un tableau Pinterest rempli d'exemples inspirants de "Formes de texte" .

Les formes ajoutent de l'énergie au design et à ce mouvement attire les gens. Ils aident à connecter un public à votre histoire et à établir des liens plus étroits entre votre contenu visuel et votre contenu écrit.

Lorsque vous avez besoin de contenu pour circuler autour d’une forme, utilisez la forme . à l'extérieur de la propriété. Vous devez faire flotter un élément vers la gauche ou la droite pour que shape-outside ait un effet.

   img {
  float: ;
  forme extérieure: ;
} 

NB: Lorsque vous parcourez le contenu autour des formes, veillez à ne pas laisser les lignes de texte trop étroites et ne contenir qu'un ou deux mots.

Il faut souvent étonnamment peu de balises pour développer des mises en page dynamiques et originales. Mon code HTML pour cette série de cinq modèles comprend uniquement un en-tête et des éléments principaux, des figures et des images. Il n’est souvent pas plus compliqué que cela:

  

  
 Mini Cooper 



  



…

1. V-Shapes

Pour moi, l'un des aspects les plus incroyables du CSS moderne est que je peux créer une forme à partir du canal alpha d'une image partiellement transparente sans avoir à tracer de tracé de polygone. Je n'ai besoin que de créer une image, puis un navigateur se chargera du reste.

Je pense que c'est l'un des ajouts les plus intéressants à CSS et que le développement de la direction artistique pour le Web est plus simple, surtout si vous travaillez. avec un système de gestion de contenu et un contenu généré dynamiquement.

  [src*="shape-left"],
[src*="shape-right"] {
  largeur: 50%;
  hauteur: 100%;
}

[src*="shape-left"] {
  float: gauche;
  shape-outside: url ('alpha-left.png');
}

[src*="shape-right"] {
  Flotter à droite;
  shape-outside: url ('alpha-right.png');
} 

Generated Content

Comme Rachel l'a expliqué dans son article:

«Vous pouvez également utiliser une image pour tracer le contour de la forme. créer un effet de texte incurvé sans inclure également l'image sur la page. Cependant, vous avez encore besoin de quelque chose à flotter, et pour cela, nous pouvons utiliser le contenu généré. ”

Comme alternative au canal alpha, je peux utiliser le contenu généré - appliqué à deux pseudo-éléments - un pour un triangle de polygone sur la gauche, l'autre pour la droite. Mon texte courant va maintenant circuler entre les deux formes générées:

   main :: before {
  contenu: "";
  bloc de visualisation;
  float: gauche;
  largeur: 50%;
  hauteur: 100%;
  forme extérieure: polygone (0 0, 0 100%, 100% 100%);
}

p principal: premier-enfant :: avant {
  contenu: "";
  bloc de visualisation;
  Flotter à droite;
  largeur: 50%;
  hauteur: 100%;
  forme extérieure: polygone (100% 0, 0 100%, 100% 100%);
} 

NB: Bennett Feely Le clip-path maker de CSS est un outil fabuleux pour le calcul des valeurs de coordonnées à utiliser avec les formes CSS.

2. Motifs en Z

Un motif en Z est un chemin familier suivi par nos yeux lors de la lecture de contenu de gauche à droite et de haut en bas. En plaçant le contenu le long des lignes cachées formant un Z, ces motifs aident le lecteur à suivre ce chemin, à partir duquel nous voudrions qu’ils commencent à lire vers une destination telle que l’appel à l’action. Les motifs en Z peuvent être soit discrets - sous-entendus par des points focaux ou des éléments ayant un poids visuel plus élevé - soit rendus évidents à l'aide de formes CSS.

Dans la conception, un motif z discret est formé comme suit:

1. La grande image couvre toute la largeur de la page, le point final souligné par un titre aligné à droite.
2. Un bloc de texte en cours d'exécution est formé de deux formes CSS. 19659047] L'épaisse bordure supérieure d'une figure servant de pied de page complète le Z.

Inutile de recourir à des balises compliquées pour implémenter ce design et mon code HTML simple ne comprend que trois éléments:

  

  
 Mini Cooper: icône des années 60 
  



  
  
  …

Mon en-tête et ma figure couvrant toute la largeur de la page ne nécessitent aucune explication, mais la circulation de texte entre deux formes triangulaires est un peu plus compliquée. Pour implémenter cette conception de motif en z, j'ai choisi d'inclure deux minuscules images de substitution 1 × 1px sur lesquelles j'applique deux images plus grandes et formatrices en utilisant shape-outside . En associant un attribut aria-hidden à ces images, un lecteur d'écran ne les décrit pas.

Après avoir donné les mêmes dimensions aux deux images de forme,
Je flotte une image à gauche et l'autre à droite, ce qui permet à mon texte courant de passer entre elles:

   [src*="placeholder-left"],
[src*="placeholder-right"] {
  bloc de visualisation;
  largeur: 240px;
  hauteur: 100%;
}

[src*="placeholder-left"] {
  float: gauche;
  shape-outside: url ('shape-right.png');
}

[src*="placeholder-right"] {
  Flotter à droite;
  shape-outside: url ('shape-right.png');
} 

L'emblématique Mini Cooper était rapide et agréable à conduire. Alors que mon design serait parfaitement présentable sans un motif z formé par CSS Shapes, ce modèle a l'air prévisible et manque d'énergie. Le motif en z créé en parcourant une colonne étroite de texte courant entre deux formes suggère la vitesse et le plaisir que les gens ressentent en conduisant cette petite voiture emblématique.

3. Curved Shapes

L'un des aspects les plus fascinants de CSS Shapes est la façon dont je peux créer des formes élégantes à l'aide du canal alpha à partir d'une image partiellement transparente. Cette forme peut être tout ce que j'imagine. Je n'ai besoin que de créer l'image, et un navigateur contiendra le contenu qui s'y trouve.

Bien que le contenu ait été limité à une forme donnée dans la spécification CSS Shapes Module Level 2 il n'existe actuellement aucun moyen de savoir si et quand cela pourrait être mis en œuvre dans les navigateurs. Mais bien que shape-inside ne soit pas disponible ( encore! ), cela ne signifie pas que je ne peux pas créer de résultats similaires avec shape-outside . [19659063] Gauche: Une autre conception présentable mais prévisible. À droite: Un aspect plus distinctif créé à l'aide de formes CSS. "/>

[src*="curve"]  {
  Flotter à droite;
  largeur: 400px;
  hauteur: 100vh;
  shape-outside: url ('curve.png');
} 

[src*="curve"]  {
  forme-marge: 3rem;
} 

More Margins

L'ajout de mouvement à cette conception incurvée repose sur plus que les formes CSS. En utilisant les unités de largeur de la fenêtre d'affichage, je donne à mon titre, à l'image et au texte en cours d'exécution une marge gauche différente, chacune proportionnelle à la largeur de la fenêtre. Cela crée une diagonale de l'arrière de mon titre à l'avant de la voiture:

   h1 {
  marge gauche: 5 vw;
}

img {
  marge gauche: 10 vw;
}

p {
  marge gauche: 20 vw;
} 

4. Formes diagonales

Les angles peuvent aider à rendre les mises en page moins structurées et plus organiques. L'absence de structure claire incite l'œil à se déplacer librement autour d'une composition. Ce mouvement donne également une impression de dynamisme à un arrangement.

Je vois tous les jours des dessins reposant sur des axes horizontaux et verticaux, mais rarement sur une diagonale. De temps en temps, je remarque un élément incliné - peut-être une bannière avec un fond incliné - mais il est rarement essentiel pour un dessin.

Même si CSS Grid implique la définition de colonnes et de lignes, il raison pour laquelle il ne peut pas être utilisé pour créer des diagonales dynamiques. Cette conception suivante nécessite juste un en-tête et un élément principal:

  

  
 Mini Cooper 
  



  
  …

Pour créer le détail en diagonale dans cette conception, j'écoule à nouveau le contenu autour d'une image de forme qui est flottante à gauche. Encore une fois, j'utilise la propriété shape-outside avec la même valeur d'URL que mon image visible et une forme-marge pour mettre une distance entre ma forme et le contenu qui l'entoure:

   [src*="shape"] {
  float: gauche;
  shape-outside: url ('shape.png');
  forme-marge: 3rem;
} 

Étant donné que la réactivité est l’une des propriétés intrinsèques du Web, on peut rarement prédire comment le contenu s’écoulera, mais nous évitons les conceptions comme celle-ci. Lorsque l’espace libre de tout mon texte courant est trop petit pour tenir au-dessus de la forme, le fait que chaque forme soit flottante signifie que le contenu s’écoule dans l’espace situé au-dessous de la forme.

5. Rotated Shapes

Pourquoi se contenter d’utiliser CSS Grid and Shapes lorsque l’ajout de Transforms au mélange permet d’obtenir des dispositions inimaginables il ya quelques années seulement? Dans ce dernier exemple, le texte fluide autour des voitures de cette image, tout en faisant pivoter la composition entière, nécessitait une combinaison de toutes ces propriétés.

Comme l’image de ces voitures n’a pas de canal alpha transparent, le texte qui s’écoule autour des formes nécessite une seconde image contenant uniquement des informations sur le canal alpha.

Cette fois, je laisse l'image visible à droite et applique la propriété shape-outside avec une valeur URL correspondant à mon image du canal alpha:

   [src*="shape"] {
  Flotter à droite;
  largeur: 50%;
  shape-outside: url ('alpha.png');
  forme-marge: 1rem;
} 

Vous avez peut-être remarqué que mes deux images contiennent des éléments que j'ai pivotés de dix degrés dans le sens des aiguilles d'une montre. Avec ces images en place, je peux faire pivoter la mise en page entière de dix degrés dans la direction opposée pour donner l’illusion que mes images sont debout:

   body {
  transformer: faire pivoter (-10 ° C);
} 

Exemple boni: Polygon Shapes Sculpt Columns

Extrait du "Direction artistique du Web" disponible à partir du 26 mars 2019.

Vous pouvez créer des formes structurelles fortes avec rien de plus que du type. En combinant des formes polygonales () et des pseudo-éléments, vous pouvez sculpter des formes à partir de blocs pleins de texte en cours, à la manière de Alexey Brodovitch et de son travail influent pour Harper's Bazaar.

J'ai formé ces colonnes à partir de deux éléments d'article, c'est-à-dire avec une gouttière entre eux et une largeur maximale. qui aident à maintenir une mesure confortable:

   body {
  affichage: grille;
  Grille-modèle-colonnes: 1fr 1fr;
  intervalle de grille: 2 vw;
  largeur maximale: 48em;
} 

Parce qu'il y a deux éléments d'article et j'ai aussi spécifié
ma colonne, il n’est pas nécessaire de préciser la position de ces articles. Je peux laisser un navigateur me les placer, et il ne me reste plus qu'à appliquer shape-outside à un pseudo-élément généré dans chaque colonne:

   article: nth-of-type (1 ) p: nième de type (1) :: before {
  contenu: "";
  float: gauche;
  largeur: 160px;
  hauteur: 320px;
  forme extérieure: polygone (0px 0px, 90px 0px, [...]);
}

article: nth-de-type (2) p: nth-de-type (2) :: before {
  contenu: "";
  Flotter à droite;
  largeur: 160px;
  hauteur: 320px;
  forme extérieure: polygone (20px 220px, 120px 0px, [...]);
} 

Le gain

Maintenant que Firefox a publié une version qui prend en charge les formes CSS et a lancé un éditeur de chemin de forme dans ses outils de développement, Edge n’a désormais plus aucun support pour les formes. La situation va bientôt changer maintenant que Microsoft a annoncé un changement de son propre moteur de rendu EdgeHTML à Blink, le même moteur que Chrome et Opera.

Des outils tels que CSS Shapes nous offrent désormais d'innombrables possibilités d'utiliser la direction artistique pour capturer les lecteurs. attention et maintenez-les engagés. J'espère que vous êtes aussi excité que moi!

Note de la rédaction : Le nouveau livre de Andy, Art Direction for the Web ( commandez à l'avance votre exemplaire aujourd'hui ), explore 100 ans de direction artistique et explique comment nous pouvons utiliser ces connaissances et les technologies Web les plus récentes pour créer de meilleurs produits numériques. Lisez un extrait du chapitre pour avoir un aperçu de ce que le livre a à offrir.

Ressources supplémentaires

(mr, ip, il)