Come si usa
- Scegli la scheda Gradiente o Pulsante.
- Regola i controlli e guarda l'anteprima dal vivo: colori, angolo e tipo per un gradiente; testo, colori, padding e raggio degli angoli per un pulsante.
- Clicca sull'icona di copia sopra il blocco di codice e incolla il CSS nel tuo foglio di stile.
La scheda Gradiente costruisce uno sfondo a partire da due colori. Puoi scegliere tra un gradiente lineare e uno radiale. Per i gradienti lineari c'è un cursore dell'angolo da 0 a 360 gradi. L'opzione radiale produce un gradiente circolare dal primo al secondo colore. Il codice sotto l'anteprima è una singola dichiarazione background, per esempio un linear-gradient con un angolo e due color stop, pronta da incollare.
La scheda Pulsante produce una regola completa per una classe chiamata custom-button. Imposti il testo dell'etichetta per l'anteprima, il colore di sfondo, il colore del testo, il padding orizzontale e verticale (da 0 a 100 px ciascuno) e il raggio degli angoli (da 0 a 50 px). Il CSS generato include i colori, il padding e il raggio che hai scelto, oltre a nessun bordo, un cursore a puntatore, un peso del carattere medio, una breve transizione dell'opacità e una regola hover che abbassa leggermente l'opacità.
I colori si possono scegliere con il controllo colore o scrivere come testo. L'output è CSS semplice, senza prefissi dei vendor e senza framework, quindi puoi usarlo in qualsiasi progetto e modificarlo ulteriormente. I gradienti con più di due color stop non sono supportati da questo strumento.
Non viene inviato nulla a un server. L'anteprima e il codice vengono generati nel tuo browser mentre scrivi.
Domande frequenti
Posso creare un gradiente con tre o più colori?
No. Questo strumento usa due colori. Puoi aggiungere altri stop modificando il CSS copiato.
A cosa serve il controllo dell'angolo?
Per i gradienti lineari imposta la direzione in gradi. È nascosto per i gradienti radiali, che sono sempre circolari.
Qual è il nome della classe nel CSS del pulsante?
La regola generata usa la classe custom-button, che puoi rinominare per adattarla al tuo progetto.
Aggiunge uno stile hover al pulsante?
Sì. Il CSS copiato include una regola hover che imposta l'opacità a 0.9.
Quello che inserisco viene caricato?
No. Il CSS viene creato nel tuo browser.