CSS Gradient Generator: Una panoramica dettagliata

CSS Gradient Generator è un'applicazione molto utile per chi lavora con CSS e vuole creare gradient personalizzati. Questa applicazione è composta da diverse parti principali che contribuiscono a rendere il processo di creazione e gestione dei gradient semplice e intuitivo.

La lista dei gradient

Sulla sinistra dell'applicazione troviamo la lista delle layer. Se ci sono almeno una layer nella lista, sarà possibile scaricare il codice finale cliccando sul bottone corrispondente. In questo pannello è possibile gestire l'ordine delle layer, eliminarle e disattivare la loro visibilità. Se una layer è impostata come invisibile, non sarà presa in considerazione nella generazione del codice finale.

Quando si clicca su una layer, apparirà un pannello con le impostazioni in basso all'applicazione.

Il pannello delle impostazioni della layer

Quando si clicca su una particolare layer nel pannello delle layer in basso allo schermo, si visualizza il pannello delle impostazioni. Nell'angolo in alto a sinistra di questo pannello ci sono i bottoni utilizzati per impostare il tipo di gradient. Proprio accanto a loro c'è un bottone che apre il pannello con le impostazioni di un determinato gradient come dimensione, ripetibilità, trasparenza generale, modalità di fusione ecc.

È possibile cambiare i valori negli input digitando, utilizzando la rotella del mouse o cliccando sul campo e trascinando il cursore verso l'alto o verso il basso. Proprio accanto al titolo di questo pannello ci sono icone. Se si clicca su una di queste icone, apparirà un menu che permetterà, tra le altre cose, di applicare le impostazioni di una determinata layer a altre layer.

È possibile spostare l'intero pannello afferrandone il bordo superiore. Accanto a questo c'è un bottone che apre un pannello dove è possibile aggiungere automaticamente punti allo slider.

Il luogo principale del pannello è occupato dallo slider del gradient. Se si fa doppio clic su un determinato punto dello slider, si aggiunge un nuovo punto. È possibile spostare i punti con il mouse o con le frecce direzionali. È possibile selezionare più punti con il tasto Ctrl.

Ci sono alcuni bottoni nell'angolo destro proprio sopra lo slider. Con questi bottoni è possibile selezionare il punto successivo/precedente sul slider. Con questi bottoni è possibile tagliare il gradient per il punto selezionato. Questo può essere utile quando si vuole disabilitare la transizione fluida per i punti selezionati.

Con questi bottoni è possibile impostare il colore pieno sul lato sinistro/destro per i punti selezionati.

Con questi bottoni è possibile copiare/incollare il colore dal punto selezionato. È possibile effettuare tutte queste azioni con le chiavi appropriate. Il modo migliore è dare un'occhiata alla scheda del tastiera in questa guida.

Inoltre, è possibile attivare la modalità di precisione per lo slider con un bottone.

La tavola principale

Quando si seleziona una layer dal pannello sinistro, sulla tavola principale sarà possibile impostare il suo punto focale, la direzione del gradient, nonché la posizione del gradient. Queste opzioni sono disponibili a seconda del tipo di gradient dato e della sua dimensione. Le opzioni date sono mostrate in basso alla tavola principale.

È possibile passare a altri modi utilizzando le chiavi (Q, W, E) mostrate in basso alla tavola principale. È inoltre possibile passare tra questi modi utilizzando le chiavi del mouse.

Per default, la chiave sinistra è utilizzata per spostare il punto centrale del gradient, e la chiave destra è utilizzata per ruotare il gradient.

Inoltre, si utilizza la chiave S per abilitare/disabilitare la griglia e la modalità snap.

La libreria

La libreria è utilizzata per memorizzare i lavori salvati al suo interno. Per mostrare la libreria, cliccare sull'icone. Quando si aggiunge almeno una layer al proprio lavoro, sarà possibile salvare l'intero lavoro attuale nella libreria.

Quando si clicca su un elemento nella lista della libreria, le sue layer saranno aggiunte al proprio lavoro attuale senza rimuovere nessuna layer.

È possibile continuare a lavorare sul proprio lavoro e poi salvarlo nella libreria come un nuovo elemento.

Nell'angolo in alto a destra della libreria c'è un icone del menu. In questo menu ci sono alcune opzioni. La prima opzione "gestire la libreria" permette di... gestire la libreria. Una volta abilitata, è possibile aggiungere nuovi gruppi, rinominare i gruppi esistenti o trascinare gli elementi tra i gruppi.

Import e export permettono di importare l'elemento selezionato da un file e di esportarlo in un file.

L'ultima opzione in questo menu permette di aprire una libreria online. Da questo pannello è possibile aggiungere elementi creati da altri utenti.

Se si vuole condividere il proprio lavoro personalmente, è possibile utilizzare un modulo aggiuntivo, che si può aprire cliccando sul link nel testo in alto al pannello della libreria online.

CSS Gradient Generator offre un'esperienza completa e flessibile per la creazione e gestione dei gradient CSS, rendendolo un ottimo strumento per gli sviluppatori e i designer web.