Effrayant Modèles CSS

Modèles CSS personnalisables pour un style horrifique

L'horreur réside dans de petits détails visuels, comme la façon dont un titre se déchire sur les bords, dont une carte s'enfonce dans l'obscurité, ou la demi-seconde avant qu'un bouton ne réagisse au curseur. Les modèles CSS horrifiques regroupent ces choix dans un ensemble de règles réutilisables, évitant ainsi qu'une campagne ne se transforme en un amas de modifications ponctuelles qu'il faudra démêler en octobre prochain.

Des classes réutilisables pour un langage visuel cohérent

Un ensemble d'éléments horrifiques fonctionnel reste suffisamment concis pour être facilement mémorisé. Cinq ou six classes nommées suffisent généralement pour une campagne entière :

• .fog-overlay, un dégradé pseudo-élément flottant lentement sur une illustration sombre ;

• .glitch-title, un titre avec deux copies décalées animées par des images clés ;

• .flicker-text, une animation d'opacité imitant une ampoule qui s'éteint ;

• .distressed-card, un bloc d'accroche avec un bord de masque déchiré et une ombre intérieure marquée.

Les règles nommées sont faciles à utiliser. Une même carte à l'aspect vieilli sert à la fois de description de pièce, de personnage et d'article, et ses couleurs, son espacement et la taille de sa police peuvent être modifiés à l'aide de quelques variables.

Scintillement, Brouillard, Bug : Des effets à conserver

La sobriété permet de créer une ambiance agréable sans agacer. Deux ou trois éléments animés par écran suffisent amplement ; au-delà, l'œil peine à distinguer les détails, et l'élément que vous vouliez mettre en valeur perd discrètement de son impact.

Les transformations et l'opacité sont des outils peu coûteux, car leurs transitions restent fluides sur les anciens téléphones, contrairement aux ombres animées et aux filtres, bien plus onéreux. Les dégradés et les masques permettent de créer du brouillard, de la pierre humide et du papier déchiré sans ajouter une seule image. Les images clés doivent avoir des noms explicites : « scintillement » et « dérive » restent pertinents même un an plus tard, contrairement à « anim2 ». Il est également important de respecter les préférences de réduction des mouvements : un utilisateur ayant demandé à son système de ralentir doit pouvoir profiter du mode sombre sans les tremblements.

Règles d'adaptation pour les écrans étroits

Sur les écrans étroits, la décoration est primordiale. Une grille de trois colonnes de cartes d'accroche se réduit à une seule, les espacements généreux disparaissent et un titre tronqué, pourtant bien visible sur un écran, devient illisible. Les effets doivent se réduire en même temps que les colonnes, ce qui implique généralement moins d'éléments mobiles, une taille de police plus petite et un contraste vérifié par rapport au fond le plus sombre de l'ensemble.

Nicepage gère la plupart de ces aspects grâce à des contrôles visuels, et des règles ciblées prennent en charge ce que les propriétés standard ne peuvent pas gérer. Le guide CSS personnalisé explique comment appliquer des classes et des règles personnalisées au niveau de l'élément, de la page ou du site.

Il est judicieux de conserver un ensemble de composants « horror » lorsqu'un nouveau composant peut s'y intégrer sans créer d'exception. Placez-le dans un bloc « ticket », attribuez-lui les classes de carte et de bouton existantes, et il devrait déjà s'intégrer parfaitement à un environnement sombre.