Créer de magnifiques flashcards avec Anki !

Comment créer des flashcards utilisant une image comme fond ? # Anki Background

Pour un néophyte, Anki peut sembler assez terne et il est vrai que l'apparence des cartes par défaut peut être décourageante voire rebutante...

Je vais vous montrer comment créer de magnifiques cartes en quelques clics !

Tout d'abord, il vous faut différencier les cartes des notes.

Les cartes correspondent à vos flashcards de questions-réponses que vous souhaitez apprendre tandis que chaque note regroupe un ensemble de cartes auxquelles vous voulez attribuer le même design.

Ainsi, en modifiant l'apparence d'un type de note, toutes les autres cartes liées à ce type de note auront le même aspect.

Pour modifier un type de note, rendez-vous dans l'explorateur puis sélectionnez une carte appartenant au type de notes dont vous voulez modifier l'apparence puis cliquez sur le bouton "Cartes...".

Une fenêtre, d'apparence complexe, s'ouvre alors. Il s'agit du code CSS de la note.

Je vous propose de réaliser des cartes ressemblant à cela :

Aperçu de l'apparence d'une de mes cartes

Ci-dessous se trouve le code CSS de ce type de note et il vous suffit de remplacer le code d'origine par celui-ci ! Il est cependant utile d'adapter les valeurs à votre/vos écran(s) et vos préférences. (Vous pouvez copier le code tel quel, les commentaires commençant par /* seront ignorés par Anki)

Modèle du recto :

<div class=frontback>
<div class=texte>{{Recto}}</div>
</div>

Style :

body
{
background:transparent;
}

html {
background-image: url("_IMAGE.jpg ou jpeg ou png ou gif ou ...");
/* il est important que votre image de fond commence par un "_" */
background-repeat: repeat;
/* Modifier la taille de votre image de fond : */
background-size: 1000px;
}

.frontback {
/* Modifier la distance entre le texte et le cadre : */
padding:20px;
/* Modifier la couleur du cadre : */
background-color:#ffffff;
/* Arrondir les bords du cadre  : */
border-radius:30px;
/* Modifier les marges "en haut et en bas" ainsi que "à gauche et à droite" : */
margin: 30px 200px;
}

.texte {
/* Modifier la police : */
font-family: arial;
/* Modifier la taille de la police : */
font-size: 25px;
/* Modifier la couleur de la police : */
color: black;
/* Je vous conseille de créer un type de note spécifique pour des informations à apprendre sous forme de listes et de remplacer "center" par "left". Les cartes seront ainsi plus lisibles */
text-align: center;
}

/* Les mêmes réglages peuvent être faits pour Android et IOS : */

.mobile .frontback {
padding:15px;
background-color:#ffffff;
border-radius:10px;
margin: 10px 30px;
}

.mobile .texte {
text-align: center;
color: black;
font-family: arial;
font-size: 15px;
}


Modèle du verso :

{{FrontSide}}
<div class=frontback>
<div class=texte>{{Verso}}</div>
</div>

Il est possible de modifier l'opacité de votre image de fond très simplement en rajoutant le code suivant dans la partie style et en faisant varier l’opacité de 0 à 1 selon votre préférence.

.card:after {
content: "";
top: 0; bottom: 0; left: 0; right: 0;
background-color:#ffffff;
opacity: 0.3;
position: fixed;
z-index: -1;
}

Remarques :

- L'image doit être placée dans : C:\Users\NOM\AppData\Roaming\Anki2\NOM\collection.media

Pour accéder au dossier AppData, qui est caché par défaut, le plus simple est de taper %AppData% dans la zone de recherche qui est à côté du menu Démarrer (une autre solution est de rendre les dossiers cachés visibles)

- Il est important qu'elle commence par un "_" (Anki risquerait, sans cela, de supprimer l'image)

- L'image de fond doit préférentiellement être une tuile répétable à l'infini (ou pattern) car vos cartes n'auront pas toutes la même taille.

Téléchargez celle de l'exemple ici

Vous pouvez en trouver d'autres sur ces différents sites (cliquez sur les liens) :

• thepatternlibrary
• heropatterns
• freepik
• awwwards
• images.google

- Si vous travaillez avec des textes à trous, il faudra remplacer {{Recto}} par {{cloze:Texte}}. Vous trouverez des captures d'écran ici pour vous aider.

N'hésitez pas à me faire part de vos questions et remarques dans les commentaires !

Abonnez-vous à ce blog pour être informé des futures publications !