Crée facilement un effet de texte 3D avec Webflow !

Pour cela il suffira de quelques étapes simples :

Étape 1 : Utilisation de la propriété Texte Shaùdow

Le secret derrière l'effet 3D, c'est la propriété "texte shadow" !

Propriété récente dans Webflow, elle permet d'empiler plusieurs ombres pour créer l'illusion d'un effet 3D.

Étape 2 : Processus pas à pas:

• Sélectionnez votre titre et attribue-lui une classe.
• Accéde au panneau de style, puis à la section typographie.
• Dans "More Type Options", tu trouveras "texte shadow".
• Ajoute une ombre avec une distance de 3 pixels vers le bas, en utilisant une couleur de ton choix (par exemple, le rose).
• Empile les ombres en augmentant la distance de 3 pixels à chaque fois et en répétant la couleur choisie.

C'est cette répétition d'ombres qui va créer l'effet 3D sur ton texte.

Étape 3 (petit bonus) : Animation CSS : Pour ceux qui aiment expérimenter, tu peux ajouter une animation CSS.

En mettant la distance de toutes tes ombres à zéro dans l'état "over", tu peux créer une animation lorsque le curseur passe sur le texte.

Ajoute une transition pour lisser l'effet.‍

Rejoins notre formation Webflow pour tout savoir !

Notre plateforme de formation dédiée à Webflow compte déjà plus de 150 heures de vidéo et plus de 250 leçons, tu pourras apprendre Webflow à ton rythme pour devenir webdesigner