Comment j'ai créé
ma nouvelle signature Gmail
Synthèse du profil, travail graphique,
et la douche froide des contraintes CSS email
Après avoir structuré mon llms-profil.txt pour synthétiser mon identité à destination des IA, l’étape suivante s’est imposée naturellement : appliquer la même rigueur de synthèse à ma signature e-mail. Même approche, autre format — mais pour les humains qui reçoivent mes mails.
La signature e-mail, c’est un espace microscopique mais stratégique. 600px max, lecture en 3 secondes, support HTML minimal. Une carte de visite interactive, un signal de professionnalisme — et un vrai reflet de ce qu’on fait. Le point de départ : le llms-profil.txt avait déjà fait le travail dur de synthèse. Qui je suis, ce que je fais, pour qui, depuis quand. Il fallait juste transposer ça en format visuel compact.
Beaucoup de synthèse, beaucoup d'itérations graphiques
Le processus a été plus long qu’attendu. Beaucoup de synthèse de contenu d’abord : quelles informations garder ? Nom, titre, site, téléphone OK — mais aussi les liens sociaux ? Les compétences clés ? Les services ?
Puis le travail graphique : typographie, couleurs, mise en page. Plusieurs dizaines de versions. Ma copine a participé — deux cerveaux valent mieux qu’un sur ce genre de question esthétique.
Finalement, on arrive à quelque chose de propre. On est contents. Et là…
La douche froide : adieu les ombres
Dans un client mail (Gmail, Outlook, Apple Mail), la CSS est filtrée de manière brutale. Ce qui fonctionne dans un navigateur disparaît silencieusement dans un inbox :
| Propriété CSS | Support email |
|---|---|
box-shadow | ❌ Ignoré |
text-shadow | ❌ Ignoré |
filter: drop-shadow() | ❌ Ignoré |
border-radius | ⚠️ Partiel (Outlook = non) |
background: linear-gradient | ⚠️ Partiel |
border: 1px solid | ✅ Supporté partout |
style="" inline | ✅ Obligatoire |
Les ombres donnent de la profondeur et de la hiérarchie visuelle. Sans elles, un design peut paraître plat, générique, sans relief. Impossible d'afficher le moindre box-shadow, border-shadow ou drop-shadow dans un mail.
La solution : border 1px avec transparence
Avec ma copine, on a trouvé le contournement : remplacer les ombres par des borders semi-transparentes. Au lieu d'une ombre projetée, un contour subtil avec de la transparence pour créer l'illusion de profondeur.
Ça ne remplace pas une ombre portée à l'identique — mais ça crée une séparation visuelle élégante, un contour qui respire, une définition des éléments sans agressivité. Et surtout : ça fonctionne partout, même sur Outlook 2016.
La vraie signature et celle de mes rêves
Ma signature — le code (cadeau)
Code complet à copier-adapter. Remplacez le nom, le téléphone, les liens — le reste est clé en main.
💡 Note importante
Le box-shadow sur le <div> principal ne s'affichera pas dans Gmail — seul le border: 1px solid rgba(...) fonctionnera. C'est notre solution "border transparente".
Comment installer sa signature dans Gmail
Workflow complet — pas besoin d'outil externe, juste un navigateur.
<div>...</div> — sans balises <html> / <head>< > (source HTML) dans l'éditeur
Voir les deux versions sur CodePen
La vraie (email-safe, prête à coller dans Gmail) et celle de mes rêves (navigateur uniquement).
Oui je vous autorise à faire une copie,
un fork, et de modifier pour vous ! Gratuit par ici !
Petite selection de VOTRE signature, avec la souris, sur Codepen, clic-droit, copier... puis go gMail !
