Tutoriel - Créer des pense-bêtes en HTML5 et CSS3

Le marquage HTML de départ

Pour commencer, je n'utiliserai que des propriétés CSS basiques qui fonctionnent sur tous les navigateurs. Comme je vais mobiliser HTML5 pour les effets, le code HTML de base est une liste non ordonnée avec un lien contenant tous les autres éléments de chaque élément de la liste :

<ul>
  <li>
    <a href="#">
      <h2>Titre n°1</h2>
      <p>Texte de la note</p>
    </a>
  </li>
  <li>
    <a href="#">
      <h2>Titre n°2</h2>
      <p>Texte de la note</p>
    </a>
  </li>
  <li>
    <a href="#">
      <h2>Titre n°3</h2>
      <p>Texte de la note</p>
    </a>
  </li>
</ul>

Vous avez noté que chaque élément est entourée par un lien <a>. C'est une bonne pratique à utiliser pour les éléments interactifs car dans ce cas, les notes deviennent accessibles au clavier.

Passons maintenant au CSS.
Transformer cette liste en une suite de carré jaunes est finalement très simple, comme vous pouvez le voir :

ul,li{
  list-style:none; /*Suppression des puces de la liste */
}
ul{
  display: flex; /* Flex pour la mise en place des éléments */
  flex-wrap: wrap; 
  justify-content: center;
}
ul li a{
  text-decoration:none; /* Suppression du surlignage sur les liens */
  color:#000; /* Couleur des textes */
  background:#ffc; /*Couleur jaune */
  display:block;
  height:10em; /* Hauteur d'une note */
  width:10em; /* Largeur d'une note */
  padding:1em; 
}
ul li{
  margin:1em;
}

Concrétement, en appliquant la propriété flex sur l'élément ul, cela place tous les éléments de liste côte à côte, sur une seule ligne.
Si j'ai de nombreuses notes dans ma liste, les éléments de la liste commenceraient à déborder à un moment donné. Pour éviter cela, j'utilise la propriété flex-wrap en définissant sa valeur sur wrap. Ainsi, les éléments supplémentaires de la liste passeront à la ligne suivante au lieu de déborder.

J'ai stylisé le lien <a> en un rectangle jaune clair et je positionne les éléments de la liste depuis la gauche. A ce stade, on obtient une suite de cases jaunes pour notre liste. Créer des pense-bêtes en HTML5 et CSS3

Rassurez-vous, Flexbox est aujourd'hui pris en charge par quasiment tous les navigateurs. Cela couvre exactement 98,72% des internautes à ce jour. Si vous voulez ajouter la prise en charge des navigateurs plus anciens, vous pouvez utiliser la propriété float pour disposer les éléments de la liste.

Les effets et la typographie

Pour ce qui est des effets, je vais ajouter une ombre portée aux notes pour leur donner l'air de se décoller et utiliser une police de type manuscrite pour ce qui sera écrit sur chaque note. Pour cela, je me tourne vers Google Fonts pour fouiller dans la catégorie Handwriting pour finalement choisir la jolie Dawning of a New Day.

En utilisant Google Fonts, vous n'avez besoin que d'une seule ligne de code pour ajouter n'importe quelle police à votre site Web.

<link href="https://fonts.googleapis.com/css2?family=Dawning+of+a+New+Day&display=swap" rel="stylesheet">

Je définis ensuite la taille et le gras des en-têtes dans les notes et je définis la police des paragraphes <p> sur la nouvelle police que je viens d'ajouter. Ce qui me donne les règles CSS suivantes :

h2 {
  font-weight: 700;
  font-size: 2rem;
}
p {
  font-family: 'Dawning of a New Day';
  font-size: 2rem;
}

Pour créer mes ombres portés sous chaque note, j'utilise maintenant la propriété box-shadow (qui sert à ça, justement). Là aussi, la plupart des navigateurs modernes prennent en charge cette propriété sans avoir besoin d'utiliser de préfixes. Créer des pense-bêtes en HTML5 et CSS3

ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7); /* Ajout de l'ombre portée */
}

Explications : la propriété box-shadow définit le décalage, l'étalement et la couleur de l'ombre. Dans le cas présent, l'ombre sera gris foncé avec une opacité de 70%.

Allons un peu plus loin

Pour l'instant, mes petites notes sont rangées de manière très rectiligne, ce qui n'est jamais le cas dans la vraie vie. Dans l'article consacré aux effets CSS sur les images, je vous avais montré qu'il était possible de transformer celles-ci avec des classes CSS. C'est exactement ce que je vais faire maintenant.

Première étape: incliner les notes sur le côté de quelques degrés. Pour cela, j'utilise la propriété CSS3 transform: rotate. Pour incliner une note de 6 degrés vers la gauche (donc anti horaire, donc un angle négatif), il faut employer le code suivant : Créer des pense-bêtes en HTML5 et CSS3

ul li a{
  transform: rotate(-6deg);
}

Pour que mes notes aient l'air naturel, je vais faire en sorte qu'elles soient toutes positionnées différemment. Pour cela, je mobilise la pseudo-classe CSS3 :nth-child.

ul li:nth-child(even) a{
  transform:rotate(4deg); /* Inclinaison de 5° vers la droite */
  position:relative;
  top:7px;
}
ul li:nth-child(3n) a{
  transform:rotate(-4deg); /* Inclinaison de 4° vers la gauche */
  position:relative;
  top:-3px;
}
ul li:nth-child(5n) a{
  transform:rotate(3deg); /* Inclinaison de 3° vers la droite */
  position:relative;
  top:-10px;
}

Explications : ceci inclinera chaque deuxième lien de cinq degrés vers la droite et le décalera de sept pixels du haut.
Chaque troisième lien sera incliné de quatre degrés vers la gauche et poussé de trois pixels vers le haut.
Et chaque cinquième lien sera incliné de trois degrés vers la droite et poussé de dix pixels vers le haut.

Dans l'ensemble, cela donnera l'impression que les notes ont été collées aléatoirement.

Allons encore plus loin avec hover et focus

Pour faire ressortir une note par rapport aux autres, je vais employer un effet de zoom au survol de la souris en augmentant l'ombre portée et en supprimant la rotation que je viens d'ajouter à l'étape précédente. Tout ceci avait également été vu et expliqué dans l'article sur les effets CSS3 appliqués aux images.

Pour faire ressortir un pense-bête au survol, je vais donc me servir de la propriété expérimentale scale.

ul li a:hover,ul li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7); /* Assombrissement et agrandissement de l'ombre portée */
  transform: scale(1.25); /* Agrandissement de 25% */
  position:relative;
  z-index:5; /* Pour que la note survolée s'affiche au dessus des autres notes */ 
}

Pour que les effets au survol de la souris sur la note semblent plus naturels, je vais utiliser le module de transition CSS3 transform.

ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  transition: transform .15s linear; /* On applique une transformation progressive pendant un quart de seconde à l'élément */ 
}

Pour terminer cette partie, je vais mixer les couleurs des pense-bêtes afin d'éviter un effet d'uniformité. Pour cela, je vais encore mobiliser la pseudo-classe CSS3 :nth-child comme ceci :

ul li:nth-child(even) a{
  position:relative;
  top:7px;
  background:#cfc; /* Couleur verte */
}
ul li:nth-child(3n) a{
  position:relative;
  top:-5px;
  background:#ccf; /* Couleur mauve */
}

Explications : Chaque deuxième élément a une couleur verte et est décalé de sept pixels du haut un
chaque troisième élément a une couleur mauve et est poussé de cinq pixels vers le haut.

Conclusion

Et voilà des très jolies notes autocollantes qui s'animent et qui s'inclinent en douceur au survol. En utilisant intelligemment le sélecteur :nth-child et les transformations et transitions, le résultat obtenu est finalement très satisfaisant.

De plus, l'API Web Font de Google a grandement facilité l'ajout d'une police personnalisée. L'accessibilité au clavier est préservée et tout est pris en charge par les très grande majorité des snavigateurs. Que demander de plus ?

Je remercie Chris Heilmann, auteur du tutoriel dont cet article est une traduction approximative.