Elemente de site web stil cu un gradient de fundal CSS

Dacă ați fost pe internet mai mult de câteva minute, este posibil să fi întâlnit un gradient CSS. Proprietatea de fundal CSS poate fi utilizată pentru a crea o gamă de stiluri diferite, iar unul dintre cele mai interesante tipuri este ceea ce poate face cu valoarea gradientului.

Știind cum să proiectezi și să creezi diferite gradiente CSS este un avantaj pentru orice proiectant sau dezvoltator de software. Din acest articol, veți afla tot ce trebuie să știți pentru a începe încorporarea gradienților CSS în proiectele dvs.

Ce este un gradient CSS?

Un gradient CSS este, în esență, combinația a două sau mai multe culori care trece fără probleme de la una la alta. Starea de tranziție a unui gradient CSS este dependentă de tipul de gradient utilizat. Există două tipuri principale de gradiente utilizate în mod obișnuit în proiectarea software-ului: liniar și radial.

Cu toate acestea, există un al treilea tip de gradient care este mai puțin popular și cunoscut sub numele de gradient conic.

Sintaxa gradienților CSS

Imagine de fundal: tip gradient (direcție, culoare1, culoare2);

Gradientul CSS ar trebui să fie atribuit proprietății CSS a imaginii de fundal. Tipul de gradient poate fi unul dintre mai multe; gradient liniar, gradient radial sau gradient conic. Tipul de gradient este urmat de deschiderea și închiderea parantezelor care conține direcția de tranziție a gradientului, precum și culorile care trebuie incluse în gradient.

Legate de: Cum să setați o imagine de fundal în CSS

Exemplul de mai sus prezintă două culori, dar un gradient poate conține mai multe culori diferite. Singura cerință este ca fiecare culoare din listă să fie separată printr-o virgulă.

Ce este un gradient liniar?

Gradientul liniar este cel mai popular gradient CSS. Se creează un gradient de tranziție orizontală, verticală sau diagonală folosind două sau mai multe culori.

Exemplu de gradient liniar CSS

Imagine de fundal: gradient liniar (# 00A4CCFF, # F95700FF);

Codul de mai sus va produce următorul gradient CSS:

Există o componentă majoră a sintaxei gradientului omisă din exemplul de mai sus. Această componentă este direcția de tranziție a gradientului și a fost omisă, deoarece alinierea implicită a gradientului liniar este verticală (de sus în jos); acesta este rezultatul dorit în acest exemplu.

Codul de mai sus produce același rezultat ca următoarea linie de cod. Singura diferență dintre cele două este secțiunea de direcție a codului.

Folosind Exemplul de gradient liniar inferior

Imagine de fundal: gradient liniar (în jos, # 00A4CCFF, # F95700FF);

După cum puteți vedea din ieșire, codul de mai sus creează un gradient care începe cu albastru în partea de sus, apoi trece încet în portocaliu în partea de jos. Dacă doriți să inversați ordinea culorilor, puteți înlocui pur și simplu până la fund cu sus și acest lucru va inversa direcția gradientului, producând următoarea ieșire:

Similar cu alinierea verticală, alinierea orizontală a unui gradient poate fi realizată cu ajutorul a două seturi de cuvinte cheie de direcție: spre stanga și la dreapta, care va produce următoarele ieșiri, respectiv.

Gradient liniar diagonal

Este posibil să se realizeze o tranziție diagonală în gradient liniar în orice direcție a unui gradient liniar. Există doar patru liste specifice de cuvinte cheie pe care trebuie să le cunoașteți pentru a face acest lucru posibil.

• În dreapta jos
• În stânga jos
• În dreapta sus
• În stânga sus

Utilizarea Exemplului de gradient liniar diagonal

Imagine de fundal: gradient liniar (în dreapta jos, # 00A4CCFF, # F95700FF);

Exemplul de mai sus produce următoarea ieșire:

După cum puteți vedea din ieșirea de mai sus, gradientul liniar își face tranziția într-o direcție diagonală deplasându-se din partea stângă sus la secțiunea dreapta jos a gradientului.

Gradient liniar multicolor

Un gradient liniar poate avea două sau mai multe culori, dar cum arată mai multe culori într-un gradient? Un aranjament de culoare cu gradient liniar multicolor depinde de direcția sa. Cele care fac tranziția într-o direcție orizontală vor avea fiecare nouă culoare care apare în stânga sau în dreapta gradientului liniar, în funcție de direcția exactă a gradientului liniar.

Exemplu de gradient liniar multicolor

Imagine de fundal: gradient liniar (spre dreapta, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Linia de cod de mai sus va produce următoarea ieșire:

După cum puteți vedea, fiecare culoare nouă este adăugată în dreapta gradientului, creând ceea ce în cele din urmă se transformă într-un curcubeu. Aceeași ieșire poate fi obținută în direcție verticală; cu toate acestea, dispunerea specifică a culorilor pe gradientul liniar va depinde de cuvântul cheie de direcție verticală (în sus sau în jos).

Ce este un gradient radial?

Gradientul radial creează un gradient în spirală de două sunt mai multe culori care încep din centru în mod implicit. În cazul în care gradientul liniar produce un gradient drept care curge vertical sau orizontal, gradientul radial produce un gradient circular care curge de la centru la marginile exterioare.

Folosind Exemplul de gradient radial

Imagine de fundal: gradient radial (cerc, # 00A4CCFF, # F95700FF);

Linia de cod de mai sus va produce următoarea ieșire:

Schimbarea centrului de gradient radial

În mod implicit, un gradient radial începe în centrul gradientului; cu toate acestea, este posibil să schimbați punctul de origine prin introducerea câtorva cuvinte cheie.

Modificarea exemplului poziției de pornire a gradientului radial

Imagine de fundal: gradient radial (cerc în dreapta sus, # 00A4CCFF, # F95700FF);

Linia de cod de mai sus va produce următoarea ieșire:

După cum puteți vedea din ieșirea de mai sus, gradientul începe acum din colțul din dreapta sus în loc de centru. Această modificare este posibilă datorită includerii cuvântului cheie sus în dreapta în codul de mai sus. Următoarea listă de cuvinte cheie poate fi folosită și pentru a schimba punctul de origine al gradientului radial:

• Stânga sus
• Dreapta-jos
• Stânga jos

Gradiente radiale multicolore

La fel ca gradientul liniar, gradientul radial poate folosi și două sunt mai multe culori, diferența majoră este aceea unde gradientul liniar se adaugă gradientului în linie dreaptă, gradientul radial adaugă noi culori pe exterior margine.

Exemplu de gradient radial multicolor

Imagine de fundal: gradient radial (cerc, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Linia de cod de mai sus va produce următoarea ieșire:

Personalizarea gradientelor

Până acum ați văzut cum să schimbați direcția și punctul central al unui gradient, dar nu ați văzut cum să personalizați un gradient. Personalizarea unui gradient s-ar putea să pară multă muncă, dar odată ce ați înțeles elementele de bază ale creației un gradient de fundal CSS, următorul pas evident este să înveți cum să-ți faci gradientele CSS mai mult unic.

În mod implicit, culorile dintr-un gradient ocupă un spațiu distribuit uniform, fiecare culoare trecând ușor în cea de după ea. Deci, dacă două culori sunt combinate pentru a forma un gradient, fiecare culoare va ocupa jumătate din spațiul disponibil în timp ce trece de la una la alta. Dacă sunt combinate trei culori, fiecare culoare va ocupa o treime din spațiul disponibil.

Cu un gradient personalizat, veți putea defini cantitatea de spațiu pe care o culoare o va ocupa într-un gradient prin atribuirea explicită a poziția de oprire a culorii.

Personalizarea unui gradient liniar Exemplul 1

Imagine de fundal: gradient liniar (la dreapta, # 00A4CCFF, # F95700FF 30%);

Linia de cod de mai sus va produce următoarea ieșire:

Ieșirea de mai sus arată a doua culoare în gradientul liniar oprindu-se la punctul de 30% al primei culori din gradient, în loc de poziția obișnuită și pentru că a doua culoare este, de asemenea, culoarea finală în gradient, se extinde în mod natural la Sfârșit.

Dacă ați plasa 30% în codul de mai sus la sfârșitul primei culori, lucrurile ar trebui să devină mai clare.

Personalizarea unui gradient liniar Exemplul 2

Imagine de fundal: gradient liniar (la dreapta, # 00A4CCFF 30%, # F95700FF);

Codul de mai sus va produce următoarea ieșire.

Ieșirea de mai sus arată clar prima culoare a gradientului oprindu-se la punctul 30% al celei de-a doua culori din gradient. Acest exemplu împreună cu cel de mai sus ar trebui să vă ajute să înțelegeți personalizarea color-stop.

Personalizarea unui gradient radial se face în același mod ca un gradient liniar. Singurul lucru pe care trebuie să îl faceți pentru a obține aceleași rezultate de mai sus într-un gradient radial este să schimbați tipul și direcția gradientului.

Crearea gradienților CSS nu a fost niciodată mai ușoară

Acest articol tutorial vă oferă instrumentele pentru identificarea și crearea gradienților liniari și radiali. Dacă ați ajuns la acest punct, ați învățat cum să schimbați direcția și centrul unui gradient. În plus, aveți acum abilitățile de a personaliza gradientele CSS și de a crea gradiente de fundal unice.

Cu toate acestea, dacă nu doriți să intrați direct în crearea de gradiente noi și unice, puteți începe prin a crea unele preexistente cu aspect extraordinar.

27 Exemple elegante de gradient de fundal CSS

Culorile solide sunt așa anul trecut. Gradienții sunt! Dar cum le creați în CSS?

Citiți în continuare

Despre autor

Extindeți pentru a citi povestea completă