Les effets visuels cyberpunk, comme on peut les voir dans des jeux ou des films, peuvent être reproduits en grande partie avec du CSS. Cet article explore plusieurs techniques pour créer un thème visuel futuriste et industrialisé, sans recourir à JavaScript.

Animation de défaillance (Glitch)

L'effet de "glitch" crée une impression de distorsion ou de corruption temporaire du signal. En CSS, on peut le simuler avec des animations qui modifient la visibilité et la position de différentes couches superposées de l'élément.

L'idée principale est de créer plusieurs copies de l'élément, chacune avec une couleur de fond légèrement différente et une animation de découpe (clip-path) unique.

.glitch-container {
  position: relative;
  display: inline-block;
}

.glitch-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Couche 1 */
.glitch-layer:nth-child(1) {
  background-color: #ff00ff;
  mix-blend-mode: screen;
  animation: distortion-phase-1 3s infinite linear;
}

/* Couche 2 */
.glitch-layer:nth-child(2) {
  background-color: #00ffff;
  mix-blend-mode: screen;
  animation: distortion-phase-2 3s infinite linear;
  animation-delay: 0.1s;
}

@keyframes distortion-phase-1 {
  0%, 21% { clip-path: inset(20% 0 60% 0); transform: translate(5px, 0); opacity: 0.8; }
  22%, 100% { clip-path: inset(0); transform: translate(0); opacity: 0; }
}

@keyframes distortion-phase-2 {
  0%, 30% { clip-path: inset(40% 0 20% 0); transform: translate(-5px, 0); opacity: 0.8; }
  31%, 100% { clip-path: inset(0); transform: translate(0); opacity: 0; }
}

Éléments lumineux au néon

Les sources de lumière au néon sont omniprésentes dans l'esthétique cyberpunk. L'effet de lueur est obtenu principalement grâce à la propriété text-shadow et à des animations de fondu.

<div class="neon-sign">RÉSEAU</div>
<div class="neon-sign accent">ACTIVÉ</div>

.neon-sign {
  font-family: 'Courier New', monospace;
  color: #fff;
  animation: neon-pulse 2s ease-in-out infinite alternate;
}

.neon-sign.accent {
  animation-name: neon-pulse-alt;
}

@keyframes neon-pulse {
  0% {
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #ff00de, 0 0 80px #ff00de;
    color: #f0f0f0;
  }
  100% {
    text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de, 0 0 40px #ff00de;
    color: #ff00de;
  }
}

@keyframes neon-pulse-alt {
  0% {
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #00ff87, 0 0 80px #00ff87;
    color: #f0f0f0;
  }
  100% {
    text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00ff87, 0 0 40px #00ff87;
    color: #00ff87;
  }
}

Panneaux et cadres aux formes irrégulières

Les interfaces cyberpunk utilisent des formes agnulaires et irrégulières pour leurs composants. La propriété clip-path: polygon() est l'outil clé pour découper des formes complexes.

.cyber-panel {
  --panel-accent: #e6e600;
  --panel-border: #4dff4d;
  background: #0a0a0a;
  color: var(--panel-accent);
  padding: 1.5rem;
  position: relative;
  clip-path: polygon(
    0 15px,
    15px 0,
    calc(100% - 15px) 0,
    100% 15px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    60px 100%,
    50px calc(100% - 10px),
    0 calc(100% - 10px)
  );
  border-bottom: 4px solid var(--panel-accent);
}

/* Panneau en mode inversé */
.cyber-panel.inverted {
  background: var(--panel-accent);
  color: #0a0a0a;
  border-bottom-color: var(--panel-border);
}

/* Motif de points */
.cyber-panel.dotted {
  background-image: radial-gradient(circle, #0a0a0a 1px, transparent 1px);
  background-size: 6px 6px;
}

Éléments de fomrulaire stylisés

Les contrôles de formulaire comme les champs de texte et les cases à cocher adoptent également des formes découpées et des indicateurs visuels personnalisés.

input[type="text"].cyber-input,
textarea.cyber-input {
  width: 100%;
  padding: 0.8rem;
  background: #111;
  color: #ccc;
  border: none;
  outline: 2px solid #e6e600;
  clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px));
}

input[type="checkbox"].cyber-check {
  appearance: none;
  width: 22px;
  height: 22px;
  background: #222;
  border: 2px solid #e6e600;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}

input[type="checkbox"].cyber-check:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 4px;
  height: 10px;
  border: solid #4dff4d;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

Décoration des titres

Les titres peuvent être rehaussés par des lignes de découpe géométriques et des animations de "glitch" rapides.

h2.cyber-title {
  position: relative;
  padding-bottom: 0.5em;
}

h2.cyber-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: #e6e600;
  clip-path: polygon(0 0, 100% 0, 100% 50%, calc(100% - 10px) 50%, calc(100% - 15px) 100%, 15px 100%, 10px 50%, 0 50%);
}

h2.cyber-title.glitchy {
  animation: title-shake 0.4s cubic-bezier(.25,.46,.45,.94) both infinite;
}

@keyframes title-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

Texture métallique et arrière-plans

Pour simuler des surfaces métalliques ou des écrans de terminal, on peut utiliser des dégradés linéaires avec des angles spécifiques pour créer un effet de reflet ou de rainurage.

.metallic-surface {
  background: linear-gradient(
    135deg,
    #1a1a1a 0%,
    #2a2a2a 25%,
    #3a3a3a 50%,
    #2a2a2a 75%,
    #1a1a1a 100%
  );
  border: 1px solid #4a4a4a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.3);
}

.screen-effect {
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
}