Chromatic Aberration Text
Deux pseudo-éléments CSS ::before et ::after dupliquent le texte via content: attr(data-text) et se décalent en sens opposés au survol, simulant la dispersion chromatique d'un prisme.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur deux pseudo-éléments CSS (::before et ::after) qui reproduisent le texte grâce à content: attr(data-text). L'attribut data-text sur le .aberration-text doit contenir exactement le même texte que le contenu visible — c'est la seule exigence de balisage.
Les pseudo-éléments sont positionnés en absolute avec z-index: -1 (derrière le texte blanc principal) et initialisés à opacity: 0. Au survol du .aberration-container, les transitions CSS font passer ::before (rouge) à translate(-4px, -2px) et ::after (cyan) à translate(4px, 2px) avec une opacity de 0,7 — les deux canaux s'écartent dans des directions opposées, recréant la séparation des longueurs d'onde d'un prisme optique.
Simultanément, une animation aberrationFlicker est appliquée au texte principal via text-shadow : elle alterne entre ombres rouge et cyan légèrement décalées (plus une touche magenta #f0f sur la valeur finale) à 0,15 s en mode alternate infinite. Ce scintillement rapide sur les bords du texte donne l'impression d'un signal vidéo instable.
Le fichier JS est vide — l'effet est 100 % CSS, zéro dépendance. Les transitions d'entrée/sortie (transform 0,3 s, opacity 0,3 s) assurent une apparition et une disparition fluides. Aucun requestAnimationFrame, aucun canvas, aucune librairie.
Accessibilité
- Pas de prefers-reduced-motion dans le code : l'animation
aberrationFlickeret les transitions CSS sont actives même si l'OS demande à réduire les mouvements. Ajout recommandé :@media (prefers-reduced-motion: reduce) { .aberration-text { animation: none; } .aberration-text::before, .aberration-text::after { transition: none; } } - Les pseudo-éléments
::beforeet::afterexposentcontent: attr(data-text)— certains lecteurs d'écran (NVDA, VoiceOver) annoncent le texte jusqu'à trois fois. Contournement : ajouteraria-hidden="true"sur le.aberration-textet unaria-labelexplicite sur le conteneur parent. - L'effet est hover uniquement — aucune interaction clavier n'est exposée. Si le texte est un lien ou un bouton, ajouter
:focus-visibleavec un style de focus visible. - Contraste du texte principal (blanc sur fond sombre) : ratio ≥ 7:1 en état par défaut. Les canaux rouge et cyan sont des couches purement décoratives derrière le texte blanc et ne portent aucun contenu indépendant.
- Aucun attribut
aria-*dans le code source de l'effet. Selon le contexte (heading, lien, menu), ajouter le rôle et l'étiquette ARIA appropriés sur le conteneur parent.
Compatibilité navigateur
Pseudo-éléments CSS, transitions, animations CSS et content: attr() — support universel depuis Chrome 26 / Firefox 4 / Safari 6. Zéro JS, zéro dépendance.
Sans survol (mobile, clavier) ou sans support des animations CSS, le texte blanc s'affiche normalement sans les canaux RGB — aucune erreur JS, le contenu reste pleinement lisible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="aberration-container">
<!-- data-text doit correspondre exactement au texte visible -->
<span class="aberration-text" data-text="Votre texte">Votre texte</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| data-text (attribut HTML) | PRISM | Texte dupliqué par les pseudo-éléments. Doit correspondre exactement au contenu texte du span — seule exigence balisage de l'effet. |
| translate(-4px, -2px) sur ::before hover | -4px, -2px | Décalage du canal rouge au survol. Augmenter (±6px, ±8px) pour un effet plus prononcé ; réduire (±2px) pour la subtilité. |
| translate(4px, 2px) sur ::after hover | 4px, 2px | Décalage du canal cyan en sens opposé. Maintenir la symétrie avec ::before pour un rendu équilibré. |
| opacity: 0.7 sur les pseudo-éléments au survol | 0.7 | Intensité des canaux RGB visibles. Entre 0,4 (subtil) et 1 (saturé plein). S'applique à ::before et ::after. |
| color: red / color: #0ff | rouge / cyan | Couleurs des canaux ::before et ::after. Remplacer par n'importe quelle paire contrastée — violet+vert, orange+bleu, etc. |
| transition: transform .3s, opacity .3s | 0.3s | Durée d'entrée et de sortie des canaux au survol. Réduire à 0,15 s pour plus de réactivité, augmenter à 0,5 s pour un fondu lent. |
| animation: .15s aberrationFlicker infinite | 0.15s | Vitesse du scintillement text-shadow pendant le survol. 0,08 s = glitch agressif, 0,3 s = vibration douce. |
| font-size: 2rem sur .aberration-text | 2rem | Taille du texte. L'effet est perceptible à partir de 1,5 rem — en dessous, le décalage de 4 px est à peine visible. |
FAQ
::before et ::after ne peuvent pas accéder directement au contenu texte de leur parent. La propriété content: attr(data-text) lit l'attribut HTML et le copie dans le pseudo-élément — c'est la technique standard pour dupliquer du texte en CSS pur, sans JS. Le texte doit être identique dans data-text et dans le contenu visible du span.<span class="aberration-text" data-text="Votre texte"> dans son propre <div class="aberration-container"> fonctionne indépendamment, sans conflit de sélecteur. Aucune initialisation JS, aucun ID unique requis. Placez autant d'instances que nécessaire.
