Catégories
Astuces et Design

25+ effets de texte CSS intéressants – 1stWebDesigner

Dans l'article d'aujourd'hui, nous partageons certains des effets de texte CSS les plus intéressants et les plus inhabituels – certains avec l'aide de JavaScript – que nous avons trouvés sur CodePen pour votre inspiration et pour éventuellement les utiliser dans l'un de vos projets à venir. Ces exemples vont des animations, aux interactions de survol, en passant par simplement uniques. Peut-être que vous en avez déjà vu, ou peut-être sont-ils tous nouveaux pour vous. Quoi qu'il en soit, nous espérons que vous les trouverez utiles et inspirants.

Votre boîte à outils Web Designer
Téléchargements illimités: plus de 500 000 modèles Web, jeux d'icônes, thèmes et éléments de conception


Une animation de montée d'escalier astucieuse en vol stationnaire.

Voir le survol du texte de la perspective CSS Pen par James Bosworth (@bosworthco) sur CodePen.dark

Voici un effet de frappe inhabituel.

Voir l'effet de texte Pen LOVE de Matthew Wagerfield (@wagerfield) sur CodePen.dark

Un effet de texte néon chatoyant très cool fait avec du CSS pur.

Voir le texte néon chatoyant Pen CSS uniquement par Giana (@giana) sur CodePen.dark

Autre effet de frappe, répliquant cette fois un terminal avec un curseur clignotant.

Voir l'effet de texte Pen Terminal de Tobias (@Tbgse) sur CodePen.dark

Celui-ci a l'apparence d'une enseigne au néon clignotant allumée et éteinte, codée uniquement en CSS.

Voir le Pen CSS Text-FX de moklick (@moklick) sur CodePen.dark

Voici un effet de texte animé intéressant qui rassemble les lettres en mots.

Voir l'animation de texte Pen GSAP par Nate Wiley (@natewiley) sur CodePen.dark

Cet effet donne au texte l'apparence d'un vieux film muet, le tout réalisé avec du CSS pur.

Voir l'effet de texte Pen Silent Movie de Dimitra Vasilopoulou (@mimikos) sur CodePen.dark

Un effet de texte chatoyant et animé fluide, encore une fois en CSS pur.

Voir le Pen CSS Shimmer Text Effect de Robert Douglas (@redouglas) sur CodePen.dark

Très bel effet de texte qui fait que l'arrière-plan masqué par le texte s'écoule de manière fluide avec la direction de la souris.

Voir le survol de texte Pen Fluid par Robin Delaporte (@ robin-dela) sur CodePen.dark

Effet de texte simple mais efficace où les lettres volent du haut vers le bas.

Voir le Pen Fly in, fly out par Neil Carpenter (@neilcarpenter) sur CodePen.dark

Un effet de texte intéressant dans lequel le texte repousse le mouvement de la souris.

Voir les répulsifs de stylo de Johan Karlsson (@DonKarlssonSan) sur CodePen.dark

Déplacer la souris crée un effet de texte 3D sympa dans cet exemple.

Voir l'effet de texte 3D Pen – mousemove par Dennis Garrn (@dennisgarrn) sur CodePen.dark

Une belle animation de fond masqué.

Voir l'effet de texte Pen (cool) par Hakkam Abdullah (@Moslim) sur CodePen.dark

Une animation bouillonnante propre à utiliser dans les en-têtes ou comme vous le souhaitez, réalisée avec CSS et jQuery.

Voir l'effet de texte de bulle de stylo par html5andblog (@ html5andblog) sur CodePen.dark

Cette animation simule une ampoule scintillante dans le texte.

Voir le Pen Flickering Light Text Effect de Mandy Michael (@mandymichael) sur CodePen.dark

Celui-ci n'a besoin d'aucune introduction ou explication.

Voir l'effet de texte Pen Matrix de Collin Henderson (@syropian) sur CodePen.dark

Un effet de texte fluide qui reproduit la séquence d'ouverture d'un film ou d'une bande-annonce.

Voir la séquence d'ouverture du stylo par Sebastian Schepis (@sschepis) sur CodePen.dark

Une animation sympa qui répond aux mouvements de la souris.

Voir l'effet de texte Pen Sliding par ChenXin_nth (@chenxinnn) sur CodePen.dark

Un effet inhabituel qui fait craquer le texte, réalisé en CSS pur.

Voir le Pen Black Mirror Cracked Text Effect par George W. Park (@GeorgePark) sur CodePen.dark

Survolez le texte pour voir un effet inhabituel.

Voir l'effet de texte Pen par Max Nguyen (@maxnguyen) sur CodePen.dark

Voici un autre effet de texte animé CSS pur et inhabituel.

Voir l'effet de texte Pen In / Out of Focus par Jonny Scholes (@jonnyscholes) sur CodePen.dark

Chaque lettre tourne en position pendant qu'elle est tapée dans cet effet intéressant.

Voir la fonctionnalité Pen Futuristic Resolving / Typing Text Effect. GLaDOS par Kevin (@qkevinto) sur CodePen.dark

Voici quelques effets de survol en CSS pur.

Voir la collection Pen Une collection d'effets CSS text-shadow et pattern par Ashley Watson-Nolan (@ashleynolan) sur CodePen.dark

Effet de suivi du curseur très bien fait.

Voir l'écran de texte du curseur Pen Spotlight par Caroline Artz (@carolineartz) sur CodePen.dark

Un effet de texte masqué animé CSS relativement simple utilisant SVG avec le mode de fusion.

Voir l'effet de texte Pen Wave (avec SVG / mode de fusion) par Lucas Bebber (@lbebber) sur CodePen.dark

Une belle animation dont vous pouvez contrôler la vitesse en faisant glisser votre souris dessus.

Voir l'effet de texte de particule de stylo par Tom (@tomncurry) sur CodePen.dark

Un pur effet de texte glitchy CSS.

Voir le texte Pen Glitch de Fabio (@fabiowallner) sur CodePen.dark

Comment allez-vous utiliser ces effets de texte CSS?

Nous espérons que vous avez apprécié les exemples créatifs que nous avons trouvés et partagés avec vous, et que vous pourrez les utiliser dans vos projets. N'oubliez pas de consulter également nos collections d'extraits de code CSS!

Cet article peut contenir des liens affiliés. Voir notre divulgation sur les liens d'affiliation ici.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *