LED Matrix Display
Un texte rouge orangé en Courier entouré d'un halo en quatre couches qui respire toutes les 1,5 s, sur un panneau noir semé d'une fine trame de points : l'allure d'un afficheur lumineux.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le panneau .ledm-panel (280 px de large, fond #0a0a0a, bord #1a1a1a, coins de 12 px) porte deux éléments : une trame .ledm-dots, faite de points blancs à 3 % d'opacité tous les 6 px, et le texte .ledm-text. Le texte n'est pas dessiné en points : c'est une police Courier en gras, espacée de 6 px, dont l'éclat vient des ombres.
Le halo empile quatre text-shadow : deux couches de la couleur du texte (7 et 20 px de flou), une couche moyenne #c20 à 40 px et une lointaine #910 à 80 px. L'animation ledmPulse les élargit en 0,75 s (10, 30, 60 et 100 px, la première passant à #f40) puis les resserre : l'afficheur semble respirer.
Plusieurs .ledm-text dans un même panneau s'empilent en lignes (le panneau est en colonne), ce qui donne un tableau d'horaires ou un score à plusieurs lignes avec une seule racine. Chaque couleur du halo est une variable ; elles peuvent aussi être changées sur une seule ligne, puisqu'une variable posée sur un élément vaut pour lui seul.
La racine centre le panneau dans au moins 300 px de haut sur fond #0a0a0f ; --ledm-height: auto, --ledm-bg: transparent et --ledm-width (100% ou auto) l'adaptent à votre mise en page. Pas de JavaScript.
Accessibilité
- Lecteurs d'écran : le texte est du vrai texte, lu tel quel ; la trame de points porte
aria-hidden="true". Pour un score qui change, ajoutezaria-live="polite"sur la ligne, comme dans l'exemple du jeu. - Mouvement réduit : sous
prefers-reduced-motion: reduce, la pulsation s'arrête et le halo reste à sa taille de repos. Avant réparation, l'animation continuait. - Clignotement : la pulsation ne fait varier que la largeur du halo, très lentement (1,5 s) ; mesure image par image, aucune case ne dépasse le seuil.
- Contraste :
#f30sur#0a0a0adonne un rapport d'environ 5,4:1, suffisant pour un texte de 28 px. Le halo élargit les traits : gardez au moins 14 à 16 px de corps et de l'espacement sur les petits textes. - Taille du texte : à 16 px, le halo lointain (80 px) déborde d'une ligne à l'autre ; passez
--ledm-glow-faràtransparentpour un tableau de plusieurs lignes, comme dans l'exemple de la gare.
Compatibilité navigateur
CSS seul (2,4 Ko), aucune dépendance : quatre text-shadow animés, dégradé radial répété pour la trame, variables CSS, inset. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : rendu identique au pixel à l'ancienne version à 0, 40, 75 et 500 ms, deux copies, 390 px sans débordement, 0 erreur.
Sans inset (Chrome 49 à 86, Safari 9.1 à 14), la trame de points n'a plus de taille et disparaît ; le texte et son halo s'affichent normalement. Sans variables CSS, le texte reste visible dans les couleurs de la page, sans halo.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0275-root">
<div class="ledm-panel">
<div class="ledm-dots" aria-hidden="true"></div>
<div class="ledm-text">12:45</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Texte (HTML — .ledm-text, une par ligne) |
12:45 | Heure, score, mot ou tableau : chaque .ledm-text ajoutée dans le panneau forme une ligne de plus. |
--ledm-color · --ledm-peak |
#f30 · #f40 | Couleur du texte et du halo proche, et halo proche au plus fort de la pulsation. Vert : #3f6 · #4f7. |
--ledm-glow · --ledm-glow-far |
#c20 · #910 | Halo moyen et lointain ; vert : #1c4 · #083. transparent sur le lointain pour un texte serré. |
--ledm-size · --ledm-spacing |
28px · 6px | Taille et espacement des lettres. Gardez un espacement d'environ 1/5 de la taille. |
--ledm-width |
280px | Largeur du panneau ; auto pour épouser le texte, 100% pour toute la place. |
--ledm-panel |
#0a0a0a | Fond du panneau, derrière la trame de points. |
--ledm-speed |
1.5s | Durée d'une respiration du halo ; 3s pour une enseigne plus calme. |
--ledm-bg · --ledm-height |
#0a0a0f · 300px | Fond et hauteur minimale de la racine ; transparent et auto pour l'intégrer. |
FAQ
font-family de .ledm-text.white-space: pre sur .ledm-text pour que le navigateur ne fusionne pas ces espaces.textContent de la ligne depuis votre script, le halo et la pulsation s'appliquent tout de suite au nouveau texte. Ajoutez aria-live="polite" si la valeur doit être annoncée, et évitez de la mettre à jour plus d'une fois par seconde.
