← retour

Cyberpunk & développement web

design css

Retour sur les choix de design du blog : CSS pur, effets glitch, et esthétique néon.

L’esthétique cyberpunk n’est pas qu’une question de néons et de noir profond. C’est avant tout une philosophie : faire plus avec moins, prioriser la substance sur la forme, refuser l’obésité logicielle.

Les principes appliqués ici

Zéro dépendance CSS. Pas de Tailwind, pas de Bootstrap. Juste des custom properties et quelques animations clip-path.

Police monospace. JetBrains Mono — conçue pour la lisibilité du code, idéale pour un blog technique.

Effets glitch en CSS pur. L’animation du titre utilise ::before / ::after avec clip-path et attr(data-text). Aucun JavaScript.

L’effet glitch

Le principe : deux pseudo-éléments superposés sur le titre, chacun animé avec des clip-path différents pour simuler des artefacts visuels.

@keyframes glitch-clip-1 {
  0%, 89%, 100% { clip-path: none; transform: none; opacity: 0; }
  90% {
    clip-path: polygon(0 22%, 100% 22%, 100% 34%, 0 34%);
    transform: translateX(-4px);
    opacity: 1;
  }
}

.glitch::before {
  content: attr(data-text);
  position: absolute;
  color: var(--magenta);
  animation: glitch-clip-1 6s infinite;
}

Le texte original reste intact — les pseudo-éléments créent l’illusion de corruption.

Signal coupé.