Un gradiente è una progressione di colori con un punto iniziale e uno finale. Un gradiente lineare inizia con un colore (come l'azzurro) e passa gradualmente seguendo una linea retta a un altro colore (come il blu). Pensa ai tramonti come il miglior esempio di gradiente lineare e come ogni colore progredisce magnificamente senza interruzioni fino al raggiungimento del colore successivo.
Testo sfumato
Perché i gradienti di testo sono importanti?
I programmatori e gli sviluppatori di siti web utilizzano continuamente il testo con gradiente, infatti i gradienti sono una delle ultime tendenze nella progettazione di siti web per alcuni motivi: sono facili da implementare e hanno un meraviglioso effetto visivo. Che si tratti di sfumature di testo tenui o luminose e molto colorate, sapere come creare una sfumatura con il testo è uno strumento utile per il tuo sito web.
Come creare una sfumatura di testo: la scomposizione della sintassi
Ora che sai perché i gradienti di testo sono importanti, entriamo nella parte tutorial di questo articolo. Sappi che andremo ad utilizzare una sfumatura di colore sul testo con i CSS senza l'utilizzo di immagini. Quando si tratta di codifica e creazione, è importante sapere di cosa hai bisogno, quindi lo elenco di seguito.
Cosa devi sapere
Conoscere le basi è il primo passo per capire come costruire una corretta sintassi per il gradiente di testo. Dai un'occhiata a queste parole chiave per avere una migliore comprensione di ciò di cui avrai bisogno per creare il tuo gradiente di testo:
Dimensione del font
Questo è autoesplicativo. Dovrai impostare la dimensione del carattere prima di poter impostare il resto del gradiente. Lavorare con la dimensione del carattere in CSS si basa su EMS, pixel, punti e percentuali. Potrebbe essere necessario cercare le conversioni, ma in genere ci si può aspettare che 1em = 12pt = 16px = 100%.
Direzione
È possibile definire l'angolo del gradiente lineare nel codice con una parola chiave o con un numero e un'unità. Con una parola chiave, useresti to bottom, to top, to left e to right per determinare dove deve posizionarsi il punto di partenza. Queste parole chiave direzionali possono essere combinate, come to top right o in to bottom left, per creare una linea diagonale. È inoltre possibile utilizzare abbinamenti di numeri e unità per determinare l'angolo e la direzione della linea.
Colori e interruzione del colore
Nella versione più semplice di un gradiente CSS, avrai bisogno di almeno due colori per la transizione del gradiente. Le interruzioni di colore invece, indicano tramite codice in quali punti ogni colore deve fermarsi lungo il gradiente del testo. Questi colori possono essere impostati come qualsiasi tipo: con il nome (es. red, black, white), HEX, RGB o HSL. Per questo motivo, ci sono molte opzioni diverse quando si tratta di come mostrare il gradiente.
Sintassi
La parte più importante del tuo testo gradiente CSS è il CSS stesso.
Di seguito trovi la versione base del CSS:
Di seguito una versione più completa, con l'angolazione della sfumatura (83deg), e l'indicazione di interruzione di colore (40% e 100%):
Rapido e semplice!
Spero che tu abbia trovato molto utile questo articolo.
Se sei interessato ad una consulenza per lo sviluppo di un sito internet puoi contattare la web agency di Corato Interno15
