WEBFLOWCustomiser la couleur de la barre de soulignement sous un texte sur Webflow peut sembler impossible à première vue, car changer la couleur de la barre de soulignement change également la couleur du texte. Cependant, il existe une astuce simple pour y parvenir en utilisant l'effet box shadow. Suivez ce guide étape par étape pour apprendre comment faire.
Résumé de la Méthode
Pour customiser la barre de soulignement sous un texte sur Webflow, commencez par appliquer une ombre de boîte intérieure (box shadow) avec les paramètres appropriés. Utilisez la couleur souhaitée pour l'ombre et ajustez les paramètres de flou et de distance pour obtenir l'effet désiré. Cette méthode permet de changer la couleur de la barre de soulignement sans affecter la couleur du texte.
Étape 1 : Préparation du Texte
- Sélectionnez le texte que vous souhaitez customiser.
- Réinitialisez les paramètres de soulignement :
- Changez la couleur du texte à la couleur désirée (ex. noir).
- Retirez toute soulignement existant.
Étape 2 : Appliquer une Ombre de Boîte Intérieure (Box Shadow)
- Accédez aux effets de style :
- Cliquez sur le texte et allez dans l’onglet des effets.
- Sélectionnez
Box Shadow.
- Configurez l’ombre de boîte :
- Type : Inside
- Couleur : Choisissez la couleur souhaitée pour la barre de soulignement (ex. rose).
- Opacité : 100%
Étape 3 : Ajuster les Paramètres de l’Ombre
- Angle de l’ombre :
- Changez l’angle à 0 degrés pour que l’ombre soit directement sous le texte.
- Flou (Blur) :
- Réglez le flou à 0 pour obtenir une ligne nette.
- Distance :
- Ajustez la distance pour définir l’épaisseur de la barre de soulignement. Par exemple, mettez 5 pixels.
Résultat Final
Après avoir appliqué ces paramètres, vous devriez voir apparaître une barre de soulignement sous votre texte, de la couleur choisie et distincte de la couleur du texte. Cela vous permet de customiser votre design tout en gardant une flexibilité totale sur l’apparence de votre texte et de ses soulignements.
