Tag: footnotes

Je vous ai déjà fait un petit tutoriel pour créer des notes de bas de page (footnotes en anglais) juste en utilisant CSS.

Voici maintenant une autre manière de créer vos notes de bas de page, en HTML sémantique, CSS et vanilla JavaScript.

Des notes de bas de page sémantiques

Pour commencer, nous allons utiliser les balises HTML details et summary, qui sont trop peu souvent utilisées. Elles sont pourtant idéales pour ce que nous souhaitons accomplir: montrer un contenu après un clic, mais qui doit rester caché le reste du temps.

Le gros avantage de cette nouvelle version d’inclure des liens et du HTML dans la note de bas de page, ce qui n’était pas possible avec la version en CSS pur.

Un clic sur le numéro de la note ouvre la note. Il suffit de cliquer sur l’encart jaune de la note pour la fermer, ou alors cliquer sur un autre numéro de note.

Exemple de notes de bas de page

Le dernier serveur de SkyMinds s’appelle Apollo

Il a été mis en service le 1er octobre 2023.

et tourne sous Ubuntu Server.

Il est facile de changer le MOTD

Cela est même recommandé car cela permet d’identifier le serveur rapidement et de ne pas se tromper de terminal lorsque l’on entre une commande.

et apporter de nouvelles informations aux utilisateurs SSH.

Mon mémoire professionnel a été publié récemment

Biscay, Matt Créer et soutenir la motivation des élèves du cycle central en classe d’Anglais (2006) Institut Universitaire de Formation des Maîtres (IUFM). Mémoire: Créer et soutenir la motivation des élèves

, ce que j’aurais dû faire bien plus tôt.

Lorsque nous écrivons de longs articles, nous avons souvent besoin d’ajouter des notes de bas de pages – footnotes en anglais – pour donner une référence ou apporter un complément d’informations.

Il existe un moyen d’ajouter une note de bas de page en CSS, avec un effet popup.

Survolez le numéro qui s’affiche ici à pour voir la démo: ¹Voici un example de note de bas de page qui apparaît dans une popup, grâce à CSS :)

Une popup CSS pour vos notes de bas de page

Code HTML

Commençons par le code HTML. Nous avons besoin principalement d’un lien HTML et d’une balise span qui contiendra le contenu de notre footnote :

   <p>Voici un premier paragraphe avec une note de bas de page. <a class="footnote">&sup1<span>Coucou, je suis la note de bas de page numéro 1</span></a>
   </p>

   <p>Voici un deuxième paragraphe avec une note de bas de page. <a class="footnote">&sup1<span>Coucou, je suis la note de bas de page numéro 2 :)</span></a>
   </p>Code language: HTML, XML (xml)

Code CSS

Et voici notre code CSS pour créer la popup et afficher le contenu de nos notes de bas de page à l’intérieur, au survol de la souris:

a.footnote {
   text-decoration:none;
   background-color: #FEF6BB;
   padding-left: 2px;
   padding-right: 2px;
   margin-right: 2px;
   transition: all 2s ease;
} 

a.footnote span {
   z-index: -1;
   opacity: 0;
   position: fixed;
   left: 15px; 
   bottom: 20px;
   margin-left: 0px;
   margin-right: 18px;
   padding:14px 20px;
   border-radius:4px; box-shadow: 5px 5px 8px #CCC;
   border:1px solid #DCA;
   background-color: #FEF6BB;
   transition: all 2s ease;
}

a.footnote:hover span {
   z-index: 9;
   opacity: 1;
   transition: all 2s ease;
}Code language: CSS (css)

Dès que la souris n’est plus au-dessus du numéro de la note de bas de page, cette dernière disparaît avec un effet de fondu.

Résultat

Voilà ce que le code nous donne:

Voici un premier paragraphe avec une note de bas de page. ¹Coucou, je suis la note de bas de page numéro 1
Voici un deuxième paragraphe avec une note de bas de page. ²Hello World, je suis la note de bas de page numéro 2 :)
Matt

Et voilà, c’est très simple, en CSS pur mais c’est efficace et ne prend pas de ressources externes (pas de JS) – cela peut toujours servir!

Ajouter des notes de bas de page élégantes et sémantiques