Mouvements et formes

Sens du retournement, vitesse, déclencheur, dix proportions, alignement du contenu, coins et ombres. Le verso de chaque boîte dit ce qui est réglé.

Le sens du retournement

Quatre sens : horizontal ou vertical, et l’inverse de chacun.

Horizontal

Axe vertical

La boîte pivote autour de son axe vertical : le sens de base.

Horizontal inversé

L’autre sens

Même mouvement, dans le sens inverse.

Vertical

Axe horizontal

La boîte bascule autour de son axe horizontal.

Vertical inversé

L’autre sens

Même bascule, dans le sens inverse.

La vitesse

Rapide, normale ou lente.

Rapide

Vitesse rapide

Pour les boîtes qu’on parcourt vite, comme une grille de produits.

Normale

Vitesse normale

Le réglage de base : ni brusque, ni trop lent.

Lente

Vitesse lente

Un mouvement posé, qui laisse le temps de voir la boîte tourner.

Le déclencheur

Au survol, ou au clic avec ou sans icône. Le premier retourne aussi la boîte d’un toucher sur écran tactile.

Au survol

Survol ou toucher

Au pointeur, la boîte se retourne au survol ; sur écran tactile, un toucher suffit.

Au clic, avec icône

Avec icône

Une petite icône montre qu’on peut retourner la boîte. Un lien est alors possible sur la face avant.

Au clic, sans icône

Sans icône

Le même retournement au clic, sans l’icône dans le coin.

Dix formes

La hauteur de la boîte suit sa largeur, quel que soit le texte. Un titre peut aussi s’ajuster à sa longueur : c’est le cas ici.

Carrée (1 : 1)

Carrée (1 : 1)

La hauteur suit la largeur.

Portrait (4 : 5)

Portrait (4 : 5)

La hauteur suit la largeur.

Portrait (3 : 4)

Portrait (3 : 4)

La hauteur suit la largeur.

Portrait (2 : 3)

Portrait (2 : 3)

La hauteur suit la largeur.

Haute (1 : 2)

Haute (1 : 2)

La hauteur suit la largeur.

Paysage (4 : 3)

Paysage (4 : 3)

La hauteur suit la largeur.

Paysage (3 : 2)

Paysage (3 : 2)

La hauteur suit la largeur.

Large (16 : 9)

Large (16 : 9)

La hauteur suit la largeur.

Large (2 : 1)

Large (2 : 1)

Large (3 : 1)

Large (3 : 1)

Réglages : une forme par boîte, titre ajusté à sa longueur sur une ou deux lignes.

L’alignement du contenu

En haut, au centre ou en bas de chaque face.

En haut

Le texte se place dans la boîte.

En haut

Le même alignement vaut pour les deux faces.

Au centre

Le texte se place dans la boîte.

Au centre

Le même alignement vaut pour les deux faces.

En bas

Le texte se place dans la boîte.

En bas

Le même alignement vaut pour les deux faces.

Coins et ombres

Des coins arrondis et trois intensités d’ombre.

Angles vifs

Rayon 0

Le réglage de base : aucun arrondi.

Coins arrondis

Rayon 20 px

Les deux faces ont les mêmes coins arrondis.

Ombre douce

Ombre douce

Trois intensités : douce, moyenne ou forte.

Ombre forte

Ombre forte

Ici avec un léger arrondi de 8 px.

Mosaïque

Des formes différentes, sans espace entre les boîtes. Les proportions sont choisies pour que les colonnes aient la même hauteur ; chaque boîte garde son sens, sa vitesse et sa police.

Village de pêcheurs de Hamnøy aux cabanes rouges, îles Lofoten

Lofoten

Haute (1 : 2)

Retournement vertical, vitesse lente.
Temple Kiyomizu-dera entouré d’érables rouges à Kyoto

Kyoto

Paysage (3 : 2)

Horizontal inversé, rapide.

Portrait (3 : 4)

Vertical inversé

Vitesse normale. Les deux colonnes font la même hauteur.
Église à coupole bleue de Santorin face à la mer Égée

Santorin

Paysage (4 : 3)

Horizontal, vitesse normale.
Tramway jaune numéro 28 à Lisbonne

Lisbonne

Portrait (4 : 5)

Vertical, rapide.
Souk coloré de la médina de Marrakech

Marrakech

Large (2 : 1)

Horizontal, lent.

Carrée

1 : 1

Vertical, rapide.
Rue de ville la nuit avec reflets dans l’eau

Nuit

1 : 1

Horizontal inversé.
Chambre sous les toits d’une cabane en bois face à une forêt enneigée

Cabane

Haute (1 : 2)

Vertical inversé, lent.

Réglages : formes haute, paysage, portrait, large et carrée mélangées ; marge entre les boîtes réglée à zéro dans l’éditeur de blocs.