15 beaux effets de texte créés avec CSS

Un beau texte ou une typographie rendra votre dessin attrayant. Dans la conception Web, CSS permet de donner un style à la conception, y compris divers effets dans le texte ou la typographie. Avec CSS, vous pouvez utiliser le découpage et ajouter une animation au texte pour pimenter un peu les choses.

Et pour illustrer cela, nous avons rassemblé 15 effets de texte superbes et sympas rendus possibles par CSS (certains avec un peu d'aide de codes Javascript).

Pour plus de choses que vous pouvez faire avec CSS, consultez:

• 18 choses cool que vous ne croirez pas ont été construites avec CSS
• 30 bibliothèques d'effets de texte jQuery à connaître
• Comment créer une forme de coeur avec CSS
• Animate.css - Bibliothèque CSS3 pour créer facilement une animation

Animation du trait élastique

Yoksel anime le trait du texte avec un jeu de couleurs sympa. Cet effet est fait avec CSS et SVG. Le résultat est génial!

SVG Glitch

Vous voulez créer des effets qui ressemblent à une télévision analogique en panne? Dirk Weber a créé cet effet de pépin stupéfiant en utilisant les filtres CSS et SVG.

Shop Talk logo

Hugo recrée le logo Shop Talk en utilisant uniquement du CSS. Le logo ressemble à l'original, avec la bonne texture.

Effet de barre

Cette idée de Robet Messerle donne au couteau un effet tranché, réalisé avec moins de 70 lignes de CSS.

Effet d'ombre élégant

L'effet Long Shadow vient en texte, créé à l'aide de CSS. Le créateur, Juan Brujo a créé 4 autres effets, mais c’est de loin le plus impressionnant..

Effet de texte brumeux

Andreas crée un effet de brouillard cinématographique impressionnant. Applicable sur les navigateurs Webkit uniquement.

Masque de texte SVG

Une conception de Marco Barria montre un effet de masquage de texte élégant sur une grande image de fond.

Animation de texte

Yoann a créé un formidable effet de ticker avec cette animation de texte. Regardez comment le deuxième mot alterne entre trois mots.

Frapper le sol

Cet effet 3D de ThatGuySam est un jeu simple sur les ombres de texte, mais avec un résultat impressionnant.

Texte du clip d'arrière-plan

Jintos jouait avec un clip d'arrière-plan Webkit pour ajouter une image d'arrière-plan à l'intérieur du texte. Il a réalisé 16 créations cool en utilisant cette méthode.

CSS Text-FX

Moklik a ajouté un effet de lumière atténuée au texte, produisant des flashs intermittents qui avertissent du danger de loin..

Signature animée de la signature

Gary Hepting a créé une animation de signature en temps réel. Cela fonctionne en appliquant Javascript au chemin SVG pour animer la signature.

Coloré glitchy 404

Entendez-vous le son de ce problème et sentez-vous la vibration dans votre tête? Voilà comment cet effet de pépin est bon. mistic100 fait avec CSS et un peu de Javascript.

Cosmos

Il s’agit maintenant d’un logo élégant et inspirant. Il convient également pour une utilisation pour “Cosmos”, parce que les orbites, l'obtenir?

Chargement

Un effet de chargement cool qui consiste simplement à cacher et à afficher des lettres.