27 Elegantni primeri gradientov v ozadju CSS

27 Elegantni primeri gradientov v ozadju CSS

Za oblikovalca ali razvijalca je zelo pomembno ostati na tekočem z vrhunskimi trendi in standardi spletnega oblikovanja. Trenutno se gradienti ozadja pogosto uporabljajo na sodobnih spletnih mestih.





V tem članku vas bomo vodili skozi različne primere gradientov ozadja s pomočjo CSS.



Gradienti v ozadju z uporabo CSS

Nagib CSS prikazuje gladek prehod z uporabo dveh ali več določenih barv. Nagib CSS zagotavlja boljši nadzor in zmogljivost pri uporabi datoteke dejanske slike (gradienta). The slika ozadja Lastnost CSS se uporablja za razglasitev gradientov kot ozadja.





kako prenesti knjigo kindle v pdf

Obstajajo tri vrste nagibov: linearno (ustvarjeno z linearni gradient () funkcijo), radialni (ustvarjeno z radialni gradient () funkcijo) in stožca (ustvarjeno z stožčasti gradient () funkcijo). Prav tako lahko ustvarite ponavljajoče se gradiente z ponavljajoč se linearni gradient () , ponavljajoči se radialni gradient () , in ponavljajoč se stožčasti gradient () funkcije.

MDN Dokumenti te funkcije opredeljujejo kot:



linearni gradient () : Funkcija CSS linearnega gradienta () ustvari sliko, sestavljeno iz postopnega prehoda med dvema ali več barvami vzdolž ravne črte. Njegov rezultat je predmet podatkovni tip, ki je posebna vrsta .

radialni gradient () : radialni gradient () Funkcija CSS ustvari podobo, sestavljeno iz postopnega prehoda med dvema ali več barvami, ki sevajo od izvora. Njegova oblika je lahko krog ali elipsa. Rezultat funkcije je predmet datoteke podatkovni tip, ki je posebna vrsta .



stožčasti gradient () : stožčasti gradient () Funkcija CSS ustvari sliko, ki je sestavljena iz gradienta z barvnimi prehodi, ki se vrtijo okoli središčne točke (namesto da bi sevali od središča). Primeri stožčastih gradientov vključujejo tortne karte in barvna kolesa. Rezultat stožčasti gradient () funkcija je predmet podatkovni tip, ki je posebna vrsta .

ponavljajoč se linearni gradient () : ponavljajoč se linearni gradient () Funkcija CSS ustvari sliko, ki jo sestavljajo ponavljajoči se linearni nakloni. Podobno je gradient/linear-gradient () in ima enake argumente, vendar ponavlja barvne ustavljanja neskončno v vseh smereh, tako da pokrije celotno posodo. Rezultat funkcije je predmet datoteke podatkovni tip, ki je posebna vrsta .



ponavljajoči se radialni gradient () : ponavljajoči se radialni gradient () Funkcija CSS ustvari sliko, sestavljeno iz ponavljajočih se gradientov, ki sevajo od izvora. Podobno je gradient/radial-gradient () in ima enake argumente, vendar ponavlja barvne ustavljanja neskončno v vseh smereh, tako da pokriva celotno vsebino, podobno gradientu/ponavljajoče-linearnemu gradientu (). Rezultat funkcije je predmet datoteke podatkovni tip, ki je posebna vrsta .

ponavljajoč se stožčasti gradient () : ponavljajoč se stožčasti gradient () Funkcija CSS ustvari sliko, ki je sestavljena iz ponavljajočega se gradienta (namesto enega samega gradienta) z barvnimi prehodi, ki se vrtijo okoli središčne točke (namesto da bi sevali od središča).

Tu je uradna sintaksa vsake vrste gradienta.

Uradna skladnja linearnih gradientov

linear-gradient(
[ | to ]? ,

)
= [to left | to right] || [to top | to bottom]

Uradna skladnja radialnih gradientov

radial-gradient(
[ || ]? [ at ]? ,

);

Uradna skladnja stožčastih gradientov

conic-gradient(
[ from ]? [ at ]?,

)

Tukaj je nekaj čudovitih primerov gradientov ozadja, ki lahko izboljšajo uporabniški vmesnik vašega spletnega mesta na naslednjo stopnjo.

1. Prašna trava

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

kako preklopiti gmail na stari videz
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

2. Pesek do modre barve

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(to right, #DECBA4, #3E5151);

3. Kye Meh

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(to right, #8360c3, #2ebf91);

4. Amen

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(to right, #8e2de2, #4a00e0);

5. Sproščujoče rdeče

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(to right, #fffbd5, #b20a2c);

6. Sublimna svetloba

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(to right, #fc5c7d, #6a82fb);

7. Megatron

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);

8. Modra malina

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(to right, #00b4db, #0083b0);

9. Premium Dark

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(to right, #434343 0%, black 100%);

10. Kristalna

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);

11. Lawrencium

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);

Povezano: Kako spremeniti barvo ozadja s CSS

12. Ohhappiness

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(to right, #00b09b, #96c93d);

13. Sev

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(to right, #870000, #190a05);

14. Rumeni mango

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);

Povezano: Kaj so kaskadne slogovne liste in za kaj se uporablja CSS?

15. Sočna trava

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

kako obrniti video v oknih
background-image: radial-gradient( circle 759px at -6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3% );

16. Rožnate ribe

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));

Sorodno: Goljufirna lista lastnosti CSS3

17. Morski gospodar

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );

18. Češnjev cvet

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);

19. Svež zrak

Za ustvarjanje zgornjega gradienta uporabite naslednji CSS:

background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% ); Deliti Deliti Cvrkutati E-naslov Kako uporabljati CSS box-shadow: 13 trikov in primerov

Mehke škatle izgledajo dolgočasno. Popestrite jih z učinkom sence škatle CSS!

Preberite Naprej Sorodne teme O avtorju Yuvraj Chandra(Objavljenih 60 člankov)

Yuvraj je dodiplomski študent računalništva na Univerzi v Delhiju v Indiji. Navdušen je nad spletnim razvojem Full Stack. Ko ne piše, raziskuje globino različnih tehnologij.

Več od Yuvraja Chandre

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite