hiimjako/shalom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
41b73574b1a60ec0840290c8b1671cd15573bf3c
shalom/docs/01-stile-visivo-gambling.md
Alberto Moretti c62e79e4c6 docs
2026-07-02 12:55:16 +02:00

18 KiB
Raw Blame History

Linguaggio visivo del gambling / casino / betting online

Guida pratica per replicare l'estetica "hyper-gambling" (slot machine, casino online, betting) su web e app. Riferimenti reali e attuali (2023-2026). Ogni sezione include indicazioni concrete direttamente utilizzabili da uno sviluppatore.

L'obiettivo estetico e' quello di trasmettere eccitazione, urgenza, lusso e ricompensa immediata: sfondi scuri, colori neon saturi, oro e metallo, luci lampeggianti, cifre giganti che salgono, effetti di vincita continui.

1. Palette colori

Il pattern dominante e' sfondo scuro + accenti saturi ad alto contrasto. Il buio fa risaltare i neon, l'oro e i bagliori (il glow neon e' visibile SOLO su fondo scuro).

1.1 Le combinazioni ricorrenti

Palette Colori Uso / significato
Classic Luxury Nero, Oro, Argento Casino high-end, esclusivita', ricchezza
Vibrant / Energetic Rosso acceso, Giallo, Verde neon Aree slot, eccitazione, pubblico giovane
Royal Elegance Viola profondo, Oro, Bianco Lusso, regalita', tavoli VIP
Neon Nightlife Neon blue, Hot pink, Electric yellow Energia notturna, vibe "arcade"
Casino Table Verde feltro, Rosso, Oro Richiamo diretto ai tavoli (roulette, blackjack)
Crypto Dark Blu notte / Viola, accenti neon green Stile Stake / Roobet (vedi sez. 6)

1.2 Palette pronte all'uso (hex)

Gli articoli di branding elencano combinazioni ma raramente danno hex. Ecco valori concreti coerenti con lo stile, pronti da incollare come CSS custom properties:

:root {
  /* --- Base scura (sfondi) --- */
  --bg-900: #0a0a12;      /* quasi nero, blu-viola */
  --bg-800: #12121f;
  --bg-700: #1b1b2e;      /* pannelli / card */
  --bg-purple: #1a0b2e;   /* variante viola profondo (Roobet-like) */

  /* --- Oro / metallo --- */
  --gold-500: #ffd700;    /* oro puro */
  --gold-600: #f5c518;
  --gold-700: #d4af37;    /* oro antico */
  --gold-glow: #ffdf6b;

  /* --- Neon --- */
  --neon-green: #39ff14;  /* verde neon "vincita" */
  --neon-cyan:  #00fff0;
  --neon-pink:  #ff2e97;  /* hot pink */
  --neon-magenta: #ff00e5;
  --neon-blue:  #2d6bff;
  --neon-purple: #b026ff;

  /* --- Rosso / verde casino --- */
  --casino-red:   #e21b3c; /* roulette red, urgenza */
  --casino-green: #0f7b3f; /* feltro tavolo */
  --casino-green-felt: #1c7a4d;

  /* --- Testo --- */
  --text: #f5f5fa;
  --text-dim: #9aa0b5;
}

1.3 Gradienti caratteristici

I gradienti sono ovunque: bottoni, jackpot, badge, sfondi. Tre famiglie:

/* Oro metallico (bottoni "PLAY", jackpot) */
--grad-gold: linear-gradient(180deg, #fff3b0 0%, #ffd700 40%, #d4af37 60%, #a67c00 100%);

/* Neon bicolore (CTA arcade, banner) */
--grad-neon: linear-gradient(135deg, #ff2e97 0%, #b026ff 50%, #2d6bff 100%);

/* Viola profondo (sfondo hero) */
--grad-purple-bg: radial-gradient(circle at 50% 0%, #3a1a5e 0%, #1a0b2e 60%, #0a0a12 100%);

/* Verde vincita */
--grad-win: linear-gradient(180deg, #7dff5a, #39ff14, #0f9b2e);

Il gradiente radiale posizionato in alto (radial-gradient(circle at 50% 0%, ...)) crea il tipico effetto "riflettore/palcoscenico" dietro l'hero o le slot.

1.4 Psicologia del colore (perche' funziona)

  • Rosso = urgenza, eccitazione, fortuna. Usato per CTA, timer, "HOT".
  • Verde = fortuna, denaro, vincita, feltro del tavolo. Usato per importi vinti, "WIN", saldo positivo.
  • Oro = ricchezza, premio, esclusivita'. Jackpot, VIP, monete.
  • Viola/Blu profondo = lusso, mistero, fiducia. Sfondi premium (Roobet, Stake).
  • Neon = energia, notte, dopamina. Bordi, glow, accenti.

2. Tipografia

Lo stile richiede caratteri grassi, condensati, ad alto impatto per i titoli, e font display / LED per i numeri (jackpot, saldo, timer). Tutti i font sotto sono gratuiti.

2.1 Display / Headline (grassi e condensati) — Google Fonts

Font Caratteristiche Uso
Anton Sans grottesco, condensato, ultra-bold, peso unico Titoli dominanti, "JACKPOT", banner
Bebas Neue Condensato alto, elegante, molto diffuso Headline, etichette, tab
Oswald Stretto, 6 pesi (ExtraLight→Bold) Testi UI densi, header editoriali
Archivo Black Sans nero, largo e pesante CTA, badge
Teko Condensato tecnico, moderno Numeri, contatori, punteggi
Fjalla One Display medio-bold Titoli secondari
Titan One / Luckiest Guy / Bungee Chunky, arcade, cartoon Vibe "juicy"/arcade, premi

Bungee (di David Jonathan Ross, Google Fonts) e' particolarmente adatta all'estetica insegna/marquee urbana.

2.2 Numeri LED / 7-segment (jackpot, saldo, timer)

Per i contatori digitali serve un font 7/14-segmenti che imiti i display LED reali:

  • DSEG (keshikan.net) — famiglia free open source, imita display a 7 e 14 segmenti, con varianti Classic/Modern, weight e italic. E' lo standard de facto. Include DSEG7 (7 segmenti) e DSEG14.
  • Segment7 (Font Library, open source) — monospace, solo 7 segmenti, look calcolatrice/LED autentico.
  • Seven Segment (FontGet / CDNFonts) — alternativa, free per uso personale.

In alternativa, per un look "digitale" ma leggibile, va bene una monospace tech: Share Tech Mono, Orbitron (futuristica, ottima per sci-fi/arcade) o DotGothic16 (dot-matrix), tutte su Google Fonts.

2.3 Abbinamenti consigliati

  • Anton (titoli) + Inter/Roboto (corpo) + DSEG7 (numeri jackpot).
  • Bebas Neue (headline) + Oswald (UI) + Orbitron (contatori).

3. Motivi UI ricorrenti

Elementi grafici che definiscono immediatamente il genere:

  • Reel della slot — 3-5 colonne verticali che scorrono con simboli (7, campanelle, frutti, diamanti, monete). Effetto blur in movimento + decelerazione elastica allo stop.
  • Ruota della fortuna (wheel of fortune) — cerchio a spicchi colorati alternati, indicatore/lancetta in alto, decelerazione con cubic-bezier per il "quasi-vinci".
  • Monete e gettoni (chips) — monete dorate 3D (spesso animate/rotanti), fiches da poker colorate.
  • Jackpot counter / ticker — cifre grandi LED che salgono di continuo (count-up animato), spesso con ticker scorrevole ("$1,204,556" incrementale).
  • Luci da marquee (chase lights) — cornici di lampadine che si accendono in sequenza attorno a banner/insegne.
  • Confetti, scintille, particelle — esplosione di coriandoli e monete al momento della vincita.
  • Badge / medaglie / corone — livelli VIP, loyalty, "BONUS", "FREE SPINS".
  • Banner promozionali + jackpot ticker scorrevole — tile dei giochi live con jackpot in tempo reale, barra loyalty visibile.
  • Simboli portafortuna — 777, ferri di cavallo, quadrifogli, diamanti, stelle.

4. Illuminazione ed effetti

Il "peso visivo" arriva dagli effetti luce/materiale:

  • Neon glow — bagliore colorato attorno a testo e bordi (layer multipli di shadow). Vedi sez. 5.1.
  • Drop shadow profonde — le card "galleggiano" su fondo scuro.
  • Chrome / metallico — gradienti oro/argento con highlight speculari e bordo scuro per dare volume.
  • Shine sweep (riflesso che passa) — striscia di luce diagonale che attraversa bottoni/carte periodicamente.
  • Inner glow / tubo neon — inset shadow chiaro per l'effetto "tubo al neon acceso".
  • Bevel / emboss — bordi smussati su monete e bottoni per il 3D.
  • Pulsazione / flicker — glow che pulsa o lampeggia come insegna al neon.

Nota performance/accessibilita': blur grandi e animazioni infinite di box-shadow sono costosi da ridipingere. Animare con parsimonia e avvolgere gli effetti pulsanti in @media (prefers-reduced-motion: reduce).

5. Tecniche CSS concrete

5.1 Testo neon (text-shadow a layer)

Layer multipli dello stesso colore con blur crescente = alone luminoso (tecnica CSS-Tricks):

.neon-text {
  color: #fff;
  text-shadow:
    0 0 7px  #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px  #39ff14,
    0 0 82px  #39ff14,
    0 0 92px  #39ff14,
    0 0 102px #39ff14,
    0 0 151px #39ff14;
}

/* Flicker da insegna al neon */
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff,
      0 0 40px #39ff14, 0 0 80px #39ff14, 0 0 90px #39ff14,
      0 0 100px #39ff14, 0 0 150px #39ff14;
  }
  20%, 24%, 55% { text-shadow: none; }
}
.neon-text--flicker { animation: flicker 1.5s infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .neon-text--flicker { animation: none; }
}

5.2 Bordo/box neon glow (bottone, card)

.neon-box {
  border: 2px solid var(--neon-pink);
  border-radius: 12px;
  box-shadow:
    0 0 5px  var(--neon-pink),
    0 0 15px var(--neon-pink),
    0 0 30px var(--neon-pink),
    inset 0 0 8px rgba(255, 46, 151, .6); /* inner glow "tubo" */
}

5.3 Bottone oro metallico (CTA "PLAY / SPIN")

.btn-gold {
  background: linear-gradient(180deg, #fff3b0 0%, #ffd700 40%, #d4af37 60%, #a67c00 100%);
  color: #3a2a00;
  font-family: "Anton", sans-serif;
  letter-spacing: .05em;
  border: 2px solid #a67c00;
  border-radius: 14px;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.7),   /* highlight superiore */
    inset 0 -3px 4px rgba(0,0,0,.35),        /* ombra inferiore = volume */
    0 6px 0 #7a5c00,                          /* "spessore" 3D */
    0 10px 20px rgba(0,0,0,.5),               /* ombra a terra */
    0 0 24px rgba(255,215,0,.6);              /* glow oro */
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:active { transform: translateY(4px); box-shadow: /* riduci il 0 6px 0 ... */ ; }

5.4 Bordo a gradiente (gradient border)

Due tecniche affidabili:

/* A) border-image */
.grad-border {
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #ff2e97, #b026ff, #2d6bff) 1;
}

/* B) doppio background (permette border-radius, la A no) */
.grad-border-radius {
  border: 3px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(var(--bg-800), var(--bg-800)) padding-box,
    linear-gradient(135deg, #ff2e97, #b026ff, #2d6bff) border-box;
}

5.5 Shine sweep (riflesso animato su bottone/card)

.shine { position: relative; overflow: hidden; }
.shine::after {
  content: "";
  position: absolute; top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg,
    transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: sweep 3s infinite;
}
@keyframes sweep { 0% { left: -150%; } 60%,100% { left: 150%; } }

5.6 Testo con riempimento a gradiente (oro/neon)

.grad-text {
  background: linear-gradient(180deg, #fff3b0, #ffd700, #d4af37);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

5.7 Luci da marquee (cornice di lampadine)

Con box-shadow multipli su uno pseudo-elemento, o piu' semplicemente con un repeating-radial-gradient + animazione di opacita' per l'effetto "chase". Per il chase preciso conviene JS o background-position animato di un pattern di puntini.

.marquee-lights {
  padding: 12px;
  border-radius: 16px;
  background:
    radial-gradient(circle, #ffdf6b 2px, transparent 3px) 0 0 / 20px 20px;
  animation: chase .6s steps(2) infinite;
}
@keyframes chase { to { background-position: 20px 0; } }

5.8 Slot reel (scorrimento verticale)

Il pattern base: una colonna piu' alta del viewport, si trasla verso l'alto con transform: translateY() e si ferma con easing elastico. Approcci reali su CodePen (sez. 6): pure CSS con @keyframes, JS con requestAnimationFrame + decelerazione, o 3D con rotateX/translateZ per il reel cilindrico.

.reel { height: 120px; overflow: hidden; }
.reel__strip { display: flex; flex-direction: column;
  transition: transform 3s cubic-bezier(.15,.9,.25,1); } /* decelerazione */
.reel--spinning .reel__strip { filter: blur(2px); }      /* motion blur */

5.9 Count-up del jackpot

Il conteggio incrementale si fa in JS (aggiornando textContent), abbinato al font DSEG7 e a un container con glow verde/oro. Per performance usare requestAnimationFrame e Intl.NumberFormat per i separatori delle migliaia.

6. Riferimenti da studiare (URL reali)

Prodotti / casino live

Collezioni ispirazione (UI/branding)

CodePen (slot / reel / animazioni)

Font (download)

CSS glow / neon (tecniche)

7. Checklist rapida per replicare l'estetica

  • Sfondo scuro (near-black blu/viola), MAI bianco puro.
  • Palette: base scura + 1-2 neon + oro. Alto contrasto.
  • Font titoli condensato ultra-bold (Anton/Bebas Neue).
  • Numeri jackpot/saldo con font LED (DSEG7) + glow verde/oro.
  • CTA in oro metallico con bevel 3D + glow.
  • Bordi neon (box-shadow multipli + inset glow) su card/CTA.
  • Gradienti ovunque (oro, neon bicolore, radiale hero).
  • Micro-animazioni: shine sweep, pulse, flicker, count-up.
  • Feedback vincita: confetti + monete + verde neon + glow.
  • Motivi: reel, ruota, monete/chips, marquee lights, ticker jackpot.
  • Rispettare prefers-reduced-motion.

Fonti

Reference in New Issue View Git Blame Copy Permalink