Puoi fare cazzate fantastiche con i gradienti di sfondo di Oxygen Builder

Pubblicato: 2022-05-05

Uno dei miei aspetti preferiti dei CSS è il modo in cui puoi sovrapporre immagini di sfondo CSS (già incredibilmente flessibili con posizionamento e piastrellatura) e gradienti per creare effetti davvero fantastici. Li implementiamo in tonnellate di progetti e in questo post, volevo coprire alcune delle cose che puoi usare questa funzione di Oxygen Builder per creare.

Ti piace questo contenuto? Unisciti al nostro gruppo Facebook (IsoGroup), iscriviti alla newsletter e dai un'occhiata al nostro corso Oxygen Builder (disponibile a breve).

Dividi (e reattivo) Sfondi a colori e fotografici

Il nostro caso d'uso per questo è la creazione di sfondi divisi a larghezza intera con il 50% di un colore solido e il 50% di un'immagine. Potresti farlo con 3 div e flexbox, ma il problema è che non sarai in grado di mantenere facilmente (e responsabilmente) la larghezza massima della pagina a causa del modo in cui Oxygen gestisce le sezioni.

isotropico-2022-04-12-at-13-43-21 — Sezione ossigeno HTML

Sebbene tu possa assolutamente posizionare un div e assegnare la .ct-section-inner-wrap in un set di elementi div come sezione, l'uso dei gradienti CSS è in genere molto più semplice.

Innanzitutto, aggiungi un'immagine di sfondo.

Quindi, aggiungi una sfumatura in alto, in questo modo:

isotropico-2022-04-12-at-13-48-14 — Colore trasparente 50%, colore solido 50%, stesso colore solido 50%.

Poiché utilizziamo le percentuali, questo è reattivo. Ciò significa che possiamo sovrapporre una griglia CSS in alto e inserire alcuni contenuti in essa.

Se utilizziamo un riempimento standardizzato, possiamo persino diventare fantasiosi e utilizzare calc(50% - yourpadding) per posizionare lo sfondo per "incorporare" il riempimento.

Possiamo anche sfruttare i punti di interruzione reattivi per modificare il posizionamento, i colori e la trasparenza di questo effetto a seconda delle dimensioni dello schermo (nota: sembra rotto in Oxygen 4.0 Beta 2).

Sfondi a colori divisi

L'effetto più semplice è rimuovere l'immagine di sfondo e dividere semplicemente una sfumatura tra due colori.

Impostando il posizionamento di entrambi al 50%, non ci sarà dissolvenza. Invece, un duro passaggio tra i due colori.

Possiamo anche fare le strisce. Tieni presente che questo è completamente reattivo a 100vw se usi le percentuali.

Questo è davvero flessibile. Possiamo anche implementare transizioni dure e dissolvenze nella stessa sezione:

E infine, se aggiungiamo un'immagine di sfondo, possiamo sovrapporre questi effetti sopra l'immagine.

isotropico-2022-04-12-at-13-45-42 — Basta aggiungere un'immagine di sfondo standard.

Sfumature multi colore

Possiamo rimuovere l'arresto forzato e unire i colori insieme in questo modo:

Puoi aggiungerne quanti ne desideri. Quando unisco i colori, in genere lascio vuoto il posizionamento.

Animalo

Un'animazione davvero semplice può essere quella di spostare semplicemente lo sfondo. Per farlo, aggiungi il seguente CSS alla sezione con il tuo gradiente:

animazione: Animazione 5s facilità infinita; dimensione dello sfondo: 200% 200%;

Quindi, crea i fotogrammi chiave dell'animazione e aggiungili al tuo foglio di stile universale:

@-webkit-keyframes Animazione { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} } @-moz-keyframes Animazione { 0%{posizione-sfondo:10% 0%} 50%{posizione-sfondo:91% 100%} 100%{posizione-sfondo:10% 0%} } @fotogrammi chiave Animazione { 0%{posizione-sfondo:10 % 0%} 50%{posizione-sfondo:91% 100%} 100%{posizione-sfondo:10% 0%} }

isotropico-2022-04-12-at-13-32-51 — Animazione universale

Poiché abbiamo raddoppiato la dimensione del gradiente di sfondo, riporto i colori al centro in questo modo.

Bordo sfumato in Generatore di ossigeno

isotropico-2022-04-12-at-14-02-14 — Codice di questa sezione tratto da questo CodePen.

Puoi anche aggiungere un bordo sfumato a un elemento in Oxygen Builder seguendo questo metodo. Innanzitutto, aggiungi il tuo div.

Aggiungi una classe ad esso di .gradient-border . Incolla questo codice nel CSS personalizzato:

--borderWidth: 3px; sfondo: #1D1F20; posizione: relativa; raggio di confine: 3px

Ora vai allo stato :after di questa classe.

Incolla il seguente CSS personalizzato:

posizione: assoluta; in alto: calc(-1 * var(--borderWidth)); a sinistra: calc(-1 * var(--borderWidth)); altezza: calc(100% + var(--borderWidth) * 2); larghezza: calc(100% + var(--borderWidth) * 2); border-radius: calc(2 * var(--borderWidth)); indice z: -1;

Imposta il gradiente di sfondo come al solito, o semplicemente incollalo nel CSS personalizzato di .gradient-border:after:

background : linear-gradient (60 deg , #f79533 , #f37055 , #ef4e7b , #a166ab , #5073b8 , #1098ad , #07b39b , #6fba82 );
 Linguaggio del codice: CSS ( css )

Ora, ogni volta che applichi la classe di .gradient-border a un div o elemento, verrà applicato l'effetto.

Animalo

Puoi animarlo aggiungendo:

-webkit-animazione: gradiente animato 3s facilità alternativo infinito; animazione: animato gradiente 3s facilità alternato infinito; dimensione dello sfondo: 300% 300%;

a .gradient-border:after , e

@-webkit-keyframes gradiente animato { 0% { posizione-sfondo: 0% 50%; } 50% { posizione di sfondo: 100% 50%; } 100% { posizione di sfondo: 0% 50%; } } @keyframes animatogradient { 0% { posizione di sfondo: 0% 50%; } 50% { posizione di sfondo: 100% 50%; } 100% { posizione di sfondo: 0% 50%; } }

al tuo CSS universale.

Questo è tutto CSS

Puoi usare uno strumento come https://cssgradient.io/ per farlo con puro CSS. Questo strumento genera il gradiente lineare CSS necessario per i gradienti. Tutto quello che fai è copiare/incollare nel campo CSS personalizzato di un elemento specifico in Oxygen.

Potrebbe piacerti anche leggere:

Iscriviti e condividi

Se ti è piaciuto questo contenuto, iscriviti alla nostra carrellata mensile di notizie su WordPress, ispirazione per siti Web, offerte esclusive e articoli interessanti.

Annulla l'iscrizione in qualsiasi momento. Non inviamo spam e non venderemo o condivideremo mai la tua email.