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
Devenez expert Webflow avec notre formation 100% OFFERTE
Rejoignez notre formation d'initiation et maîtrisez les bases de l'outil
Je m'inscris
Devenez expert Figma avec à notre formation 100% OFFERTE
Rejoignez notre formation d'initiation et maîtrisez les bases de l'outil
Je m'inscris
