Generatore di proprietà CSS

Un generatore di proprietà CSS è uno strumento che crea il codice CSS per un effetto visivo a partire da una serie di cursori e selettori di colore, anziché far scrivere il codice a mano all'utente. Questo strumento copre quattro effetti: gradienti, ombre dei riquadri, raggio del bordo e ombre del testo. Ogni pannello mostra un'anteprima in tempo reale e produce CSS pronto da copiare.

Cosa genera

• Gradienti: transizioni di colore lineari o radiali tra due colori
• Ombre dei riquadri: un'ombra esterna o interna attorno a un elemento, con controlli per scostamento, sfocatura, estensione, colore e opacità
• Raggio del bordo: angoli arrotondati, uguali sui quattro angoli oppure impostati singolarmente
• Ombre del testo: un'ombra dietro il testo, con controlli per scostamento, sfocatura, colore e opacità

Ogni impostazione aggiorna contemporaneamente l'anteprima e il CSS generato, così le modifiche si possono controllare prima di copiare il codice.

Come calcolare un gradiente lineare CSS

Un gradiente lineare passa da un colore a un altro lungo una linea retta. La sua sintassi CSS è:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

L'angolo si misura in gradi, da 0 a 360. In CSS, 0deg va dal basso verso l'alto e 90deg va da sinistra a destra. position1 e position2 stabiliscono dove ciascun colore raggiunge la piena intensità, come percentuale della lunghezza del gradiente.

Esempio

I valori iniziali del generatore sono un angolo di 90 gradi, #ff5f6d allo 0% e #ffc371 al 100%. Il risultato è:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

La prima riga è un colore semplice di riserva per i browser che, per qualche motivo, non riescono a visualizzare il gradiente. La seconda riga è il gradiente vero e proprio.

Formula del gradiente radiale

Un gradiente radiale si espande verso l'esterno da un punto centrale anziché lungo una linea. La sua forma può essere un cerchio o un'ellisse:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

Questo generatore produce sempre un gradiente radiale circolare. Non offre l'opzione della forma ellittica né un modo per spostare il punto centrale: si possono modificare solo i due colori e le loro posizioni di arresto.

Entrambi i tipi di gradiente di questo strumento usano esattamente due colori, impostati con i selettori Colore 1 e Colore 2. Non c'è alcuna opzione per aggiungere un terzo punto di arresto del colore.

Formula dell'ombra del riquadro CSS

Un'ombra del riquadro è un'ombra disegnata attorno ai bordi di un elemento:

1box-shadow: h-offset v-offset blur spread color;
2

h-offset e v-offset spostano l'ombra a sinistra/destra e in alto/basso. I valori positivi la spingono a destra o in basso; i valori negativi la spingono a sinistra o in alto. blur ammorbidisce il bordo dell'ombra; un numero più alto estende maggiormente la sfumatura. spread ingrandisce o riduce l'ombra prima che venga applicata la sfocatura. Aggiungere la parola chiave inset prima degli scostamenti disegna l'ombra all'interno del bordo dell'elemento anziché all'esterno.

Esempio

Con le impostazioni predefinite (scostamento orizzontale di 5px, scostamento verticale di 5px, sfocatura di 10px, estensione di 0px, nero con opacità del 20%), lo strumento produce:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

Il cursore dell'opacità del selettore di colore va da 0 a 100 e viene convertito nella scala da 0 a 1 usata da rgba(), quindi il 20% diventa 0,2.

Formula del raggio del bordo CSS

Il raggio del bordo arrotonda gli angoli di un elemento. Esistono due forme:

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

Quando "Stesso raggio per tutti gli angoli" è selezionato, il generatore scrive la forma abbreviata. Quando non è selezionato, elenca sempre quattro valori, anche se sono uguali, in quest'ordine: in alto a sinistra, poi in alto a destra, poi in basso a destra, poi in basso a sinistra.

Esempio

Il raggio predefinito è 10px su ogni angolo:

1border-radius: 10px;
2

Un'immagine di avatar circolare di solito usa invece border-radius: 50%, anche se quel valore è fuori dall'intervallo consentito dal cursore di questo generatore (da 0 a 100 pixel).

Formula dell'ombra del testo CSS

Un'ombra del testo si comporta come un'ombra del riquadro, ma si applica alle lettere anziché al riquadro di un elemento. Accetta due scostamenti e una sfocatura facoltativa, senza valore di estensione:

1text-shadow: h-offset v-offset blur color;
2

Esempio

Con le impostazioni predefinite (scostamento orizzontale di 2px, scostamento verticale di 2px, sfocatura di 3px, nero con opacità del 50%):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Come usare il generatore di proprietà CSS

1. Scegli una scheda: Gradiente, Ombra del riquadro, Raggio del bordo o Ombra del testo.
2. Regola i cursori, i selettori di colore e le caselle di controllo. Il pannello di anteprima e il codice CSS si aggiornano subito.
3. Seleziona il pulsante "Copia negli appunti" e incolla il codice in un foglio di stile o in un attributo style.
4. Seleziona "Reimposta" per riportare ogni campo di tutte e quattro le schede al valore iniziale. Questo riporta anche la scheda attiva su Gradiente, anche se si stava visualizzando un'altra scheda.

Domande frequenti

A cosa serve un generatore di proprietà CSS? Trasforma l'input di cursori e selettori di colore in codice CSS finito per gradienti, ombre e angoli arrotondati, così chi lo usa non deve scrivere né memorizzare a mano quella sintassi.

Qual è la differenza tra un gradiente lineare e uno radiale? Un gradiente lineare cambia colore lungo una linea retta con un angolo stabilito. Un gradiente radiale cambia colore verso l'esterno a partire da un punto centrale. L'opzione radiale di questo strumento usa sempre una forma circolare.

Questo strumento può creare un gradiente con più di due colori? No. I pannelli del gradiente lineare e di quello radiale supportano esattamente due colori, Colore 1 e Colore 2, ciascuno con la propria posizione di arresto.

In che cosa un'ombra interna del riquadro è diversa da una normale? Un'ombra normale del riquadro si trova all'esterno dei bordi dell'elemento, come la luce che cade dietro di esso. Un'ombra interna si trova invece all'interno dei bordi e fa sembrare l'elemento incassato anziché in rilievo.

Perché i valori degli angoli arrotondati compaiono nell'ordine in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra? Quell'ordine è il modo in cui la proprietà CSS border-radius prevede che vengano scritti quattro valori separati, procedendo in senso orario a partire dall'angolo in alto a sinistra.

Il CSS generato funziona in tutti i browser? Gradienti, ombre dei riquadri, raggio del bordo e ombre del testo sono tutti supportati nelle versioni attuali di Chrome, Firefox, Safari ed Edge. All'output non viene aggiunto alcun prefisso del produttore.

Riferimenti

1. Mozilla Developer Network. linear-gradient(). Riferimento di linear-gradient() — to top e to right equivalgono a 0deg e 90deg.
2. Mozilla Developer Network. radial-gradient(). Riferimento di radial-gradient() — la forma di un gradiente radiale può essere un cerchio o un'ellisse.
3. Mozilla Developer Network. box-shadow. Riferimento di box-shadow — direzioni dello scostamento, estensione e parola chiave inset.
4. Mozilla Developer Network. border-radius. Riferimento di border-radius — l'ordine dei quattro valori: in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra.
5. Mozilla Developer Network. text-shadow. Riferimento di text-shadow — ogni ombra del testo è composta da due o tre lunghezze (scostamenti e sfocatura) più un colore facoltativo.