Impostazioni di stile

Coloree del testo

Punto chiave: Imposta il colore e la trasparenza del testo. È l'elemento più importante, direttamente collegato al contrasto con lo sfondo.

Cosa cambia con questa impostazione: Se la leggibilità è insufficiente, anche un design accattivante difficilmente riceverà clic.

Suggerimento per la regolazione: Dal punto di vista WCAG, prestate attenzione al rapporto di contrasto e assicurate una differenza di luminosità più marcata soprattutto per il testo piccolo.

Voci di impostazione

• Coloree testo: Imposta il colore del testo e ottimizza il contrasto con lo sfondo.
• Alpha (trasparenza): Regola la trasparenza del colore del testo per controllare l'intensità visiva. Il valore va da 0 (completamente trasparente) a 1 (opaco).
• Responsivo: Attiva le impostazioni individuali per dispositivo, consentendo di adattarsi alle diverse condizioni di sfondo su ciascun terminale.

È possibile impostare individualmente anche il colore del testo nello stato hover. La variazione di colore al passaggio del mouse avviene in modo fluido seguendo la Duration della transizione stile. Secondo le WCAG 2.1, è consigliato un rapporto di contrasto di almeno 4.5:1 per il testo normale e di almeno 3:1 per il testo grande.

Ombra del testo

Punto chiave: Imposta l'ombra del testo. Utile quando si desidera migliorare la leggibilità su immagini di sfondo.

Cosa cambia con questa impostazione: L'intensità dell'ombra modifica il bilanciamento tra visibilità e decoratività.

Suggerimento per la regolazione: Iniziate con un Blur ridotto e un'Alpha bassa, aggiungendo gradualmente solo quanto necessario per un risultato sicuro.

Voci di impostazione

• Ombra testo (ON/OFF): Attiva/disattiva l'ombra del testo, determinando se utilizzare il supporto alla leggibilità.
• Colore: Imposta il colore per regolare la visibilità dell'elemento e la coerenza del design.
• Blur + unità: Imposta la quantità di sfocatura per regolare l'estensione dell'ombra o dell'effetto luminoso.
• Horizontal + unità: Imposta lo spostamento orizzontale per regolare la direzionalità dell'ombra.
• Vertical + unità: Imposta lo spostamento verticale per creare una naturale sensazione di profondità.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

L'ombra del testo è configurabile individualmente anche nello stato hover. Quando si posiziona il testo sopra un'immagine di sfondo, scegliere un colore dell'ombra con luminosità opposta a quella dell'immagine (bianco su sfondo scuro, scuro su sfondo chiaro) migliora la leggibilità.

Bordo

Punto chiave: Imposta il colore, lo spessore e il tipo di linea del bordo. Rende nitido il contorno del pulsante e lo identifica come elemento cliccabile.

Cosa cambia con questa impostazione: Anche con colori di sfondo chiari, il bordo permette di evidenziare chiaramente i confini.

Suggerimento per la regolazione: Un bordo troppo spesso riduce la prominenza del testo; iniziare con circa 1px è il modo più pratico per regolare.

Voci di impostazione

• Bordo (ON/OFF): Attiva/disattiva il bordo, determinando se enfatizzare il contorno.
• Colore + Alpha: Imposta simultaneamente colore e trasparenza per regolare visibilità e impatto visivo.
• Larghezza: Imposta la larghezza per regolare l'ampiezza dell'area di visualizzazione.
• Style (none / solid / dashed / dotted): Seleziona il tipo di linea per regolare il tono decorativo.
• Box Sizing (border-box / content-box): Commuta il metodo di calcolo delle dimensioni per prevenire problemi di layout.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

Selezionando border-box, lo spessore del bordo viene incluso nella larghezza e nell'altezza dell'elemento, quindi il layout non cambia quando si aggiunge un bordo. Con content-box, l'elemento complessivo diventa più grande dello spessore del bordo. Anche il bordo nello stato hover è configurabile individualmente.

Angoli arrotondati

Punto chiave: Imposta l'arrotondamento degli angoli dell'elemento. Permette di regolare il tono del brand (rigido/morbido) a livello di impressione visiva.

Cosa cambia con questa impostazione: Il valore degli angoli arrotondati cambia l'aspetto in proporzione alle dimensioni del pulsante.

Suggerimento per la regolazione: Un valore pari a circa il 20-35% dell'altezza tende a produrre un equilibrio né troppo arrotondato né troppo rigido.

Voci di impostazione

• Usa impostazioni individuali: Consente la regolazione dettagliata con valori separati per ogni lato, anziché un valore unico.
• Uniforme: Raggio bordo + unità: Applica lo stesso arrotondamento a tutti e 4 gli angoli, creando rapidamente un aspetto uniforme.
• Individuale: Raggio bordo Alto sinistra / Alto destra / Basso destra / Basso sinistra + unità: Varia l'arrotondamento per ogni angolo, creando accenti di forma intenzionali.
• Unità: Selezionabile tra px / % / em / rem.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

Impostando 50% si ottiene un cerchio perfetto (se l'elemento è quadrato) o un'ellisse. Gli angoli arrotondati nello stato hover sono anch'essi configurabili individualmente, e possono essere utilizzati per creare effetti di cambiamento della forma al passaggio del mouse.

Ombra interna

Punto chiave: Imposta l'ombra interna. È un'impostazione per creare effetti di incavo e profondità.

Cosa cambia con questa impostazione: Utile quando si desidera aggiungere un leggero effetto tridimensionale a un design piatto.

Suggerimento per la regolazione: Un effetto troppo marcato può dare un aspetto datato all'interfaccia; mantenete Blur e Alpha bassi come impostazione di base.

Voci di impostazione

• Ombra interna (ON/OFF): Attiva/disattiva l'ombra interna per regolare l'effetto di incavo.
• Colore: Imposta il colore per regolare la visibilità dell'elemento e la coerenza del design.
• Blur: Regola la quantità di sfocatura per controllare l'intensità e l'estensione dell'ombra.
• Horizontal: Regola lo spostamento orizzontale per creare la direzionalità dell'ombra e dell'elemento.
• Vertical: Regola lo spostamento verticale per creare un'espressione naturale di profondità.
• Spread: Imposta l'espansione dell'ombra per regolare l'estensione del contorno.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

L'ombra interna viene generata come box-shadow: inset in CSS. Anche l'ombra interna nello stato hover è configurabile individualmente, ed è adatta per creare effetti di pressione. L'ombra interna viene renderizzata come pseudo-elemento ::after all'interno del pulsante, pertanto viene ritagliata nella forma corretta in coordinamento con le impostazioni degli angoli arrotondati.

Ombra

Punto chiave: Imposta l'ombra esterna. Un'impostazione per far risaltare il pulsante dallo sfondo e rafforzare la guida visiva.

Cosa cambia con questa impostazione: La direzione e la distanza dell'ombra determinano la percezione di profondità dell'elemento.

Suggerimento per la regolazione: Su mobile le ombre appaiono più evidenti, quindi si consiglia di ridurle di un livello nella scheda SP.

Voci di impostazione

• Shadow (ON/OFF): Attiva/disattiva l'ombra esterna per regolare l'effetto di sollevamento.
• Colore + Alpha: Imposta simultaneamente colore e trasparenza per regolare visibilità e impatto visivo.
• Blur: Regola la quantità di sfocatura per controllare l'intensità e l'estensione dell'ombra.
• Horizontal: Regola lo spostamento orizzontale per creare la direzionalità dell'ombra e dell'elemento.
• Vertical: Regola lo spostamento verticale per creare un'espressione naturale di profondità.
• Spread: Imposta l'espansione dell'ombra per regolare l'estensione del contorno.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

Trasparenza

Punto chiave: Imposta l'opacità complessiva dell'elemento e la modalità di fusione. Permette di regolare a livello di design la sovrapposizione con lo sfondo.

Cosa cambia con questa impostazione: Anche con lo stesso colore, Opacità e Blend cambiano notevolmente l'impressione visiva.

Suggerimento per la regolazione: Se la leggibilità diminuisce, correggete prima il colore del testo e il contrasto con lo sfondo, poi regolate l'Opacità.

Voci di impostazione

• Opacità: Imposta l'opacità per regolare l'aspetto complessivo dell'elemento.
• Modalità di fusione: Imposta la modalità di fusione per regolare la sovrapposizione con lo sfondo. Valori principali: normal (normale) / multiply (moltiplica) / screen (schermo) / overlay (sovrapposizione).
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

Riducendo l'Opacità, tutti gli elementi figli (testo, icone, ecc.) vengono influenzati. Se desiderate rendere trasparente lo sfondo mantenendo la leggibilità del testo, è più efficace regolare l'Alpha nelle impostazioni dello sfondo anziché l'Opacità del pulsante stesso. Anche la trasparenza nello stato hover è configurabile individualmente.

Limitazione del Modalità di fusione: Quando si imposta il Modalità di fusione su più livelli (sfondo, miniatura, fascia), l'ordine di composizione del browser potrebbe produrre tonalità di colore indesiderate. Quando si utilizza il Modalità di fusione, si consiglia di verificare le impostazioni un livello alla volta.

Transizione

Punto chiave: Imposta la velocità di transizione dallo stato normale allo stato hover. È l'elemento che determina la "piacevolezza" durante l'interazione.

Cosa cambia con questa impostazione: Se troppo veloce il cambiamento non viene percepito, se troppo lento la risposta appare lenta.

Suggerimento per la regolazione: Partite con una Duration di 200-350ms come riferimento, aggiungendo ritardi ed easing personalizzati solo dove è necessario un effetto particolare.

Voci di impostazione

• Durata (ms): Imposta il tempo della variazione per regolare la velocità di risposta.
• Ritardo (ms): Imposta il tempo di attesa prima dell'inizio della variazione per regolare il timing dell'effetto.
• Andamento: Imposta la curva di velocità per definire l'impressione del movimento. Opzioni: ease / ease-in / ease-out / ease-in-out / linear / Personalizzato.
• Valore personalizzato: Specifica un valore di easing personalizzato (formato CSS cubic-bezier) per regolare in dettaglio la velocità percepita della transizione hover.
• Ripristina: Riporta le impostazioni di questa sezione allo stato iniziale.
• Avviso quando l'animazione del testo è attiva: Permette di verificare le note sulla combinazione con l'animazione del testo e di evitare conflitti.

Questa transizione si applica alla transizione hover di ciascuna proprietà nel pannello delle impostazioni stile, come colore del testo, bordo, angoli arrotondati, ombra, ombra interna e trasparenza. Le transizioni di sfondo e icone possono essere impostate individualmente nei rispettivi pannelli. Quando si combina con l'animazione del testo, le transizioni potrebbero interferire tra loro; prestate attenzione alla regolazione di Duration e Delay.

Limitazione delle proprietà di transizione: Internamente, solo color, text-shadow, border, border-radius, box-shadow e opacity sono soggetti alla transizione. background (colore di sfondo e gradienti) e transform (trasformazioni) non sono interessati da questa transizione e vengono controllati dalle rispettive impostazioni di transizione dedicate. Anche le variazioni di width / height non transitano con questa impostazione.