Onglets soulignés à la plume
Des onglets en serif italique où un trait d'encre se dessine sous l'onglet choisi et s'efface sous le précédent.
Réglages
Code
<div class="uvq12-it"><div role="tablist" aria-label="Sections"><button type="button" role="tab" id="uvq12-it-t0" aria-selected="true" aria-controls="uvq12-it-p0" tabindex="0"><span>Essais</span><svg viewBox="0 0 100 12" preserveAspectRatio="none" aria-hidden="true"><path d="M2 7c18-4 30 3 48 0s32-3 48 1" pathLength="1"/></svg></button><button type="button" role="tab" id="uvq12-it-t1" aria-selected="false" aria-controls="uvq12-it-p1" tabindex="-1"><span>Notes</span><svg viewBox="0 0 100 12" preserveAspectRatio="none" aria-hidden="true"><path d="M3 8c10-5 22 2 34-1s30-4 60 0" pathLength="1"/></svg></button><button type="button" role="tab" id="uvq12-it-t2" aria-selected="false" aria-controls="uvq12-it-p2" tabindex="-1"><span>Lettres</span><svg viewBox="0 0 100 12" preserveAspectRatio="none" aria-hidden="true"><path d="M2 6c20 3 40-3 60 0s25 2 36-1" pathLength="1"/></svg></button><button type="button" role="tab" id="uvq12-it-t3" aria-selected="false" aria-controls="uvq12-it-p3" tabindex="-1"><span>Poèmes</span><svg viewBox="0 0 100 12" preserveAspectRatio="none" aria-hidden="true"><path d="M2 8c15-3 25 1 45-2s35 3 51 0" pathLength="1"/></svg></button></div><div class="pn" role="tabpanel" id="uvq12-it-p0" aria-labelledby="uvq12-it-t0">Douze textes courts sur la ville et le bruit.</div><div class="pn" role="tabpanel" id="uvq12-it-p1" aria-labelledby="uvq12-it-t1" hidden>Notes éparses, listes et phrases entendues dans le train.</div><div class="pn" role="tabpanel" id="uvq12-it-p2" aria-labelledby="uvq12-it-t2" hidden>Correspondance avec des amis qui vivent loin.</div><div class="pn" role="tabpanel" id="uvq12-it-p3" aria-labelledby="uvq12-it-t3" hidden>Des vers courts écrits avant l'aube.</div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Navigation
Voir tout : NavigationOù l’utiliser
Des onglets à l'allure littéraire en serif italique, où l'onglet actif reçoit un soulignement à l'encre tracé à la main. Au changement, l'ancien trait s'efface depuis son début et le nouveau se dessine de gauche à droite, tandis que le survol montre d'abord un léger trait de crayon. Chaque trait est un chemin SVG animé avec stroke-dashoffset, idéal pour les blogs, magazines et portfolios.
La couleur principale est l'encre et la secondaire le crayon de l'aperçu. Modifie le chemin dans les données pour donner à chaque onglet son propre tremblé, et limite les libellés à un ou deux mots.