Retro Handheld Screen
Une carte façon console de poche, en quatre verts : un écran qui teinte tout son contenu en vert par filtre CSS, une rangée de blocs qui respirent et une ligne de score.
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
.pkc-card est une carte de 240 px au fond vert clair, bordée de vert très sombre. Toutes ses couleurs viennent de quatre variables, de la plus sombre à la plus claire : --pkc-0 #0f380f, --pkc-1 #306230, --pkc-2 #8bac0f, --pkc-3 #9bbc0f. Le titre (« PLAYER 1 ») et le score (« SCORE: 999999 ») sont en Courier New.
L'écran .pkc-screen (80 px de haut) porte un filter : sepia(100%) hue-rotate(50deg) saturate(400%) brightness(80%) contrast(120%). Tout ce qu'il contient prend une teinte verte : le petit sprite de 8×6 cases fourni, ou votre propre <img> ou <svg>, posé en enfant direct, qui le remplit alors. Le résultat est un camaïeu vert continu, pas une vraie réduction à quatre couleurs.
Sous l'écran, six blocs de 28 px reprennent les quatre nuances et rétrécissent à 85 % puis reviennent, en 3 s, un bloc sur deux décalé d'une demi-seconde (animation pkcPulse). Aucun JavaScript : le sprite est écrit une seule fois dans le HTML (l'ancienne version l'ajoutait une seconde fois par script, d'où un dessin doublé et coupé).
Accessibilité
- Texte lisible : le titre et le score sont du vrai texte. Le sprite et la rangée de blocs, purement décoratifs, portent
aria-hidden="true". - Image teintée : si vous placez une image dans l'écran, donnez-lui un
alt; le filtre ne change rien à ce qu'entend un lecteur d'écran. - Contraste : le titre
#0f380fsur#9bbc0fatteint environ 6:1 ; le score est écrit dans la même nuance--pkc-0, au même contraste. La nuance--pkc-1(#306230) n'atteint qu'environ 3,3:1 sur ce fond : ne l'utilisez pas pour un petit texte. - Réduire les animations : sous
prefers-reduced-motion: reduce, les blocs ne respirent plus ; la carte reste identique, immobile.
Compatibilité navigateur
CSS seul, aucune dépendance. filter et les variables CSS existent partout depuis longtemps ; la fonction la plus récente est gap dans une boîte flex (Chrome 84, Firefox 63, Safari 14.1 d'après les données MDN). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : un seul sprite (60 éléments par carte au lieu de 108), deux copies identiques, aucune variable ajoutée à window, largeur fluide jusqu'à 100 %.
Sans gap en flex, titre, écran, blocs et score se touchent mais restent lisibles. Sans filter, l'écran garde les couleurs d'origine de son contenu.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0277-root">
<div class="pkc-card">
<div class="pkc-title">PLAYER 1</div>
<div class="pkc-screen">
<div class="pkc-sprite" aria-hidden="true">
<span class="pkc-c0"></span>
<span class="pkc-c0"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c0"></span>
<span class="pkc-c0"></span>
<span class="pkc-c0"></span>
<span class="pkc-c1"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c1"></span>
<span class="pkc-c0"></span>
<span class="pkc-c1"></span>
<span class="pkc-c2"></span>
<span class="pkc-c3"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c3"></span>
<span class="pkc-c2"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c2"></span>
<span class="pkc-c1"></span>
<span class="pkc-c0"></span>
<span class="pkc-c1"></span>
<span class="pkc-c2"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c2"></span>
<span class="pkc-c1"></span>
<span class="pkc-c0"></span>
<span class="pkc-c0"></span>
<span class="pkc-c0"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c1"></span>
<span class="pkc-c0"></span>
<span class="pkc-c0"></span>
</div>
</div>
<div class="pkc-row" aria-hidden="true">
<div class="pkc-block"></div>
<div class="pkc-block"></div>
<div class="pkc-block"></div>
<div class="pkc-block"></div>
<div class="pkc-block"></div>
<div class="pkc-block"></div>
</div>
<div class="pkc-score">SCORE: 999999</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 |
|---|---|---|
Les quatre nuances (CSS — --pkc-0 à --pkc-3) |
#0f380f, #306230, #8bac0f, #9bbc0f |
Remplacez-les par quatre gris ou quatre bleus : carte, sprite et blocs suivent. Gardez l'ordre du plus sombre au plus clair. |
Contenu de l'écran (HTML — enfant de .pkc-screen) |
Sprite de 8×6 cases | Un <img> ou un <svg> en enfant direct remplit l'écran (object-fit: cover) et prend la teinte verte. |
Filtre de l'écran (CSS — --pkc-filter) |
sepia(100%) hue-rotate(50deg) saturate(400%) brightness(80%) contrast(120%) |
none garde les couleurs d'origine ; grayscale(1) contrast(1.4) donne un écran gris. |
Tailles (CSS — --pkc-w, --pkc-screen-h) |
240 px, écran de 80 px | --pkc-w: 100% remplit le parent ; agrandissez l'écran pour une image. |
Blocs et sprite (CSS — --pkc-block, --pkc-pixel) |
28 px, 6 px | Dans une petite carte, 9 px et 4 px ; vérifiez que les six blocs tiennent dans la largeur. |
Textes (HTML — .pkc-title, .pkc-score) |
« PLAYER 1 », « SCORE: 999999 » | Pseudo, niveau, nombre de points : du texte libre, lu par les lecteurs d'écran. |
Cadre de démonstration (CSS — --pkc-page, --pkc-root-h) |
#0a0a0f, 300 px de haut au minimum |
transparent et 0 pour poser la carte dans votre page. |
FAQ
.pkc-sprite compte 8 colonnes ; chaque case est un <span> avec une classe pkc-c0 à pkc-c3 (de la plus sombre à la plus claire). Changez les classes, ajoutez des rangées de 8 cases : la grille s'adapte.prefers-reduced-motion: reduce, ils restent à leur taille normale ; le reste de la carte ne bouge de toute façon jamais.
