A propos de l'auteur

Dan Halliday est un développeur et designer indépendant basé au Royaume-Uni. Avec une formation en musique et une passion pour la résolution de problèmes, Dan est partenaire fondateur de…
Plus à propos
Dan

Dans cet article, Dan Halliday passe en revue l'approche standard de la création de cartes à rabat animées et présente une méthode améliorée qui résout son problème de dimensionnement.

Quelles sont les chances que votre prochain client utilise le mot interactif tout en présentant leur projet? D'après mon expérience, la réponse est 100%, donc je suis toujours à la recherche de techniques CSS robustes pour m'aider à fournir les diverses fonctionnalités et effets qui se présentent lors de la discussion de cet objectif.

Un petit morceau d'interactivité que l'on me demande de mettre en œuvre encore et encore est des cartes à feuilles mobiles – des blocs de contenu qui tournent lorsqu'ils sont survolés ou tapotés pour révéler du contenu sur leur verso. C'est un effet soigné qui encourage la navigation ludique et une autre façon d'afficher plus d'informations sans s'éloigner de la page. Mais la méthode standard a un problème quand il s'agit de gérer différentes longueurs de contenu de carte.

Dans ce didacticiel, nous allons créer une grille de cartes à feuilles mobiles qui résout ce problème avec certaines notions de base CSS – transformations, flex et grille. Vous devrez les connaître et cela vous aidera à bien comprendre les techniques de positionnement CSS. Nous couvrirons:

  • Comment les cartes à bascule sont généralement implémentées en utilisant un positionnement absolu;
  • Le problème de dimensionnement introduit par le positionnement absolu; et
  • Une solution générale pour le dimensionnement automatique du contenu superposé.

Création d'une Flip Card de base

Avec un bon support de navigateur moderne pour les transformations tridimensionnelles, la création d'une carte à bascule de base est relativement simple. La méthode habituelle consiste à placer les faces avant et arrière de la carte dans un conteneur parent et à positionner absolument la face arrière afin qu'elle puisse correspondre à la taille de la face avant. Ajoutez une transformation de l'axe des x à la face arrière pour la faire apparaître inversée, ajoutez une autre à la carte elle-même en survol et nous sommes en affaires.

cartes {
  affichage: grille;
}

.carte {
  perspective: 40rem;
}

.card-body {
  transformer-style: préserver-3d;
  transition: var (- time) transform;
  
  .card: survoler & {
    transform: rotationX (-180deg);
  }
}

.card-front, .card-back {
  visibilité arrière: cachée;
}

.card-back {
  position: absolue;
  en haut: 0; à droite: 0; en bas: 0; gauche: 0;
  transform: rotationX (-180deg);
}

Une implémentation standard de flip card utilisant un positionnement absolu (voir le Pen “[Magic Flip Cards 1: The Standard Implementation](https://codepen.io/smashingmag/pen/JjdPJvo) »par Dan Halliday)

Une implémentation standard de flip card utilisant un positionnement absolu (voir le Pen «Magic Flip Cards 1: The Standard Implementation» de Dan Halliday)

Qu'est-ce qui pourrait mal se passer?

Notre solution standard a cependant un gros problème: elle ne fonctionne pas lorsque la face arrière a besoin de plus d'espace que la face avant n'en fournit. Donner à la carte une grande taille fixe est une solution, mais cette approche est également garantie d'échouer à un moment donné pour un ensemble de tailles d'écran.

Comment la mise en œuvre standard de la carte de conférence échoue avec un contenu arrière plus long
C'est ainsi que l'implémentation de la carte à bascule standard échoue avec un contenu arrière plus long. (Grand aperçu)

Les compositions de conception comportent naturellement des boîtes d'aspect soigné avec un texte qui s'adapte parfaitement. Mais lors du démarrage du développement, il peut être difficile d'obtenir une mise en page et une carte qui fonctionnent pour le contenu réel. Et lors de l'affichage de contenu dynamique à partir d'un CMS, cela peut être impossible! Même avec des limites de mots ou de caractères, il n’existe souvent aucune solution qui fonctionne de manière fiable sur tous les appareils.

Comment l'échec de l'implémentation de la carte standard avec un contenu arrière plus long (voir le stylet "[Magic Flip Cards 2: How Absolute Positioning Fails](https://codepen.io/smashingmag/pen/QWbLMLz]) »Par Dan Halliday)

Comment l'échec de l'implémentation de la carte standard avec un contenu arrière plus long (voir le stylo «Magic Flip Cards 2: comment le positionnement absolu échoue» par Dan Halliday)

Nous devons toujours nous efforcer de créer des implémentations de mise en page qui tolèrent une large gamme de longueurs de contenu. Mais ce n’est pas facile! J’ai souvent eu l’occasion de revenir à l’utilisation de tailles et de positions fixes, que ce soit en raison de contraintes de temps, d’une prise en charge insuffisante du navigateur, d’une conception de référence faible ou simplement de ma propre inexpérience.

Au fil des ans, j'ai appris qu'un bon processus itératif et un dialogue sain avec le concepteur peuvent beaucoup aider à résoudre ces problèmes, et souvent vous pouvez vous rencontrer quelque part au milieu pour obtenir une mise en page robuste avec une certaine interactivité. Mais revenons à la tâche à accomplir – peut-on le faire?

Sortir des sentiers battus

En fait, est possible de dimensionner les cartes sur la base du contenu avant et arrière, et ce n'est pas aussi difficile qu'il n'y paraît au premier abord. Nous devons juste être méthodiques et persistants!

Contraindre le problème

Commençons par dresser une liste des exigences de notre mise en page. Essayer d'écrire précisément ce que vous voulez peut sembler une corvée, mais c'est un excellent moyen de découvrir des contraintes qui peuvent être simplifiées pour résoudre un problème. Disons:

  • Nous voulons voir une ou plusieurs cartes rectangulaires, disposées dans une grille à colonne unique ou à colonnes multiples;
  • Nous voulons que les cartes retournent en survol ou tapotent pour révéler un deuxième ensemble de contenu sur la face arrière;
  • Nous voulons que les cartes soient toujours assez grandes pour montrer tout leur contenu avant et arrière, indépendamment de la longueur ou du style du contenu; et
  • Dans le cas de plusieurs colonnes, idéalement, nous voulons que toutes les cartes soient de la même taille afin que les lignes s'alignent bien.

En réfléchissant à ces exigences, nous pouvons remarquer quelques éléments qui simplifient le problème:

  • Si les cartes vont être présentées dans une grille, nous avons une contrainte sur leur largeur – c'est-à-dire que leurs largeurs sont des fonctions de la fenêtre ou du conteneur de grille plutôt que leur propre contenu;
  • Étant donné que nous connaissons la largeur d'une carte (en pourcentage de son parent, au moins), nous avons résolu la dimension horizontale et nous avons juste besoin que la hauteur de la carte s'étende pour s'adapter à la plus grande de sa face avant ou arrière; et
  • Si nous pouvons le faire et que chaque carte est auto-dimensionnée verticalement, nous pouvons utiliser la grille CSS grille-lignes-automatiques pour que toutes les rangées de cartes soient aussi hautes que la carte la plus haute.

Comprendre le tour de cartes

Alors, comment dimensionner soi-même les cartes? Maintenant que nous avons simplifié notre problème, nous sommes à portée de la solution.

Oubliez un instant l'idée de mettre du contenu au-dessus d'un autre contenu et concentrez-vous sur notre nouvelle exigence: un parent aussi grand que son enfant le plus grand. C'est facile! En utilisant des colonnes, nous pouvons faire en sorte qu'un parent se développe à la hauteur de son enfant le plus grand. Ensuite, il suffit d'utiliser un petit tour de main pour aligner les enfants:

  1. Définissez les enfants pour qu'ils aient la même largeur que leurs parents
  2. Laisser le deuxième enfant déborder vers la droite
  3. Transformez-le vers la gauche à sa place
.cartes {
  affichage: grille;
}

.card-body {
  affichage: flex;
}

.card-front, .card-back {
  largeur min: 100%;
  mix-blend-mode: multiplier; // Aperçu des deux faces
}

.card-back {
  transformer: traduire (-100%, 0);
}

Dimensionnement vertical par débordement horizontal fixe (voir le stylo “[Magic Flip Cards 3: Vertical Sizing by Fixed Horizontal Overflow](https://codepen.io/smashingmag/pen/ExjYvjP]) »Par Dan Halliday)

Dimensionnement vertical par débordement horizontal fixe (voir le stylo «Magic Flip Cards 3: Dimensionnement vertical par débordement horizontal fixe» de Dan Halliday)

Si cette approche semble évidente, soyez assuré que j'ai passé de nombreuses heures à parcourir des idées vraiment terribles avant d'y penser. Au début, j'avais prévu d'imprimer une version cachée en double du texte de la face arrière à l'intérieur de la face avant pour étendre la carte à la bonne taille. Et quand j'ai pensé à utiliser le débordement de colonne, je recadrais à l'origine la colonne de droite en utilisant débordement caché, et de le transformer uniquement au dernier moment où le vol stationnaire a commencé, car je n'avais pas encore réalisé que je pouvais simplement le garder transformé depuis le début et utiliser une autre méthode telle que opacité ou Visibilité arrière pour l'allumer et l'éteindre au besoin.

En d'autres termes, des solutions évidentes sont le résultat d'un travail acharné! Si vous sentez que vous vous frottez la tête contre votre bureau pendant des heures sur un problème de mise en page, il est important de prendre du recul et de décider si vous passez le temps de votre client à bon escient: si vous devez suggérer qu'il modifie la conception et si pour rechercher la solution dans votre propre temps comme un exercice d'apprentissage lorsque la pression est coupée. Mais quand vous trouvez des méthodes simples, ne vous sentez jamais stupide car cela a pris beaucoup de temps. Passons maintenant en revue notre solution complète.

.cartes {
  affichage: grille;
}

.carte {
  perspective: 40rem;
}

.card-body {
  affichage: flex;
  transformer-style: préserver-3d;
  transition: var (- time) transform;

  .card: survoler & {
    transform: rotationX (-180deg);
  }
}

.card-front, .card-back {
  visibilité arrière: cachée;
  largeur min: 100%;
}

.card-back {
  transform: RotateX (-180deg) translate (-100%, 0);
}

La solution complète de cartes flip magiques (voir le Pen “[Magic Flip Cards 4: The Complete Solution](https://codepen.io/smashingmag/pen/xxGKLZO]) »Par Dan Halliday)

La solution complète de cartes flip magiques (voir le stylo «Magic Flip Cards 4: La solution complète» par Dan Halliday)

Y a-t-il des mises en garde?

La solution fonctionne généralement bien, avec seulement quelques mises en garde mineures à garder à l'esprit:

  • Les cartes doivent être présentes dans une disposition de grille ou dans un autre contexte où leurs largeurs ne dépendent pas du contenu.
  • Les cartes nécessitent un emballage de contenu quelconque (notre corps de carte) afin que la zone de survol ne change pas pendant les animations. Si la carte elle-même est animée, vous verrez des pépins lorsque l'animation s'arrête et redémarre rapidement.
  • Les styles tels que les arrière-plans et les ombres de boîte sont mieux placés directement sur les faces avant et arrière, car aucun effet sur la carte elle-même ne sera animé. Méfiez-vous des styles tels que les ombres sur le corps de la carte, car ils seront naturellement retournés à l'envers.
  • Les faces avant et arrière des cartes ont besoin de leur dimensionnement de la boîte propriété définie sur border-box s'ils ont leur propre rembourrage, en raison de leur largeur min exigence, sinon ils déborderont.
  • Safari nécessite toujours -webkit-backface-visibilité, sous sa forme préfixée par le fournisseur.

Ajout d'un peu de polonais

Maintenant que nous avons résolu le problème difficile, examinons quelques ajustements que nous pouvons apporter pour que toute l'interaction fonctionne aussi bien que possible.

Tout d'abord, vérifiez si les cartes se chevauchent lors du retournement. Cela dépendra de l’utilisation de plusieurs colonnes, de la largeur de la gouttière de colonne, de l’orientation du retournement et de la la perspective valeur de la carte, mais cela risque de se produire. Vous pouvez augmenter la durée de l'animation pour voir les choses plus clairement. En vol stationnaire, il semble anormal que la carte survolée passe sous ses voisins ultérieurs, nous devons donc la placer au-dessus en utilisant z-index. Assez facile, mais attention! Nous devons attendre la fin de l'animation sortante avant de restaurer le z-index. Entrer délai de transition:

.carte {
  transition: z-index;
  délai de transition: var (- time);
  indice z: 0;
  
  &: survoler {
    délai de transition: 0s;
    indice z: 1;
  }
}

Ensuite, envisagez de créer un actif état pour les cartes. J'essaie généralement de créer des cartes comme celles-ci vers un endroit pertinent – même s'il n'est pas spécifié par le concepteur – car les éléments avec des effets de survol comme celui-ci semblent très utilisables, il est donc bon de fournir une destination aux lecteurs qui tentent leur chance. J'aime une transformation d'échelle courte et subtile, car elle fonctionne assez bien, que la deuxième moitié de l'animation soit coupée ou non en chargeant la page de destination (j'aimerais que les navigateurs terminent proprement les animations en vol avant la navigation, cependant Je suis sûr que ce serait beaucoup plus difficile à mettre en œuvre dans la pratique qu'il n'y paraît).

C'est également une excellente occasion de réfléchir à la façon dont le contenu de nos cartes est accessible. Notre balisage est concis et bien ordonné, nous avons donc couvert les lecteurs d'écran et autres cas d'utilisation qui ignorent le style, mais qu'en est-il des utilisateurs de clavier? Si nous voulons rendre les cartes elles-mêmes ancrées, elles recevront le focus en tant qu'onglet des utilisateurs du clavier sur la page. Réutilisons l'état de survol de la carte comme état de focus, et le contenu arrière apparaîtra naturellement pendant la navigation au clavier.

.carte {
  transition: z-index, transform calc (var (- time) / 4);
  délai de transition: var (- temps), 0s;
  indice z: 0;
  
  &: survoler {
    délai de transition: 0s;
    indice z: 1;
  }

  &:actif {
    transformer: échelle (0,975);
  }
}

.card-body {
  .card: survoler &, .card: focus & {
    transform: rotationX (-180deg);
  }
}

Enfin, n'oubliez pas que maintenant la carte évolue automatiquement pour s'adapter à son contenu, vous pouvez utiliser à peu près toutes les techniques d'alignement et d'espacement que vous aimez à l'intérieur des conteneurs avant et arrière. Utilisez l'alignement flexible pour centrer les titres, ajouter du rembourrage, même mettre une autre grille à l'intérieur de la carte. C'est la beauté de bonnes solutions de mise en page qui évoluent avec leur contenu – un couplage réduit des enfants aux parents et la modularité qui vous permet de vous concentrer sur une chose à la fois.

.card-front, .card-back {
  affichage: flex;
  align-items: centre;
  couleur de fond: blanc;
  boîte-ombre: 0 5px 10px noir;
  rayon-frontière: 0,25rem;
  rembourrage: 1,5rem;
}

Emballer

J'espère que cette technique CSS vous sera utile! Pourquoi ne pas essayer quelques variations sur l'animation, comme un effet d'échelle ou un simple fondu enchaîné? La technique n'est pas non plus limitée au facteur de forme des cartes. Il peut être utilisé partout où la responsabilité du dimensionnement vertical incombe à plusieurs éléments. Imaginez un site Web de magazine présentant de grandes photographies avec des sous-titres superposés – vous pouvez l'utiliser pour accueillir à la fois des images avec des rapports d'aspect élevés et un long texte dynamique.

Surtout, rappelez-vous les avantages de prendre un peu de temps pour réfléchir sérieusement à la question de savoir s'il existe un moyen de mettre en œuvre une conception qui semble fonctionner uniquement avec un dimensionnement et une position fixes. Souvent, il y a, et peu importe à quel point le problème peut sembler délicat au premier abord, noter toutes vos exigences, mettre du temps de côté pour créer un cas de test minimal et le traverser méthodiquement est toujours le meilleur pari.

Smashing Editorial
(rail)