116 Exemples d’effets de texte CSS cool que vous pouvez télécharger

Publicité

La typographie web est une chose majeure qui a radicalement changé avec CSS3. Vous pouvez rendre votre conception attrayante avec seulement quelques astuces CSS simples.

Lorsqu’il s’agit de conception web, CSS vous aidera à obtenir de nombreux effets de police différents, y compris l’utilisation d’effets tels que l’animation et le détourage pour épicer un peu les choses.

Pour aider à illustrer davantage cela, nous avons rassemblé une liste d’effets qui sont visuellement étonnants et beaux, tous rendus possibles par CSS, et certains d’entre eux avec un peu de Javascript aussi.

Table des matières

• Effets de texte CSS animés
• Effets de texte CSS ombré
• Effets de texte CSS 3D
• Fond de texte CSS
• Effets de texte CSS survolé
• Effets de texte CSS glitch

.

• Effets de texte CSS cool

Effets de texte CSS animé

Animation de texte

Le deuxième de ces effets de texte CSS est de Yoann Helin. Il a créé en CSS cet effet que vous avez peut-être vu sur de nombreux sites web de portfolio et de présentation.

Line text.

Texte animé avec HTML, CSS et JavaScript.

COSMOS

Bien que cet effet de texte CSS ne soit pas le plus utile, il est tout de même impressionnant.

Voici ce que l’auteur a utilisé :

• vw, vh, vmin unités pour la réactivité
• flexbox pour tout centrer
• multiples box-shadows pour les étoiles
• animation des keyframes pour les planètes
• transform pour faire tourner les planètes

Motif « text-shadow » motif

Uses -webkit-background-clip : text & linear-gradient pour simuler une ombre de texte rayée.

Publicité

Signature animée de la signature (chemins SVG)

Utilise ce stylo pour animer l’écriture d’une signature avec SVG stroke-dashoffset/stroke-dasharray et des transitions CSS.

SVG Path animated Text

Animer le texte « Design » sur la base d’un chemin SVG. Cliquez pour basculer l’animation.

Remplissage de texte animé avec du texte svg pratique

Remplissage de texte animé avec HTML(Pug), CSS(SCSS) et SVG.

Texte animé avec Snapsvg

Travailler avec cela ressemble à un vieux bon Flash 🙂

Rotation verticale de texte css avec préfixes de navigateur

Rotation verticale de texte avec HTML et CSS.

Texte tournant

HTML, CSS and JavaScript rotating text.

#Codevember 3D Quote Rotator

Utilisation de GreenSock et du plugin SplitText pour créer un effet de texte 3D.

Impossiblement pompette

Interesting effect for text.

Foggy text effect

Cinematic intro text effect (Webkit only – text mask). C’est expérimental, mais il fallait quand même l’inclure parmi ces effets CSS.

sériewebdev – Animation de texte coloré #mise à jour

Module d’animation de texte coloré fluide et configurable réalisé avec SCSS.

CSS Texte se remplissant d’eau

Le prochain de ces effets de texte CSS est une animation de texte se remplissant d’eau, pour les préchargeurs et autres.

GSAP Text Animation

Effet de texte utilisant Greensock.

Effet de texte ondulé (avec SVG/mode blend)

Effet de texte ondulé avec HTML et CSS.

Animation de texte fracassant

GSAP text animation. Éclatement du chemin SVG. Ralenti au survol.

Squiggly Text

Squiggly text experiment with SVG filters.

Les titres animés

Une collection de titres animés, avec des mots interchangeables qui se remplacent les uns les autres grâce à des transitions CSS.

L’animation de texte : Montserrat

HTML and CSS text animation.

Shaded Text

Shaded text, une expérience SVG + CSS3 sur les ombres animées. Il n’est pas optimisé pour les appareils mobiles… pour l’instant.

Texte animé en SVG

HTML, CSS and SVG animating text.

dessin de texte en couleur

Dessin de texte en utilisant le plugin drawSVG de greensock.

Pure CSS Text Animation

HTML et CSS animation de texte.

Remplissage de texte animé

Remplir votre texte avec des images de fond animées – pas besoin de JavaScript.

Effet de texte bouillonnant

Un exemple alimenté par jQuery de la façon dont vous pouvez créer un effet de bouillonnement sur un titre HTML. Les bulles apparaissent comme si elles venaient de derrière le texte, puis s’effacent et sont supprimées.

Texte fumé

Combinaison de text-shadow et de transformations CSS (notamment skew) pour un effet fumé (ou smokey ?).

jquery break/animate warping text paragraph example

HTML, CSS and JavaScript break/animate warping text paragraph example.

Vague animée clippée par le texte

Vague animée à l’intérieur du texte avec svg. Image en arrière-plan et gradient remplissant la vague.

(cool) effet de texte

Texte animé avec image GIF.

Untitled

Texte animé avec HTML, CSS et JS.

Révélation de texte fractionné

Révélation de texte fractionné en HTML, CSS et JavaScript.

Morphing de texte en peau d’oignon

Morphing de texte en peau d’oignon en HTML/CSS/JS.

Texte-ombre animé

Texte-ombre animé avec HTML et CSS.

Masque vidéo SVG sur le texte

Masque vidéo SVG sur le texte.

GSAP text reveal animation

GSAP text reveal animation.

SVG animation de texte

Nice SVG text animation.

CSS Only Random Text Transform (Animated)

Générer une transformation de texte aléatoire en utilisant uniquement CSS.

Effet de texte de film silencieux

Effet de texte de film avec canvas.

CSS TEXT REVEALING ANIMATION

Pure CSS text revealing animation.

Letter Animation

Animation de lettres avec CSS.

Animation de lignes de texte

Jolie animation de lignes de texte avec TweenMax.js.

Helo!

Cliquez pour redessiner ! Cartographier des sprites en texte est toujours amusant.

CSS only Frozen text

CSS only frozen text effect with background-clip, blend modes and gradient text.

effet de lettres

Effet de lettres sur le scroll.

Masking Path Animation

Parfois le simple est tout aussi efficace que le complexe.

Animation d’écriture manuscrite (SVG + CSS)

SVG and CSS handwriting animation. Afin d’optimiser le SVG pour l’animation, le graphique a été découpé en plus petits morceaux. Cela a été fait principalement pour empêcher les éléments de chemin de se chevaucher avec des éléments clipPathnon liés, mais a également permis un contrôle plus fin de l’animation. Tous les éléments de chemin animés ont été exportés d’Adobe Illustrator et affinés avec du code.

Dégradé de texte animé

Joli texte animé avec dégradé.

CSS Shadow text effects

CSS Dashed Shadow

Pure css hipster-ish typographic dashed shadow.

Effet de texte hit the floor

CSS3 text-shadow effects

HTML et CSS3 text-shadow effects.

Mélange de dégradés d’ombres longues

Un mixin Sass (Scss) pour générer rapidement des dégradés d’ombres longues. Convient à la fois pour ‘text-shadow’ et ‘box-shadow’.

CSS Text Shadow

Taking a stab at a Lynda.com tutorial. CSS : Techniques typographiques avancées utilisant le lettrage.js

Text-Shadow

HTML and CSS text-shadow.

Awesome Text-Shadow

Awesome text-shadow with CSS3.

Shadow Parallax – Reactjs

Move your Mouse and Play words. Écrit par React, ES6, Babel transpiler.

Effet d’ombre de texte néon

9 neon CSStext-shadow effects.

Styler du texte avec SVG (deuxième ombre)

Styling text with SVG.

Pretty shadow

Pretty shadow with HTML and CSS.

Ombre de texte

Ombre de texte purement CSS.

Ombre de texte fantaisie

Ombre de texte fantaisie.

Effet CSS Groovy

Effet de police des années 1960 utilisant la propriété CSS text-shadow avec la fonction SASS et les mixins pour garder le code DRY.

Effets de texte CSS 3D

Effet de texte 3D – mousemove

Nice 3D Text effect with jQuery mousemove.

Effet de texte extrudé 3D- CSS uniquement

HTML et CSS 3D extrude text effect.

CSS Text Stroke | CSS Text Border – Effet infini uniquement avec #CSS #html5

Changez le texte pour revoir l’animation.

3D CSS Typography

Single element, multi-coloured 3d text effect

Single element with multi-colored text and 3D text shadow effects. Juste jouer avec différentes propriétés CSS pour créer des effets de texte amusants.

Seulement SS : Text Wave

Seulement CSS text wave.

Texte déformé et tourné

Texte avec CSS skew() et rotate().

Effets de marquage de texte 3D

3D text marquee effects.

Fond de texte CSS

-webkit-background-clip:text effet CSS

Utiliser -webkit-background-clip : text et -webkit-fill-text-color : transparent pour appliquer un fond à un texte sur le navigateur webkit.

Définir une couleur de repli pour les autres navigateurs.

Coupure d’arrière-plan

Coupure d’arrière-plan du texte.

SVG Knockout Text with Video Background

Cette démo explore la création de textes/trajets knockout en SVG et la mise en boucle d’une vidéo YouTube comme remplissage.

Masque de texte SVG

Fond de texte gluant avec filtres SVG

Exemple d’utilisation d’un filtre SVG gluant pour créer des bords lisses autour d’un texte en ligne avec un fond.

Déplacement du texte nuageux | HTML + CSS

Déplacement du texte nuageux avec HTML et CSS.

CSS Attempts at text with inline skewed background

L’utilisation du skew n’est rendue que si l’élément est display: block ou inline-block. Certains d’entre eux ont le même aspect sur un viewport large mais échouent différemment lorsque la largeur du viewport est réduite.

Effets de texte de survol CSS

Type d’ouverture

Efek Typography Text Neon part 1

Text design (typographie) avec effet néon.

Masque de texte en mouvement d’arrière-plan sur MouseMove – v2

Essai de la nouvelle fonctionnalité « background-clip : text », avec arrière-plan en mouvement.

Transformations de texte pelé

Ce stylo montre du texte qui semble être pelé de la page. Il a une animation douce lorsqu’il est survolé.

Happy Text

HTML et CSS happy text effect.

Texte en surbrillance animé

L’idée est simple, elle fait usage de gradient linéaire et de transition.

3d hover text effect

HTML, CSS and JavaScript 3d hover text effect.

CSS Perspective Text Hover

Une expérience utilisant les webfonts en combinaison avec les outils de transformation CSS 3D.

Focus Text Hover Effect | HTML+ CSS + jQuery

Hover CSS effect for text.

Animated underlines

Demo d’un effet de soulignement animé. Animation CSS pure.

Comment puis-je obtenir un soulignement coloré personnalisé qui s’étendra sur plusieurs lignes ?

Pretty underline hover effect.

Simple effet de survol CSS utilisant des boucles Sass

Simple petite animation de survol. Les boucles Sass rendent les retards d’animation stupéfiants vraiment faciles à faire… vous pouvez en tirer beaucoup de kilométrage.

Spring Text Hover Effect

Just playing around with effects for buttons and thought this was pretty cool.

Couches de texte mélangé

Contenu généré avec JS.

CSS glitch text

Colorful Glitchy 404

CSS glitched text by skew

HTML and CSS glitched text by skew.

CSS-Only Glitch Effect

Sorte d’effet de glitch avec animation CSS.

Glitch

Glitch texte avec HTML et CSS.

Texte glitchy

Texte glitchy avec HTML et CSS(SCSS).

Texte glitch

Texte glitch en HTML(Pug) et CSS(SCSS).

Texte glitch (étude de The Verge)

HTML, CSS et JavaScript glitched text.

SVG Glitch

VHS text

VHS text with HTML, CSS and JavaScript.

Psycho Glitch (variables CSS & @keyframes)

L’effet « glitch », recréé avec des propriétés personnalisées CSS animées. Pure CSS.

Simple text glitch

Pure CSS simple text glitch.

Effets de texte CSS cool

Effet CSS glitch

Elastic stroke CSS + SVG

Le premier de ces cool CSS Text Effects vient de Yoksel. Elle a choisi un jeu de couleurs étonnant pour cette magnifique animation de texte CSS.

SVG Text : Frappe animée

HTML, CSS and SVG animated typing.

Type de texte thingamy

HTML, CSS and JavaScript text typing thingamy.

Futuristic Resolving/Typing Text Effect feat. GLaDOS

Futuristic resolving/typing text effect usually found in game or movie cut scenes to reveal text on screen.

Transmission : Glowing Text Animation

Un petit effet de texte lumineux. D’abord, un peu de JS pour envelopper chaque lettre dans un span. Puis une animation par image clé, avec mixin animation-delay, éclaire chaque lettre successivement.

Effet de brouillage de texte

Un petit effet de décodage/brouillage de texte.

Type cinétique avec Greensock

Type cinétique avec HTML, CSS et JavaScript (Greensock).

L’effet de texte LOVE

Effet de texte brouillé inspiré par le film de science-fiction primé « LOVE ».

Texte à frappe automatique (fonction)

Texte à frappe automatique avec HTML, CSS et JavaScript.

Typing Text

Typing text en HTML, CSS et JavaScript.

Typing Effect

Typing effect for text made with a simple JQuery function. Il suffit d’appeler la fonction avec l’élément que vous souhaitez animer comme premier argument et la vitesse d’animation comme deuxième argument.

Si vous avez aimé cet article avec les effets de texte CSS, vous devriez également consulter ces articles :

• Libres d’animation CSS et Javascript pour créer des effets impressionnants
• Exemples de diaporamas CSS que vous pouvez utiliser dans vos sites web
• Certaines des bibliothèques CSS les plus populaires qui sont sur Github

.