Sci-Fi Window Frames
Des cadres d'interface façon HUD de 160 × 110 px, découpés par un polygone de 16 points (encoche + biseau à chaque coin), dont la bordure de 2 px est un dégradé conique qui tourne en continu — un tour en 4 s, en 1,5 s et plus lumineux au survol. 100 % CSS, grâce à une propriété personnalisée animée (@property).
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque .scifi-frame superpose trois couches. .scifi-frame__border (inset: 0) est peinte d'un conic-gradient(from var(--sf-angle), #00ffcc, #6366f1, #ec4899, #00ffcc) ; .scifi-frame__inner, posée 2 px plus à l'intérieur (inset: 2px), la recouvre d'un dégradé sombre #0a0a1a → #0f0f2e : il ne reste visible du dégradé conique qu'un liseré de 2 px. Les deux couches sont découpées par le même clip-path: polygon() de 16 points en pourcentages : à chaque coin, une encoche de 3 % de haut sur 6 % de large (3,3 × 9,6 px à la taille d'origine) puis un biseau de 6 % × 7 % (9,6 × 7,7 px). La forme est écrite dans le CSS : aucun clip-path: url(#…), aucun SVG à fournir. Le contenu .scifi-frame__content passe au-dessus (z-index: 1), centré, en Courier New : titre en capitales de 9,6 px à 70 %, valeur en 20,8 px graisse 800, cyan #00ffcc.
La rotation tient en une ligne : @property --sf-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false } déclare la variable comme un angle, ce qui permet de l'animer de 0 à 360° (@keyframes scifi-rotate, 4 s, linéaire, infini). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : environ 90° par seconde dans les trois. Au survol du cadre, la durée passe à 1,5 s et la bordure reçoit filter: brightness(1.4), le texte une lueur text-shadow cyan. Changer la durée d'une animation en cours recale sa progression : mesuré, l'angle saute d'environ 160° à l'entrée du pointeur (90° → 248° dans Chromium, 96° → 264° dans Firefox) et d'autant à la sortie — la bordure « claque » en s'allumant au lieu d'accélérer en douceur. Le deuxième cadre d'un groupe (:nth-child(2)) prend une palette rose-orange-cyan et un texte #ff6b9d.
Testé collé dans une page vierge, le code vendu fonctionne tel quel dans les trois moteurs : polygone appliqué, rotation, survol, aucune erreur. Deux détails à connaître. Le découpage s'applique aux deux couches décoratives, pas au conteneur : le survol se déclenche aussi dans les coins coupés (mesuré, le point situé à 2 px du coin appartient à .scifi-frame). Et le contenu n'est pas découpé : un texte plus large que le cadre en déborde — dimensionnez le cadre sur son contenu, comme dans les scènes.
Accessibilité
- Mouvement continu : la bordure tourne sans fin, et
prefers-reduced-motionn'est pas pris en compte (mesuré : animation toujours en cours sous émulation). Pour un contenu qui bouge plus de 5 s à côté d'autre information, WCAG 2.2.2 demande un moyen de l'arrêter. Ajoutez :@media (prefers-reduced-motion: reduce) { .scifi-frame__border { animation: none } }— le liseré reste dessiné en dégradé fixe. Sur une page de lecture, limitez-vous à un ou deux cadres animés. - Contraste : la valeur cyan
#00ffccmesure 15,1:1 sur le fond#0a0a1a, et le titre à 70 % 7,6:1. Dans la palette rose du deuxième cadre, la valeur#ff6b9dfait 7,3:1 mais le titre à 70 % tombe à 4,0:1 pour 9,6 px : passez-le àopacity: .85ou au-dessus. - Lecteurs d'écran : les deux couches décoratives sont des
divvides, ignorées. Le contenu est lu dans l'ordre du HTML (« System Status ONLINE ») : donnez un vrai titre (h3) si le cadre structure la page, et écrivez les valeurs en minuscules dans le HTML, avectext-transform: uppercaseajouté à.sf-valuepour l'affichage : certains lecteurs épellent un mot tapé en capitales (« ONLINE » du code vendu), alors que le titre, lui, est déjà mis en capitales par le CSS. - Clavier : les cadres ne sont pas focalisables et leur survol (accélération, lueur) est purement décoratif ; rien n'est perdu sans souris. S'ils deviennent des liens, ajoutez
:focus-visibleaux règles:hover.
Compatibilité navigateur
CSS seul : @property, animation d'une propriété personnalisée, conic-gradient, clip-path: polygon(), filter, text-shadow. Zéro JavaScript, zéro dépendance. Mesuré collé dans une page vierge dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : même polygone, même rotation (environ 90° par seconde), même survol. Chaque image repeint le dégradé (une propriété personnalisée ne s'anime pas sur la carte graphique) : sans souci pour quelques cadres, à surveiller au-delà d'une dizaine visibles à la fois.
Sans @property (Firefox avant 128, Safari avant 16.4, Chrome avant 85), la variable n'est pas reconnue comme un angle et ne s'anime pas : la bordure doit rester un dégradé conique fixe, cadre et texte intacts (comportement attendu, non mesuré : les trois moteurs testés gèrent @property). Sans conic-gradient (Firefox avant 83), la bordure disparaît : seul le fond sombre découpé reste visible. clip-path: polygon() est reconnu sans préfixe depuis Chrome 55, Firefox 54 et Safari 13.1.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="scifi-frames-wrap">
<div class="scifi-frame">
<div class="scifi-frame__border"></div>
<div class="scifi-frame__inner"></div>
<div class="scifi-frame__content">
<div class="sf-title">…</div>
<div class="sf-value">…</div>
</div>
</div>
…
</div>
</div>Le code complet HTML + CSS + JS de Sci-Fi Window Frames, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Taille du cadre (CSS — .scifi-frame { width: 160px; height: 110px }) |
160 × 110 px | Le polygone est en pourcentages : il suit la taille, mais les coins s'étirent avec elle (biseau de 30 × 7 px sur un cadre de 504 × 96). Pour des coins fixes, écrivez les points en calc() : polygon(12px 0, calc(100% - 12px) 0, …). |
Forme des coins (CSS — clip-path: polygon(…) de __border ET de __inner) |
encoche 6 % × 3 % + biseau 6 % × 7 % | Modifiez les deux polygones à l'identique, sinon le liseré s'épaissit par endroits. Retirer les points d'encoche (88 % 3 %, 94 % 3 % et leurs symétriques) laisse un simple biseau. |
Épaisseur de la bordure (CSS — .scifi-frame__inner { inset: 2px }) |
2 px | 3 ou 4 px pour un écran vu de loin (stand, musée). Le polygone de la couche intérieure étant en pourcentages d'une boîte plus petite, le liseré est un peu plus fin sur les biseaux que sur les côtés droits. |
Vitesse (CSS — animation: scifi-rotate 4s ; survol : animation-duration: 1.5s) |
4 s par tour · 1,5 s au survol | 8 s pour un affichage permanent plus calme. Supprimez la règle de survol si le saut d'angle à l'entrée du pointeur (environ 160°, mesuré) vous gêne ; gardez seulement le brightness. |
Couleurs (CSS — conic-gradient(…) et color du contenu ; variante :nth-child(2)) |
#00ffcc → #6366f1 → #ec4899 · variante #ff6b9d → #f59e0b → #06b6d4 | Terminez le dégradé par sa première couleur, sinon une couture apparaît. La variante rose ne touche que le 2e enfant : pour plus de palettes, ajoutez des classes (.scifi-frame--alert) plutôt que des nth-child. |
Fond intérieur (CSS — .scifi-frame__inner { background }) |
#0a0a1a → #0f0f2e | Gardez-le opaque : semi-transparent, il laisserait voir tout le dégradé conique sous lui. |
FAQ
brightness(1.4) appliqué au même instant, le cadre « s'allume » d'un coup. Pour une accélération sans saut, il faudrait piloter la vitesse en JavaScript (Web Animations API, animation.playbackRate).@property (Safari avant 16.4, Firefox avant 128), la variable --sf-angle n'est pas animable : la bordure reste un dégradé fixe (attendu, non mesuré), et tout le reste — forme, fond, texte, survol lumineux — est identique. Rien n'est cassé, le cadre est seulement immobile.
