Home-theater-designers
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 trec ușor 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 mai puțin popular și cunoscut sub numele de gradient conic.
Sintaxa gradienților CSS
Background-image: gradient-type (direction, color1, color2);
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
Background-image: linear-gradient(#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
Background-image: linear-gradient(to bottom, #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.
ce trebuie să faceți dacă contul dvs. de Facebook a fost piratat
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
Background-image: linear-gradient(to bottom right, #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
Background-image: linear-gradient(to right, #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 cu 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
Background-image: radial-gradient( circle, #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.
cum se schimbă o pictogramă pe Windows 10
Schimbarea Exemplului poziției de pornire a gradientului radial
Background-image: radial-gradient(circle at top right, #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 utilizată ș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 că, în cazul în care gradientul liniar se adaugă gradientului în linie dreaptă, gradientul radial adaugă noi culori pe marginea exterioară.
Exemplu de gradient radial multicolor
Background-image: radial-gradient(circle, #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 ar putea părea multă muncă, dar odată ce ați înțeles elementele de bază ale creării unui gradient de fundal CSS, următorul pas evident este să învățați cum să vă faceți gradienții CSS mai unici.
cum să adăugați pe cineva la WhatsApp
Î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
Background-image: linear-gradient(to right, #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 30% al primei culori din gradient, în loc de poziția obișnuită și, deoarece a doua culoare este, de asemenea, culoarea finală în gradient, se extinde în mod natural până 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
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Codul de mai sus va produce următoarea ieșire.
Ieșirea de mai sus arată în mod clar prima culoare din gradient oprindu-se la punctul de 30% a 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 deosebit.
Acțiune Acțiune Tweet E-mail 27 Exemple elegante de gradient de fundal CSSCulorile solide sunt așa anul trecut. Gradienții sunt! Dar cum le creați în CSS?
Citiți în continuare Subiecte asemănătoare- Programare
- Dezvoltare web
- Web design
- CSS
Kadeisha Kean este un dezvoltator de software complet și scriitor tehnic / tehnologic. Are capacitatea distinctă de a simplifica unele dintre cele mai complexe concepte tehnologice; producând materiale care pot fi ușor de înțeles de către orice novice în tehnologie. Este pasionată de scriere, dezvoltarea de software-uri interesante și călătoria prin lume (prin documentare).
Mai multe de la Kadeisha KeanAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona