Come generare codice CSS box-shadow

Inserisci offset, sfocatura, estensione e colore, quindi attiva inset se vuoi includere questa parola chiave. Il generatore restituisce una dichiarazione CSS box-shadow con i quattro valori numerici espressi in pixel.

A cosa serve il generatore di box-shadow

Il generatore prepara una dichiarazione CSS box-shadow a partire dai parametri che inserisci. Puoi usarlo per definire la posizione dell’ombra, la sua sfocatura, l’estensione e il colore senza comporre manualmente la dichiarazione. Il controllo dedicato consente inoltre di aggiungere l’opzione inset quando vuoi ottenere una dichiarazione con questa parola chiave.

I controlli disponibili comprendono l’offset orizzontale, l’offset verticale, la sfocatura, l’estensione, un campo di testo per il colore e una casella per inset. Se lasci invariati i valori iniziali, trovi 2 per i due offset, 5 per la sfocatura, 0 per l’estensione, #00000033 per il colore e l’opzione inset disattivata. Questi valori costituiscono un punto di partenza: puoi sostituirli con quelli adatti all’ombra che vuoi descrivere.

Come generare la dichiarazione CSS

1. Apri il generatore e individua i campi relativi ai due offset, alla sfocatura, all’estensione, al colore e all’opzione inset. Prima di modificare i valori, puoi osservare le impostazioni iniziali: offset orizzontale 2, offset verticale 2, sfocatura 5, estensione 0, colore #00000033 e casella inset non selezionata.

2. Inserisci l’offset orizzontale e quello verticale. Il primo rappresenta il valore orizzontale fornito alla dichiarazione, mentre il secondo rappresenta quello verticale. Per un’ombra senza spostamento, nel caso verificato, puoi inserire 0 in entrambi i campi.

3. Compila il campo della sfocatura e quello dell’estensione. Anche questi sono valori numerici forniti alla dichiarazione. Nel caso verificato sono accettati 0 per la sfocatura e per l’estensione; se usi altri valori, il risultato riporta quelli che hai fornito.

4. Inserisci il colore nel campo di testo dedicato. Il valore iniziale mostrato è #00000033, ma puoi sostituirlo con il testo che vuoi passare al generatore. Le informazioni disponibili non descrivono una sintassi colore aggiuntiva o regole di validazione del campo, quindi controlla il testo inserito prima di usare il risultato.

5. Lascia inset disattivato per una dichiarazione senza questa parola chiave. Se invece vuoi includerla, seleziona la casella prima di generare il risultato.

6. Avvia la generazione e leggi la dichiarazione prodotta. I quattro valori numerici vengono accompagnati dal suffisso px. Quando inset è attivo, la dichiarazione include anche la parola chiave inset. Copia quindi la dichiarazione nel punto del foglio di stile in cui vuoi utilizzare quei valori e verifica che corrisponda all’effetto previsto.

Come leggere e verificare il risultato

Il risultato è una dichiarazione CSS box-shadow costruita con i quattro valori numerici e il colore forniti. Per controllarla, confronta nell’ordine l’offset orizzontale, l’offset verticale, la sfocatura, l’estensione e il colore. Verifica poi se la parola chiave inset è presente quando hai selezionato l’opzione. Questa lettura permette di distinguere una dichiarazione con inset da una che non lo contiene, senza dover ricostruire manualmente i parametri.

Nel caso verificato, la generazione restituisce un esito positivo anche quando offset orizzontale, offset verticale, sfocatura ed estensione valgono 0. Questo dato riguarda il caso esaminato e non stabilisce un intervallo generale di valori utilizzabili. Le informazioni disponibili non definiscono inoltre arrotondamenti, regole di validazione, sintassi colore aggiuntiva, gestione degli errori o limiti dell’output.

Se il risultato non descrive l’ombra che avevi previsto, confronta prima i valori inseriti con quelli riportati nella dichiarazione. Controlla anche lo stato della casella inset, perché la sua selezione modifica la presenza della parola chiave nella dichiarazione. Per isolare la causa di una differenza, cambia un solo parametro alla volta e rileggi il codice generato dopo ogni modifica.

Esempio pratico

Un elemento richiede una dichiarazione con ombra interna, senza spostamento, sfocatura o estensione.

Inserisci 0 nell’offset orizzontale, nell’offset verticale, nella sfocatura e nell’estensione, lascia #00000033 nel campo colore, seleziona inset e avvia la generazione.

Una dichiarazione box-shadow con 0px per i due offset, 0px per sfocatura ed estensione, il colore #00000033 e la parola chiave inset inclusa.

Limiti

• È verificato un caso con zero nei due offset, nella sfocatura e nell’estensione, con esito positivo; non sono invece definiti intervalli numerici, arrotondamenti, regole di validazione, sintassi colore aggiuntiva, gestione degli errori o limiti dell’output.

Errori comuni

• Se la dichiarazione non corrisponde all’ombra prevista, confronta l’ordine dei due offset e controlla lo stato dell’opzione inset; correggi il campo interessato o la selezione e genera di nuovo il risultato.

Domande frequenti

Posso usare zero per i valori di box-shadow?

Nel caso verificato puoi inserire 0 nei due offset, nella sfocatura e nell’estensione: la generazione restituisce un esito positivo. Questo non definisce però altri intervalli o regole di validazione.

Che cosa cambia quando attivo inset?

Quando selezioni inset, la dichiarazione generata include la parola chiave inset. Quando l’opzione resta disattivata, tale parola chiave non viene aggiunta.

Quali sono i valori predefiniti?

All’avvio sono impostati offset orizzontale 2, offset verticale 2, sfocatura 5, estensione 0, colore #00000033 e inset disattivato. Puoi sostituire questi valori nei relativi controlli.