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

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

L'univers du Web se veut plus éco-logique. J'ai adopté des pratiques plus responsables comme par exemple en remplaçant les célèbres notes autocollantes par un service en ligne. Mais si ces petites fiches fuorées vous manquent, voici un tutoriel pour les reproduire en CSS3.

Depuis plusieurs années, j'essaie de rationnaliser mon activité afin d'être plus efficace et plus éco-logique au quotidien. C'est d'abord une question de cohérence et de priorité mais aussi de budget. Par exemple, j'ai arreté d'utiliser certains produits comme ces petites notes autocollantes colorées que j'ai remplacé par Trello. J'ai gagné en efficacité, en propreté et en budget. Bref, c'est parfait et si vous pouvez aussi adopter cette démarche, n'hésitez pas à le faire.

Je suis d'accord, il n'y a pas que Trello pour remplacer ces notes fluorées. Si on est un peu créatif et malin, on peut également digitaliser ces petites fiches colorées pour les afficher non plus sur l'écran mais dans l'écran ! Dans ce tutoriel, je vais vous montrer comment transformer une simple liste HTML en une suite de plusieurs notes comme ceci :

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

Cette liste s'affichera parfaitement sur tous les navigateurs modernes tels que Chrome, Safari, Firefox, Brave et Opera. Les navigateurs moins modernes n'afficheront simplement que des carrés jaunes.

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.

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.

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 :

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.

L'univers du Web se veut plus éco-logique. J'ai adopté des pratiques plus responsables comme par exemple en remplaçant les célèbres notes autocollantes par un service en ligne. Mais si ces petites fiches fuorées vous manquent, voici un tutoriel pour les reproduire en CSS3.

Depuis plusieurs années, j'essaie de rationnaliser mon activité afin d'être plus efficace et plus éco-logique au quotidien. C'est d'abord une question de cohérence et de priorité mais aussi de budget. Par exemple, j'ai arreté d'utiliser certains produits comme ces petites notes autocollantes colorées que j'ai remplacé par Trello. J'ai gagné en efficacité, en propreté et en budget. Bref, c'est parfait et si vous pouvez aussi adopter cette démarche, n'hésitez pas à le faire.

Je suis d'accord, il n'y a pas que Trello pour remplacer ces notes fluorées. Si on est un peu créatif et malin, on peut également digitaliser ces petites fiches colorées pour les afficher non plus sur l'écran mais dans l'écran ! Dans ce tutoriel, je vais vous montrer comment transformer une simple liste HTML en une suite de plusieurs notes comme ceci :

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

Cette liste s'affichera parfaitement sur tous les navigateurs modernes tels que Chrome, Safari, Firefox, Brave et Opera. Les navigateurs moins modernes n'afficheront simplement que des carrés jaunes.

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.

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.

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 :

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.

Daniel Dubois - auteur à web-eau.net

A propos de Daniel

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort de son expérience, il partage ses connaissances dans un état d'esprit open source. Très impliqué en faveur du CMS Joomla depuis 2014, il est également conférencier et fondateur du Joomla User Group Breizh.

web-eau.net

29800 Landerneau

06 74 50 27 99

daniel@web-eau.net