Cerchi ispirazione per il tuo sito web?
Su Oxygen è possibile realizzare un'infinità di cose, ma ci sarà sempre qualcosa di "non preventivato". In ogni caso non è un problema, perché sempre su Oxygen abbiamo modo di personalizzare al 100% il codice CSS!
Qualche giorno fa mi è stato chiesto come ho fatto a realizzare alcuni testi sfumati sul mio sito web, quindi ho deciso di spiegarlo in un articolo 🙂
La procedura è molto semplice, dobbiamo applicare a un testo o a un titolo un gradiente tramite codice CSS, vediamo subito come!
Codice CSS per testi sfumati
Dopo aver creato il nostro testo nella pagina, selezioniamolo e clicchiamo sulla tab "Advanced", poi su "Custom CSS". Qui dentro dovrai incollare il seguente codice:
background: -webkit-linear-gradient(140deg, #ff005d, #c700ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Puoi modificare a tuo piacimento l'angolo del gradiente e i colori utilizzati per la sfumatura. Nel mio caso ho usato un angolo di 140deg e i colori #ff005d / #c700ff.
Creare una classe per il gradiente
Voglio darti un consiglio! Se userai questa tecnica probabilmente la andrai ad applicare su più testi del sito web. Per comodità, ti consiglio di creare una classe e rinominala ad esempio "gradiente-testo".
Così facendo eviterai di digitare ogni volta queste stringhe di codice, ti basterà assegnare la classe agli elementi desiderati!
Spero che questo tutorial ti sia tornato utile 🙂 ci sentiamo presto!
Mi chiamo Vincenzo Iracà e insieme a Stefano Lavazza abbiamo fondato la nostra Agenzia Web. In Klorofilla realizziamo siti web professionali e landing page mirate a ottenere elevati tassi di conversione.
Da diversi anni sviluppiamo i progetti dei nostri clienti su WordPress tramite Oxygen Builder. Abbiamo deciso di contribuire in maniera attiva alla diffusione di questo page builder, che attualmente possiamo considerare il migliore sul mercato, tramite questo blog e la nostra community su Facebook.
