394 lines
18 KiB
Markdown
394 lines
18 KiB
Markdown
# 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:
|
|
|
|
```css
|
|
: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:
|
|
|
|
```css
|
|
/* 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):
|
|
|
|
```css
|
|
.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)
|
|
|
|
```css
|
|
.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")
|
|
|
|
```css
|
|
.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:
|
|
|
|
```css
|
|
/* 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)
|
|
|
|
```css
|
|
.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)
|
|
|
|
```css
|
|
.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.
|
|
|
|
```css
|
|
.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.
|
|
|
|
```css
|
|
.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
|
|
- **Stake** — https://stake.com/ e https://stake.com/casino/home — tema scuro blu notte, "Stake Originals" con dark theme + accenti colorati, equilibrio professionale/immersivo.
|
|
- **Roobet** — https://roobet.com/ — estetica viola + verde neon, "neon-lit realm", playground digitale pulsante.
|
|
|
|
### Collezioni ispirazione (UI/branding)
|
|
- Dribbble — Casino UI: https://dribbble.com/tags/casino-ui
|
|
- Dribbble — Gambling UI: https://dribbble.com/tags/gambling-ui
|
|
- Dribbble — Casino App: https://dribbble.com/tags/casino_app
|
|
- Dribbble — esempio piattaforma: https://dribbble.com/shots/23736814-UX-UI-Design-of-Casino-Gambling-Platform
|
|
- Behance — Casino Game UI: https://www.behance.net/search/projects/casino%20game%20ui
|
|
- Behance — Casino Web Design: https://www.behance.net/search/projects/casino%20web%20design
|
|
- Colorlib — 17 Casino Website Design 2026: https://colorlib.com/wp/casino-website-design/
|
|
- Subframe — 25 Casino Website Design Examples: https://www.subframe.com/tips/casino-website-design-examples
|
|
|
|
### CodePen (slot / reel / animazioni)
|
|
- CSS-only Slot Machine: https://codepen.io/tangxuguo/pen/xqrNmx
|
|
- Simple CSS Slot Machine Animation: https://codepen.io/cnbkts/pen/QMXPZM
|
|
- CSS/JS Slot machine: https://codepen.io/MrFirthy/pen/oGVWqK
|
|
- Slot Machine Spinner: https://codepen.io/Thomasbetten/pen/nPeMPo
|
|
- Real Slots Reels (3D): https://codepen.io/josfabre/pen/abReBvP
|
|
- Reel Slot Machine (no JS): https://codepen.io/stevencamilleri-mrg/pen/abzGOGd
|
|
|
|
### Font (download)
|
|
- Bebas Neue — https://fonts.google.com/specimen/Bebas+Neue
|
|
- Anton — https://fonts.google.com/specimen/Anton
|
|
- Oswald — https://fonts.google.com/specimen/Oswald
|
|
- DSEG (7/14-segment) — https://www.keshikan.net/fonts-e.html
|
|
- Segment7 — https://fontlibrary.org/en/font/segment7
|
|
|
|
### CSS glow / neon (tecniche)
|
|
- CSS-Tricks — Neon Text with CSS: https://css-tricks.com/how-to-create-neon-text-with-css/
|
|
- Coder's Block — Creating Glow Effects with CSS: https://codersblock.com/blog/creating-glow-effects-with-css/
|
|
- FreeFrontend — 40+ CSS Glow Effects: https://freefrontend.com/css-glow-effects/
|
|
|
|
---
|
|
|
|
## 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
|
|
|
|
- The Best Color Schemes for Gambling Websites — https://mightymegaphone.com/2025/02/12/the-best-color-schemes-for-gambling-websites-designers-guide/
|
|
- Top 10 Color Palettes for Casino Branding (Lounge Lizard, 2025) — https://www.loungelizard.com/blog/top-10-color-palettes-for-casino-branding/
|
|
- The Psychology of Color in Casino Design (BetBoyz) — https://betboyz.com/igaming-branding-and-design/igaming-branding-the-psychology-of-color-in-casino-design/
|
|
- The Color of Luck: Palette Choices in Casino Game Design — https://www.seegreatart.art/the-color-of-luck-a-visual-study-of-palette-choices-in-casino-game-design/
|
|
- 17 Best Casino Website Design Inspiration 2026 (Colorlib) — https://colorlib.com/wp/casino-website-design/
|
|
- 25 Casino Website Design Examples (Subframe) — https://www.subframe.com/tips/casino-website-design-examples
|
|
- Inside the Digital Lobby: Casino Interface Design — https://www.muggsybogues.com/inside-the-digital-lobby-a-feature-spotlight-on-casino-interface-design/
|
|
- Stake — https://stake.com/ | https://stake.com/casino/home
|
|
- Stake Review (aesthetic details) — https://www.sportsgambler.com/review/stake/
|
|
- Roobet — https://roobet.com/
|
|
- Roobet Review (aesthetic details) — https://www.thespike.gg/reviews/roobet
|
|
- Dribbble Casino UI — https://dribbble.com/tags/casino-ui
|
|
- Dribbble Gambling UI — https://dribbble.com/tags/gambling-ui
|
|
- Behance Casino Game UI — https://www.behance.net/search/projects/casino%20game%20ui
|
|
- Bebas Neue (Google Fonts) — https://fonts.google.com/specimen/Bebas+Neue
|
|
- Anton (Google Fonts) — https://fonts.google.com/specimen/Anton
|
|
- Oswald (Google Fonts) — https://fonts.google.com/specimen/Oswald
|
|
- DSEG 7/14-segment fonts — https://www.keshikan.net/fonts-e.html
|
|
- Segment7 (Font Library) — https://fontlibrary.org/en/font/segment7
|
|
- 17 Royal Casino Fonts (HipFonts) — https://hipfonts.com/casino-fonts/
|
|
- Best Casino Fonts Free/Premium (Hyperpix) — https://hyperpix.net/fonts/casino-fonts/
|
|
- How to Create Neon Text With CSS (CSS-Tricks) — https://css-tricks.com/how-to-create-neon-text-with-css/
|
|
- Creating Glow Effects with CSS (Coder's Block) — https://codersblock.com/blog/creating-glow-effects-with-css/
|
|
- 47 Best CSS Glow Effects (TestMu AI) — https://www.testmuai.com/blog/glowing-effects-in-css/
|
|
- 40+ CSS Glow Effects (FreeFrontend) — https://freefrontend.com/css-glow-effects/
|
|
- CodePen — CSS-only Slot Machine — https://codepen.io/tangxuguo/pen/xqrNmx
|
|
- CodePen — Real Slots Reels — https://codepen.io/josfabre/pen/abReBvP
|
|
- CodePen — Reel Slot Machine — https://codepen.io/stevencamilleri-mrg/pen/abzGOGd
|