Retro Desktop UI
Un petit kit de styles façon bureau des années 90 : fenêtre grise biseautée, barre de titre en dégradé bleu, boutons qui s'enfoncent au clic et champ creusé.
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
Tout repose sur des bordures de deux couleurs. Une surface « en relief » a ses bords haut et gauche blancs, bas et droit gris (border-color: #fff gray gray #fff) ; une surface « creusée » inverse l'ordre. La fenêtre .rdk-window (280 px, gris silver) est en relief ; le champ .rdk-input est creusé ; la barre .rdk-titlebar passe du bleu marine à #1084d0.
Les boutons .rdk-btn et les petits boutons de barre de titre .rdk-titlebar-btn sont en relief. Pendant l'appui (:active), leurs bordures s'inversent ; sur .rdk-btn, le texte se décale en plus d'un pixel vers le bas et la droite : le bouton paraît s'enfoncer. Le bouton principal .rdk-primary porte un cadre noir de 3 px et un liseré intérieur.
Au clavier, le focus se voit par un pointillé noir à l'intérieur du bouton, comme sur les bureaux d'époque (l'ancienne version supprimait tout contour de focus). C'est un kit de styles, sans JavaScript : les boutons n'ont pas d'action propre, c'est à vous de les relier à votre code. Assemblez librement fenêtre, boutons et champ.
Accessibilité
- Vrais contrôles : de vrais
<button type="button">et un vrai<input>, atteignables avec Tab ; Entrée ou Espace les activent, et l'enfoncement se voit aussi pendant l'appui sur Espace. - Focus visible : pointillé noir dans les boutons (
:focus-visible) et autour du champ (:focus). - Noms accessibles : les boutons « _ », « □ », « X » portent
aria-label(Réduire, Agrandir, Fermer) et leur symbole est masqué ; le champ portearia-label="Commande". Adaptez ces libellés à votre usage. - Aucune animation : rien ne bouge en dehors de l'appui ; le réglage « réduire les animations » n'a rien à retirer.
Compatibilité navigateur
CSS seul, aucune dépendance. 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) ; le pointillé de focus des boutons utilise :focus-visible (Chrome 86, Firefox 85, Safari 15.4). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : Tab atteint les boutons et le champ avec un contour en pointillé, deux copies indépendantes, largeur fluide jusqu'à 100 %.
Sans :focus-visible, les boutons gardent le contour de focus par défaut du navigateur à la place du pointillé. Sur Safari pour Mac, Tab ne s'arrête sur les boutons que si l'option « Tab sélectionne chaque élément » est activée (réglage du navigateur).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0279-root">
<div class="rdk-window">
<div class="rdk-titlebar">
<span>Welcome.exe</span>
<div class="rdk-titlebar-buttons">
<button type="button" class="rdk-titlebar-btn" aria-label="Réduire"><span aria-hidden="true">_</span></button>
<button type="button" class="rdk-titlebar-btn" aria-label="Agrandir"><span aria-hidden="true">□</span></button>
<button type="button" class="rdk-titlebar-btn" aria-label="Fermer"><span aria-hidden="true">X</span></button>
</div>
</div>
<div class="rdk-body">
<p>Welcome to the desktop!</p>
<input class="rdk-input" type="text" value="C:\HOME\>" aria-label="Commande">
<div class="rdk-btn-row">
<button type="button" class="rdk-btn rdk-primary">OK</button>
<button type="button" class="rdk-btn">Cancel</button>
</div>
</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 |
|---|---|---|
Largeur de la fenêtre (CSS — --rdk-w) |
280 px | 100% remplit le parent ; ajoutez height: 100% sur .rdk-window pour une fenêtre plein cadre. |
Gris des surfaces (CSS — --rdk-face) |
silver |
Un gris plus chaud (#d4d0c8) rappelle d'autres bureaux de la même époque ; fenêtre et boutons suivent. |
Barre de titre (CSS — --rdk-title-a, --rdk-title-b) |
navy → #1084d0 |
Deux couleurs de votre marque ; gardez un texte blanc lisible sur la couleur de départ. |
Police (CSS — --rdk-font) |
"Courier New", monospace |
Une police sans empattement (sans-serif) donne un rendu plus proche des bureaux d'origine. |
Éléments (HTML — .rdk-titlebar-btn, .rdk-btn, .rdk-primary, .rdk-input) |
3 boutons de titre, OK, Cancel, un champ | Retirez ce qui ne sert pas, dupliquez le reste : chaque classe garde son style hors de la fenêtre, tant qu'elle reste dans .fx-0279-root. |
Libellés accessibles (HTML — aria-label) |
Réduire, Agrandir, Fermer, Commande | Remplacez-les par ce que font vraiment vos boutons et votre champ. |
Cadre de démonstration (CSS — --rdk-page, --rdk-root-h) |
#0a0a0f, 300 px de haut au minimum |
transparent et 0 pour poser le kit dans votre page. |
FAQ
closeBtn.addEventListener('click', () => win.hidden = true).<dialog> ouvert avec showModal() : le navigateur gère le focus, la touche Échap et le fond inerte. Donnez au <dialog> un aria-labelledby qui pointe vers le texte de la barre de titre.
