Vous avez une idée pour une nouvelle géocache ! Vous allumez votre ordinateur, vous vous connectez à Geocaching.com, vous entrez votre texte de description et… il ne manquerait pas quelque chose ?
Mais oui, un peu de couleur. Vous ajoutez donc deux smileys « sourire », un gros texte rouge pétant, et le tour est joué ! Bravo, vous avez maintenant un descriptif un peu moins terne !
OK, mais si vous faisiez autrement ? Si votre descriptif prenait l’apparence d’une conversation par SMS, d’un terminal de hacker, d’un tableau d’aéroport ou d’un décor de jeu vidéo ?
Vous allez me dire que tout cela peut se faire avec une image. Certes. Mais ici, nous allons le faire avec classe : nous allons le faire avec du CSS. Et non, ce n’est pas un gros mot.
Le résultat : une description mise en scène, avec du vrai texte que vos visiteurs peuvent toujours sélectionner et copier. Et je vous ai préparé un petit « atelier » avec une cinquantaine de bases que vous pouvez adapter sans rien connaître à la programmation. Accéder directement à l’atelier CSS →
Avant les explications techniques, on parle de quoi ?
Vous pouvez transformer votre listing en BD :
UNE CACHE A DU STYLE !
Petit relooking. Gros ego.
|
1 · AVANT LE CSS Mon descriptif manque un peu de… tout.
🧑💻 Une boîte.
Une souche. Bonne chance. |
2 · UN PEU DE MAGIE Dégradés ! Ombres !
Laissez faire le CSS ! 🧙♂️ POUF ! |
|
3 · LA MÉTAMORPHOSE MICRO ✨📦✨ Je suis désormais une expérience sylvestre immersive.
|
4 · RETOUR SUR TERRE 🧑💻 Et on te trouve plus facilement ?
📦 Non. Mais ma D5 a les coins arrondis !
|
Du vrai texte · Des dégradés, des ombres et des rotations
Aucune image à héberger. Toujours une boîte sous une souche.
Ou donner à votre listing une enseigne au néon :
RUE DES LANTERNES · 23 h 47
LE CACHE-CACHE
OUVERT TOUTE LA NUIT
Au bout de la rue, une seule enseigne résiste encore à la panne.
Le patron ne sert qu’une boisson : des coordonnées. Encore faut-il savoir les commander.
À LA CARTE CE SOIR
| Le Nord flamboyant | N 48° 5A.BCD |
| L’Est électrique | E 002° 2E.FGH |
| Le cocktail du patron | A + B = 7 |
Le portier ne laisse entrer que ceux qui ont lu la carte jusqu’au bout.
Ici, la seule lumière qui compte est celle de votre lampe frontale.
Ou transformer votre listing en explorateur de fichiers :
| C:\GEOCACHE | ✕ |
FichierEditionAffichageAide
C:\GEOCACHE\SECRET
| Nom | Type | Taille | Modifié |
|---|---|---|---|
| ARCHIVES | Dossier | — | 1995 |
| README.TXT | Fichier | 2 Ko | 07/01/95 |
| COORDS.DAT | Fichier | 49 Ko | 06/10/95 |
| SECRET.ENC | Verrouillé | 98 Ko | 11/11/95 |
4 objet(s) – Disque local (C:)
Dans tous ces cas, les phrases sont du texte, pas des lettres dessinées dans une image. Vous pouvez les remplacer par votre histoire, votre consigne ou votre énigme. Le tout sans image à héberger.
Ces trois ambiances donnent une idée du principe. On peut aussi jouer avec une ambiance de Noël, un billet de train ou un terminal d’ordinateur. Le décor change ; le texte reste utilisable.
Vous voulez surtout voir les résultats et les utiliser ? Choisissez un modèle dans l’atelier, adaptez votre texte et récupérez le code à coller dans votre description. Aucune connaissance en programmation nécessaire pour commencer.
Attention, il est fortement recommandé d’utiliser un ordinateur ou une tablette pour l’atelier. A défaut utilisez votre téléphone en mode paysage. Sinon, du fait des contraintes de WordPress sur téléphone, les graphismes de certains modèles vont être décalés.
Choisir un modèle dans l’atelier CSS →
Vous préférez comprendre comment cela fonctionne ? Ouvrons le capot ensemble.
Ajouter facilement un modèle à votre description
Pour commencer, voici le trajet le plus court entre « c’est joli » et « c’est dans ma cache » :
1 — Choisissez un modèle dans l’atelier et adaptez son texte et sa forme à votre géocache.
2 — Copiez le code du résultat avec « Copier le HTML », ou sauvegardez-le avec « Télécharger en .html ». Pour reprendre la personnalisation plus tard ou sur un autre appareil, utilisez aussi « Enregistrer mes réglages (.json) ». Le fichier .html conserve le résultat ; le fichier .json permet de recharger vos réglages dans l’atelier.
3 — Sur Geocaching.com, créez une nouvelle géocache ou modifiez la description d’une cache existante. Cliquez sur « Source » et collez le code à l’endroit voulu. Avant de remplacer une description existante, gardez une copie de son code.
4 — Enregistrez, puis vérifiez la description sur Geocaching.com, sur ordinateur puis sur téléphone. Dans l’application officielle, regardez aussi la vue web de la description.
L’aperçu de l’atelier montre le rendu dans votre navigateur, pas le résultat du traitement de Geocaching.com. Vérifiez toujours la description après enregistrement sur le site.
Si vous collez le code dans la vue habituelle de l’éditeur, vous risquez de voir les instructions s’afficher comme du texte. Un terminal couvert de balises, c’est très « hacker », mais ce n’était pas tout à fait le projet.
Et voilà, ce n’est pas compliqué ! Vous pouvez vous arrêter là, mais je vous encourage tout de même à lire la suite. Elle vous aidera à comprendre les modèles, à les modifier plus finement et à savoir pourquoi certaines idées fonctionnent… et d’autres beaucoup moins.
Créer votre modèle avec une IA
Vous avez une idée de décor bien à vous ? Copiez ce prompt dans votre assistant IA, puis décrivez votre ambiance et ajoutez votre texte. Il rassemble les contraintes et les techniques testées.
Voir et personnaliser le prompt
La copie reprend vos modifications. Elles restent dans cette page : conservez le prompt si vous souhaitez le réutiliser.
Le contrôle final reste indispensable : vérifiez le résultat proposé par l’IA après enregistrement de votre description sur Geocaching.com, notamment sur téléphone.
Sous le capot : pourquoi cela fonctionne
Alors, prêts à découvrir ce qui se cache derrière les couleurs et les petites boîtes ?
Mais pourquoi ne pas simplement mettre une image ?
Revenons maintenant à la question : pourquoi ne pas dessiner tout cela dans une image ? C’est justement le point de départ de cet article.
Je voulais présenter le texte d’une mystery avec une mise en scène un peu graphique. Mais je voulais aussi que vous puissiez copier-coller ce texte pour travailler sur l’énigme. Parce que oui, ami géocacheur, je prends soin de vous et de votre santé mentale. Enfin… dans les limites raisonnables d’une mystery.
Une image aurait permis de dessiner presque tout ce que je voulais. En revanche, les lettres auraient été intégrées à l’image : pour les récupérer, il aurait fallu les recopier ou passer par un outil de reconnaissance de caractères.
Avec du HTML et du CSS, on peut conserver du vrai texte tout en lui donnant une apparence particulière. On peut aussi le modifier sans refaire une image entière.
Les images gardent évidemment leur intérêt pour une photo, une carte ou une illustration. Ici, nous cherchons surtout à habiller du texte.
Et pourquoi ne pas tout faire avec les boutons de l’éditeur de texte intégré à la page de publication ? Pour une description classique, ils suffisent souvent. Votre texte rouge pétant, par exemple. Mais pour construire plusieurs bulles de conversation, régler leurs espacements ou coordonner les couleurs d’un faux écran, travailler directement sur le code donne un contrôle plus précis. Et un modèle se réutilise et se modifie plus facilement que vingt minutes de clics au petit bonheur.
HTML, CSS, JavaScript… C’est du ROT13 ?
Ni du ROT13, ni du Vigenère. Ces noms désignent trois technologies que l’on retrouve sur une grande partie des sites web. Elles ont des rôles différents, mais travaillent souvent ensemble.
Pour comprendre, imaginons que vous fabriquiez une boîte pour votre prochaine cache.
Le HTML : construire la boîte
Vous assemblez vos planches, créez un emplacement pour le logbook et ajoutez un couvercle. Vous définissez ce qui existe et comment c’est organisé.
Le HTML joue ce rôle pour une page web. Son nom signifie HyperText Markup Language, que l’on peut traduire par « langage de balisage hypertexte ». Il décrit la structure du contenu : ceci est un titre, ceci est un paragraphe, ceci est une image, ceci est une liste.
Ses éléments sont délimités par des balises, reconnaissables à leurs petits chevrons : < et >.
Par exemple :
<p>Le logbook vous attend sous la troisième pierre.</p>Le logbook vous attend sous la troisième pierre.
La balise <p> ouvre un paragraphe. La balise </p> le ferme. Entre les deux, on trouve le texte à afficher. Beaucoup de balises fonctionnent ainsi, par paires ; d’autres, comme <br> pour un saut de ligne, n’ont pas besoin d’une balise de fermeture.
Quand vous rédigez votre description avec l’éditeur de Geocaching.com, vous n’avez pas besoin d’écrire tout cela vous-même : l’éditeur produit le HTML pour vous. Cliquez sur le bouton « Source », et vous découvrirez l’envers du décor.
Votre joli paragraphe vient de révéler ses planches et ses vis.
Le CSS : sortir les pinceaux
La boîte est construite. Maintenant, vous la camouflez avec de la peinture et de la mousse… ou vous la peignez en rose fluo, selon votre conception de la discrétion.
Le CSS s’occupe de la présentation. Cascading Style Sheets signifie « feuilles de style en cascade ». Il permet notamment de régler les couleurs, les polices, les bordures et les espacements.
Le HTML dit : « Voici un paragraphe. » Le CSS ajoute : « Son texte sera vert, sur fond noir, avec un peu d’espace autour. »
Par exemple :
<p style="color:#75ef87; background-color:black; padding:12px;">
Accès au logbook autorisé.
</p>Accès au logbook autorisé.
Le texte est toujours du texte. Nous avons simplement ajouté des instructions pour le présenter autrement.
Quand vous changez la couleur d’un texte dans un éditeur, celui-ci peut produire ce type de mise en forme à votre place. Vous avez peut-être déjà utilisé du CSS sans le savoir. Comme Monsieur Jourdain, mais avec davantage de boîtes en plastique.
Le JavaScript : ajouter un mécanisme
Votre boîte est maintenant magnifique. Vous décidez d’ajouter un mécanisme qui propulse le logbook à la tête du géocacheur lorsqu’il ouvre le couvercle. C’est une idée discutable, mais une bonne image pour comprendre le rôle du JavaScript.
JavaScript est un langage de programmation. Dans une page web, il peut réagir aux actions du visiteur, effectuer des calculs ou modifier le contenu : vérifier une réponse, ouvrir une fenêtre, faire fonctionner un véritable terminal…
Pour nos descriptions de caches, il faudra s’en passer : nous ne disposons pas d’un espace où ajouter librement nos propres scripts. Nous ne pourrons donc pas programmer un clavier, un calcul ou un jeu dans la description. Les touches de nos faux écrans restent décoratives ; les liens ordinaires, eux, peuvent rester cliquables.
La raison de sécurité est facile à comprendre. Autoriser les visiteurs à intégrer du code actif dans les pages consultées par les autres pourrait permettre des actions malveillantes dans le contexte du site. C’est notamment le principe des attaques dites XSS. Cela ne donne pas automatiquement accès à tout l’ordinateur : le navigateur impose des limites, mais le risque pour le site et ses utilisateurs est bien réel.
Notre terminal de hacker sera donc un décor. Il pourra afficher « ACCÈS AUTORISÉ », mais ne piratera pas le Pentagone. Ni votre grille-pain.
La suite est plus technique : elle rassemble les repères utiles et les résultats de mes essais sur Geocaching.com, principalement sous forme de tableaux. Si vous préférez passer à la création, retrouvez l’atelier en fin d’article.
Trois façons d’écrire du CSS… et notre terrain de jeu
| Méthode | Où sont les styles ? | Pour nos descriptions |
|---|---|---|
| Externe | Dans un fichier .css partagé par plusieurs pages. | Non retenue : échec dans les essais. |
| Interne | Dans un bloc <style> de la page. | Non retenue : échec dans les essais. |
| En ligne | Dans chaque élément : style="color:red;". | La méthode utilisée dans l’atelier. |
Dans mes essais, seul le CSS en ligne (« inline ») a fonctionné. C’est la méthode utilisée dans l’atelier.
Lire une ligne de CSS sans sortir l’aspirine
<p style="color:#ffffff; background-color:#222222; padding:12px;">
Ceci est un message confidentiel. Enfin, presque.
</p>Ceci est un message confidentiel. Enfin, presque.
| Dans le code | À retenir |
|---|---|
<p>…</p> | Un paragraphe : les balises encadrent le texte. |
style="…" | Les guillemets doubles délimitent les instructions CSS. |
propriété:valeur; | Le deux-points relie propriété et valeur ; le point-virgule sépare les déclarations. |
color:#ffffff; | Texte blanc. |
background-color:#222222; | Fond gris très sombre. |
padding:12px; | 12 pixels CSS entre le texte et le bord intérieur. |
Ces repères suffisent pour adapter un modèle. L’éditeur de description produit déjà du HTML et du CSS pour vous ; le bouton « Source » en révèle les instructions.
Du paragraphe au terminal de hacker
Un cadre sombre, une police monospace et quelques messages verts : voici un modèle à adapter, avec du texte toujours sélectionnable.
<div style="background-color:#111111; color:#75ef87; border:2px solid #444444; border-radius:8px; padding:16px; margin:16px 0; font-family:monospace;">
<div style="color:#ffffff; border-bottom:1px solid #444444; padding-bottom:8px; margin-bottom:12px; font-weight:bold;">
ARCHIVES DU LOGBOOK — TERMINAL 03
</div>
<p style="margin:0 0 8px 0;">> Connexion établie.</p>
<p style="margin:0 0 8px 0;">> Dossier retrouvé : OPERATION_MOUSSE.</p>
<p style="margin:0;">> Instruction : examinez la troisième ligne.</p>
</div>> Connexion établie.
> Dossier retrouvé : OPERATION_MOUSSE.
> Instruction : examinez la troisième ligne.
| Pour changer… | Modifiez… |
|---|---|
| L’histoire | Le titre et les phrases entre les balises. |
| L’apparence | color, background-color, border et border-radius. |
| Les espaces | padding à l’intérieur ; margin à l’extérieur. |
| Les chevrons du texte | < affiche < ; > affiche >. |
Changez un réglage à la fois, puis vérifiez la description enregistrée : vous saurez quel pinceau a dérapé.
Groundspeak à la douane : ce qui passe, ce qui coince
J’ai testé les techniques suivantes dans de vraies descriptions Geocaching.com. Ce bilan au 25 octobre 2026 n’est pas une liste officielle ni exhaustive. Les filtres et les affichages peuvent évoluer : partagez aussi vos réussites et vos échecs.
Côté HTML : des boîtes dans des boîtes
| Élément | Usage dans les modèles |
|---|---|
<div> | Regrouper un panneau, son titre et ses messages ; les blocs peuvent s’imbriquer. |
<span> | Styler un mot ou quelques lettres dans une phrase. |
<p>, <br> | Créer des paragraphes et des sauts de ligne. |
<table>, <tr>, <td> | Organiser lignes et cellules : départs, labyrinthes, pixel art ou radar. |
<p>Statut : <span style="color:green;">accès autorisé</span>.</p>Statut : accès autorisé.
Ici, seul le texte du <span> devient vert. Une boîte dans une boîte : terrain connu pour un géocacheur.
Côté CSS : une palette utile, pas tout le magasin
| Effet recherché | Techniques validées dans les essais | Ce qu’on en fait |
|---|---|---|
| Colorer et encadrer | color, background, background-color, border, border-radius | Bulles, dossiers et panneaux ; les bordures en tirets (dashed) sont aussi validées. |
| Régler les espaces et dimensions | padding, margin, width, height, max-width | Panneaux et cadrans ; vérifier les dimensions sur téléphone. |
| Modifier et aligner l’écriture | font-family, font-size, font-weight, text-align, letter-spacing | Polices courantes sans guillemets internes, grands emojis et lettres espacées. |
| Créer un dégradé | linear-gradient(), radial-gradient() | Crépuscule, halo de sonar et profondeur. |
| Dessiner un motif répétitif | repeating-linear-gradient(), repeating-radial-gradient() | Rayures, joints de mur et anneaux. |
| Utiliser une couleur translucide | rgba() dans une déclaration de couleur ou de fond | Un panneau qui laisse voir la couleur située derrière. |
| Ajouter des ombres et halos | box-shadow, text-shadow, y compris plusieurs ombres séparées par des virgules | Néon, relief et voyants lumineux. |
| Incliner, agrandir, déformer, décaler | transform avec rotate(), scale(), skew(), translate() | Polaroids et documents de travers. |
| Faire chevaucher des blocs | Marges négatives et transformations ; dans les piles simples, une transformation sur chaque élément frère, même rotate(0deg). | Post-it et documents d’enquête ; piles tournées des modèles validés. |
| Dessiner des cadrans | Blocs imbriqués et border-radius:50% | Radars, sonars et cercles concentriques. |
| Construire une grille régulière | Tableaux HTML et table-layout:fixed | Labyrinthes, pixel art, radars à points et tableaux de jeu. |
| Relier des documents | Tableaux, cellules et blocs colorés | Fils rouges et schémas de connexions. |
| Recadrer un décor | overflow:hidden | Masquer ce qui dépasse d’un cadre, sans couper une consigne. |
Les dégradés : un coucher de soleil sans sortir l’appareil photo
Ce carnet utilise un dégradé linéaire, généré par le navigateur sans fichier image :
JOURNAL D’EXPÉDITION — JOUR 17
Le dernier signal
Le soleil disparaissait derrière les arbres lorsque la radio grésilla une dernière fois : « Ne cherchez pas la lumière. Suivez les ombres. »
background-image:linear-gradient(90deg, #172554, #6b21a8, #9a3412);90deg donne ici une transition de gauche à droite, du bleu nuit au violet puis à l’orange. Gardez aussi background-color:#333333; comme fond de secours.
Les dégradés radiaux et répétitifs ont aussi fonctionné dans les essais. Voici cinq rendus possibles :
Les superpositions : quelques réglages utiles
| Besoin | Réglage pratique |
|---|---|
| Chevaucher des pièces | Marges négatives et transformations 2D, validées dans les modèles. |
| Choisir la pièce de devant | Dans une pile simple, transformez chaque élément frère : rotations voulues sur les pièces inclinées, transform:rotate(0deg); sur les pièces droites. À niveau égal, sans z-index différent, le dernier dans le code passe devant. |
| Éviter les morceaux coupés | Rotation et décalage visuel gardent la place d’origine. Laissez de l’air autour et testez un texte long sur téléphone. |
Les techniques sur lesquelles nous ne comptons pas
Les échecs ci-dessous concernent les montages essayés sur Geocaching.com, pas tous les usages du Web.
| Technique essayée | Résultat observé | Solution retenue |
|---|---|---|
Apostrophe dans style | Toute la mise en forme de l’attribut disparaît. | Pour les polices courantes : font-family:Georgia,Times New Roman,serif;, sans guillemets simples autour du nom. Garder les guillemets doubles de l’attribut style. |
background-image:url(...) | Image de fond absente. | Dégradés pour le décor ; <img> avec une source autorisée pour une photo. |
position:absolute | Superposition recherchée non obtenue. | Marges négatives, transformations ou tableaux. |
<style> et @keyframes | Styles ou animations non appliqués comme attendu. @keyframes ne se définit pas dans un attribut style. | CSS en ligne ; décors statiques. |
<details> / <summary> | Panneaux dépliables inopérants. | Sections visibles. |
| Ancres internes | Navigation inopérante dans la description. | Titres visibles ; sommaire sans ancres. |
title sur <span> / <abbr> | Infobulles absentes au survol. | Information écrite dans un cartouche. |
ASCII et white-space:pre | Tracés mal alignés. | Grilles de cellules HTML. |
<pre> | Fonds blancs indésirables. | Blocs <div> avec fonds et couleurs explicites. |
display:flex | Certains montages tronqués ou déformés. | Tableaux pour les alignements concernés. |
Une piste pour le mouvement : un GIF animé, à condition de vérifier son affichage et son hébergement sur Geocaching.com ou un domaine approuvé. Les modèles CSS de l’atelier restent statiques.
Quelques réglages qui m’ont évité des cheveux blancs
| Point à surveiller | Bon réflexe |
|---|---|
| Fonds et couleurs | Les préciser aussi sur les cellules et panneaux internes, pas seulement sur le cadre extérieur. |
| Grilles | table-layout:fixed aide à garder des colonnes régulières ; vérifier largeur et textes longs. |
| Débordements | overflow:hidden recadre le décor : attention à ne pas couper une consigne. |
| Motifs derrière le texte | Aligner lignes et interligne, ou placer un encart opaque derrière les lettres. |
| Polices et emojis | Le rendu varie selon l’appareil. Prévoir une famille générique (serif, sans-serif, monospace) ; vérifier les emojis utiles à l’énigme. |
Un beau décor doit aussi survivre au téléphone
Votre terminal est magnifique sur votre écran de bureau. Mais le géocacheur qui ouvre votre page au milieu des bois n’a pas forcément emporté son moniteur de 27 pouces.
| Contrôle | Ce qu’il faut vérifier |
|---|---|
| Description enregistrée | Le traitement de Geocaching.com peut changer le rendu de l’atelier. |
| Petit écran | Texte lisible, tableaux sans débordement, messages entiers ; éviter les dimensions trop rigides. |
| Application officielle | Comparer la description habituelle et sa vue web, qui permet de retrouver la mise en forme HTML et les images. |
| Énigme | Contraste, taille des lettres, couleurs ou positions utilisées comme indices. |
Conservez votre code de départ et revérifiez le résultat après chaque modification. Une difficulté d’énigme, oui ; une difficulté pour lire la consigne, beaucoup moins.
À vous de mettre la description en scène
Vous n’avez pas besoin de devenir développeur web pour commencer. Choisissez un modèle, changez quelques phrases, ajustez une couleur et regardez le résultat.
Avec un peu d’habitude, vous reconnaîtrez les conteneurs, les bordures et les espacements. Vous pourrez alors transformer une conversation, prolonger un carnet ou fabriquer votre propre document confidentiel.
Le plus intéressant n’est pas de décorer chaque centimètre de la page : c’est de donner à votre histoire ou à votre énigme une présentation qui lui correspond, tout en gardant un texte pratique à lire et à utiliser.
Alors, rendez-vous dans l’atelier CSS. Les boîtes sont prêtes, les pinceaux aussi. Il ne reste plus qu’à éviter le texte vert sur fond rouge. Enfin… je vous fais confiance. À peu près.
Choisir mon modèle dans l’atelier CSS →
Sources et repères techniques
- Geocaching — centre d’aide, section « HTML in cache pages ».
- MDN — CSS : feuilles de style en cascade.
- MDN — JavaScript.
- MDN — Cross-site scripting (XSS).
- MDN — Getting started with CSS : les trois méthodes d’intégration.
- MDN — élément
<span>et référence des éléments HTML. - MDN — Utiliser les animations CSS.
- Geocaching — centre d’aide, section « Web View ».
- MDN — attribut HTML
style. - MDN — Utiliser les dégradés CSS.
- MDN — Propriété transform.
- W3C — CSS Fonts : syntaxe des noms de familles.
- W3C — CSS Transforms : rendu, place réservée et empilement.
- MDN — Contextes d’empilement.