Il box-shadow è una proprietà CSS fondamentale per definire la profondità visiva e l'interazione degli elementi all'interno di un'interfaccia web. Attraverso la manipolazione di parametri geometrici e cromatici, questa proprietà permette di simulare il comportamento della luce su superfici bidimensionali, migliorando l'affidabilità visiva di schede, pulsanti e campi di testo.
Il Generatore di Box Shadow fornisce un ambiente di controllo visivo per calibrare questi parametri in tempo reale, eliminando la necessità di procedere per tentativi nel codice.
I parametri fondamentali del box-shadow
La struttura di un'ombra CSS si basa su regole geometriche precise. Ciascun cursore dello strumento agisce direttamente su una delle componenti della proprietà box-shadow:
- Offset orizzontale: Sposta l'ombra lateralmente lungo l'asse X. L'intervallo di regolazione varia da -50px (spostamento a sinistra) a 50px (spostamento a destra).
- Offset verticale: Sposta l'ombra verticalmente lungo l'asse Y. L'intervallo varia da -50px (spostamento verso l'alto) a 50px (spostamento verso il basso).
- Sfocatura: Determina la dispersione dell'ombra lungo i suoi bordi esterni. Con un valore di 0px i contorni rimangono netti e taglienti, mentre aumentando il valore fino a un massimo di 100px l'ombra si ammorbidisce progressivamente.
- Estensione (spread): Definisce la crescita o la contrazione dell'ombra prima che venga applicata la sfocatura. Il cursore spazia da -50px a 50px. Un valore positivo espande l'ombra in tutte le direzioni, mentre un valore negativo la restringe, tirandola verso l'interno dell'elemento.
- Colore dell'ombra e Opacità: Consentono di selezionare la tonalità cromatica dell'ombra e di regolarne la trasparenza per ammorbidire l'impatto visivo sul background.
Ombre esterne e ombre interne (inset)
Il comportamento predefinito di un'ombra proietta l'effetto all'esterno del perimetro dell'elemento, simulando un oggetto sollevato rispetto allo sfondo.
Attivando l'opzione Ombra interna (inset), la direzione della proiezione viene invertita. L'ombra viene confinata all'interno dei bordi dell'elemento, creando un effetto di scavo o di vuoto. Questa tecnica è comunemente utilizzata per rappresentare elementi premuti, come pulsanti attivi o campi di inserimento dati (input) che devono apparire incassati nella pagina.
Gestione dei livelli e ombre multistrato
Le ombre singole faticano a riprodurre la complessità della luce reale. Per ottenere un design realistico e morbido, i designer sovrappongono più livelli di ombre.
Lo strumento pre-renderizza cinque livelli complessivi. Il primo livello è attivo con i valori predefiniti di 0 8 24 -4 e un colore nero trasparente al 18%, mentre gli altri quattro livelli sono inizialmente nascosti.
- Aggiungi livello: Consente di inserire un nuovo livello d'ombra che parte con i valori di default.
- Rimuovi livello: Elimina il livello selezionato per semplificare la struttura.
Quando sono presenti più livelli, il generatore compila automaticamente il codice CSS separando i singoli blocchi di valori con una virgola, rispettando la sintassi standard richiesta dai browser.
Elaborazione locale e riservatezza
Il funzionamento del Generatore di Box Shadow avviene interamente all'interno del browser dell'utente. Ogni modifica ai cursori, selezione di colore o aggiunta di livelli viene elaborata localmente sul dispositivo in uso. Nessun dato impostato o generato viene caricato su BroBroGo, garantendo che il flusso di lavoro rimanga confinato all'interno della sessione di navigazione corrente.
Domande frequenti
Cosa controllano esattamente offset, blur e spread?
L'offset sposta l'ombra a sinistra/destra e in alto/basso, la sfocatura (blur) ne ammorbidisce i bordi e l'estensione (spread) la ingrandisce o rimpicciolisce prima di sfocarla. Un valore di spread negativo restringe l'ombra, utile per un effetto più compatto e aderente.
Cosa fa l'opzione inset?
Un'ombra normale cade all'esterno dell'elemento, come la luce dietro una scheda in rilievo. L'opzione Inset la proietta invece all'interno, facendo apparire l'elemento incassato: ideale per input scavati o pulsanti premuti.
Perché sovrapporre più livelli di ombra?
Un'ombra singola, oltre una certa dimensione, rischia di apparire piatta. Un'elevazione realistica combina solitamente un'ombra stretta e scura con una più morbida e ampia: aggiunga un secondo livello e li regoli in modo indipendente per ottenere questo effetto.