Outline to Fill
Texte contour qui se remplit de couleur au survol — pure CSS, zéro JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'état de repos repose sur deux propriétés combinées : -webkit-text-stroke trace le contour du glyphe (largeur + couleur), et color: transparent masque le remplissage intérieur. Le texte n'est visible qu'en silhouette creuse.
Au survol (:hover), color passe à la couleur de remplissage (#6366f1) et -webkit-text-stroke est remis à zéro. La transition: .4s posée sur l'élément au repos anime les deux propriétés simultanément : le contour s'efface pendant que le remplissage apparaît en fondu.
-webkit-text-stroke est préfixée mais supportée nativement dans tous les moteurs modernes — Chrome, Firefox, Safari, Edge — sans polyfill. Contrairement à text-shadow, elle s'applique sur le tracé vectoriel du glyphe, ce qui préserve des bords nets à toutes les tailles et tous les font-weights.
L'effet est entièrement stateless : aucun JS, aucun DOM supplémentaire. Appliquez la classe text-outline-fill sur n'importe quel élément textuel et ajoutez le CSS — c'est prêt.
Accessibilité
- prefers-reduced-motion absent : la transition (.4s) s'exécute quelle que soit la préférence système. Ajoutez
@media (prefers-reduced-motion: reduce) { .text-outline-fill { transition: none } }pour les utilisateurs sensibles au mouvement. - L'effet n'est déclenché que par
:hover— non accessible au clavier. Ajoutez.text-outline-fill:focus-visible { -webkit-text-stroke: 0 transparent; color: #6366f1 }pour l'activer aussi à la mise au focus. - Le contenu textuel est du HTML natif (
<span>) : les lecteurs d'écran le lisent normalement, indépendamment du style visuel — aucun attributarian'est requis sur l'élément. - État de repos : seul le contour (#6366f1, 2 px) est visible. À 2 px sur fond sombre, le rapport de contraste du trait seul peut être inférieur à 4,5:1 — augmentez l'épaisseur ou la couleur si la lisibilité l'exige.
- État rempli : #6366f1 sur #0a0a0f donne un rapport de contraste d'environ 4,6:1 — conforme WCAG AA (≥ 4,5:1). Sur fond clair, vérifiez avec votre palette.
Compatibilité navigateur
Repose exclusivement sur -webkit-text-stroke et color — aucun JavaScript, aucune dépendance externe.
Si <code>-webkit-text-stroke</code> n'est pas supporté (navigateurs très anciens), le texte s'affiche avec sa <code>color</code> de remplissage normale — aucune erreur, le contenu reste lisible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<span class="text-outline-fill">VOTRE TEXTE</span>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| -webkit-text-stroke (largeur) | 2px | Épaisseur du trait de contour. 1 px = délicat, 3–5 px = affiché et lisible à distance. Au-delà de 5 px les glyphes peuvent se fermer sur les petites tailles de police. |
| -webkit-text-stroke (couleur) | #6366f1 | Couleur du contour à l'état de repos. Peut différer de la couleur de remplissage pour un effet bicolore (contour + remplissage chromatiquement distincts). |
| color (état hover) | #6366f1 | Couleur de remplissage au survol. Même valeur que le contour pour un résultat monochrome ; valeur différente pour un effet bicolore. |
| transition | .4s | Durée de l'animation. 0,2 s = réponse vive (gaming, UI), 0,6–0,8 s = fondu lent et cinématique. Ajoutez ease-in-out pour adoucir les extrémités. |
| font-size | 2.5rem | Taille du texte. L'effet est plus spectaculaire au-delà de 3 rem — en dessous, le trait de 2 px occupe une part disproportionnée du glyphe. |
| font-weight | 800 | Grammage. Les poids lourds (700–900) donnent un trait plus visible et un remplissage plus massif. Les poids légers (300–400) produisent un effet plus aérien. |
FAQ
-webkit-) mais supportée nativement dans tous les moteurs modernes — y compris Firefox depuis v49 et Edge depuis v79 — sans polyfill. La propriété non préfixée (text-stroke) n'est pas encore standardisée dans CSS. Pour un rendu identique sans préfixe, l'alternative est un <svg> avec stroke et fill, au prix d'une structure plus complexe.:hover, invisible pour un utilisateur au clavier. Ajoutez un sélecteur .text-outline-fill:focus-visible { -webkit-text-stroke: 0 transparent; color: #6366f1 } pour que la mise au focus produit le même résultat visuel. Assurez-vous que l'élément est focusable (tabindex="0" si ce n'est pas un lien ou un bouton).:hover, conservez -webkit-text-stroke à sa valeur de repos au lieu de le remettre à zéro. Seule color changera — vous obtenez un texte contouré qui se colorie intérieurement au survol, le trait restant présent. L'effet est plus subtil mais lisible à des tailles plus petites.
