présente
Le
no-code France 🇫🇷
Membre du Club

Créez votre compte CORIACE

La plateforme dédiée au no-code, 100 française
  • Des initiations Webflow et Figma 100% offerte

  • Des formations avancées pour developper vos compétences sur les outils

  • Le programme d'affiliation no-code le plus rentable du marché

Rejoindre maintenant
+ 4000 no-codeurs
Noté
par nos étudiants

Créez votre compte CORIACE

La plateforme dédiée au no-code, 100 française
  • Des initiations Webflow et Figma 100% offerte

  • Des formations avancées pour developper vos compétences sur les outils

  • Une communauté Discord pour progresser ensemble

  • Le programme d'affiliation no-code le plus rentable du marché

Rejoindre maintenant
+ 4000 no-codeurs
Noté
par nos étudiants

FAQ Webflow et Figma

Comment faire un surlignage animé sur Webflow ?

Vous souhaitez ajouter un effet visuel attrayant à votre site Webflow ? Apprenez à créer un surlignement animé pour vos textes avec notre guide complet et améliorez l'expérience utilisateur de votre site.

Publié le
29/7/24
•  Durée de lecture :
7 min
Table des matières

Le surlignement animé est un effet visuel captivant qui peut ajouter une touche d'élégance et d'interactivité à votre site Web. Dans cet article, nous allons vous montrer comment créer cet effet sur Webflow en utilisant des propriétés CSS, en particulier le box shadow et les transitions. Suivez ces étapes simples pour ajouter un surlignement animé à vos textes.

Résumé de la méthode pour créer un surlignage personnalisé sur Webflow

Pour créer un effet de surlignement animé sur Webflow, utilisez la propriété CSS box shadow et l'état hover. Vous pouvez personnaliser la couleur, la position et l'animation du surlignement pour correspondre à l'esthétique de votre site. Cette technique permet d'attirer l'attention sur des éléments spécifiques de votre contenu.

Étape 1 : Préparation et Sélection du Texte

  1. Sélectionner le texte à surligner :
    • Choisissez la partie du texte que vous souhaitez animer.
    • Enveloppez ce texte dans un span.
  2. Ajouter une classe CSS :
    • Donnez un nom à cette classe, par exemple custom-underline.

Étape 2 : Appliquer le Box Shadow

  1. Configurer le Box Shadow :
    • Accédez aux paramètres de style du span.
    • Ajoutez une box shadow à l'intérieur de l'élément (inside).
    • Ajustez les propriétés suivantes :
      • Couleur : Choisissez une couleur qui se démarque, comme le orange.
      • Flou : Réglez le flou à zéro pour une ligne nette.
      • Angle : Positionnez la box shadow en bas pour qu'elle apparaisse sous le texte.

Étape 3 : Animer le Surlignement avec l'État Hover

  1. Configurer l'État Hover :
    • Accédez à l'état hover de la classe via le panneau de style.
    • Modifiez la box shadow pour qu'elle s'étende davantage à l'horizontale (par exemple, à 20 pixels).
    • Diminuez l'opacité de la couleur pour un effet de surlignement plus subtil.

Étape 4 : Fluidifier l'Animation

  1. Ajouter une Transition :
    • Ajoutez une transition sur la propriété box shadow.
    • Réglez la durée de la transition à environ 200ms pour un effet fluide.
  2. Optionnel : Changer le Curseur :
    • Changez le curseur en pointer lors du survol pour indiquer qu'il s'agit d'un élément interactif.

En suivant ces étapes, vous pouvez facilement ajouter un surlignement animé à vos textes sur Webflow, rendant votre site plus interactif et visuellement attrayant. Cet effet est non seulement esthétique, mais aussi pratique pour attirer l'attention des utilisateurs sur des informations clés.

Partager l'article :
Formez-vous maintenant !
Nos SUPER Abonnements
Tous niveaux
Devenez un expert Webflow à partir de 37€ seulement !
Formation 100% Offerte
Accédez à une initiation Webflow 100% OFFERTE maintenant !