27 Stiilse CSS -i tausta gradiendi näiteid

27 Stiilse CSS -i tausta gradiendi näiteid

Disaineri või arendaja jaoks on väga oluline olla kursis veebidisaini parimate suundumuste ja standarditega. Praegu kasutatakse taustakaldeid laialdaselt kaasaegsetel veebisaitidel.





Selles artiklis tutvustame CSS -i abil erinevaid taustakaldeid.



Tausta gradiendid CSS -i abil

CSS gradient kuvab sujuva ülemineku, kasutades kahte või enamat määratud värvi. CSS gradient tagab parema kontrolli ja toimivuse tegeliku (gradiendi) faili kasutamisel. The taustapilt CSS -i atribuuti kasutatakse taustaks gradientide deklareerimiseks.



kõvaketas ei käivita Windows 10

Gradiente on kolme tüüpi: lineaarne (loodud koos lineaarne gradient () funktsioon), radiaalne (loodud koos radiaalne gradient () funktsioon) ja kooniline (loodud koos kooniline gradient () funktsioon). Samuti saate klahviga luua korduvaid gradiente korduv-lineaarne gradient () , korduv-radiaalne gradient () ja korduv-kooniline-gradient () funktsioone.

MDN Docs määratleb need funktsioonid järgmiselt.



lineaarne gradient () : Lineaar-gradiendi () CSS-funktsioon loob pildi, mis koosneb järk-järgulisest üleminekust kahe või enama värvi vahel sirgjooneliselt. Selle tulemus on objekti andmetüüp, mis on eriliik .

radiaalne gradient () : radiaalne gradient () CSS -funktsioon loob pildi, mis koosneb järk -järgulisest üleminekust kahe või enama päritolu kiirgava värvi vahel. Selle kuju võib olla ring või ellips. Funktsiooni tulemus on objekti andmetüüp, mis on eriliik .



kooniline gradient () : kooniline gradient () CSS -funktsioon loob pildi, mis koosneb gradiendist, mille värvide üleminekud on pööratud ümber keskpunkti (mitte kiirgama keskpunktist). Kooniliste gradientide näideteks on sektordiagrammid ja värvirattad. Tulemus kooniline gradient () funktsioon on objekti andmetüüp, mis on eriliik .

korduv-lineaarne gradient () : korduv-lineaarne gradient () CSS -funktsioon loob pildi, mis koosneb korduvatest lineaarsetest gradientidest. See sarnaneb gradiendiga/lineaar-gradiendiga () ja kasutab samu argumente, kuid kordab värvipeatusi lõpmatult igas suunas, et katta kogu konteiner. Funktsiooni tulemus on objekti andmetüüp, mis on eriliik .



korduv-radiaalne gradient () : korduv-radiaalne gradient () CSS -funktsioon loob pildi, mis koosneb korduvatest gradientidest, mis kiirgavad päritolust. See sarnaneb gradiendiga/radiaal-gradiendiga () ja kasutab samu argumente, kuid kordab värvipeatusi lõpmatult igas suunas, et katta kogu konteiner, sarnaselt gradiendile/korduvale lineaarsele gradiendile (). Funktsiooni tulemus on objekti andmetüüp, mis on eriliik .

korduv-kooniline-gradient () : korduv-kooniline-gradient () CSS -funktsioon loob pildi, mis koosneb korduvast gradiendist (mitte ühest gradiendist), mille värvide üleminekud on pööratud ümber keskpunkti (mitte kiirgama keskpunktist).

Siin on iga tüüpi gradiendi ametlik süntaks.

Lineaarsete gradientide ametlik süntaks

linear-gradient(
[ | to ]? ,

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

Radiaalsete gradientide ametlik süntaks

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

);

Kooniliste gradientide ametlik süntaks

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

)

Siin on mõned suurepärased tausta gradiendi näited, mis võivad teie veebisaidi kasutajaliidest järgmisele tasemele tõsta.

1. Tolmune rohi

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

amazoni tellimus ei saabunud, kuid ütleb, et tarnitud
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

2. Liiv siniseks

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

3. Kye Meh

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

4. Aamen

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

5. Lõõgastav punane

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

6. Ülev valgus

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

7. Megatron

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

8. Sinine vaarikas

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

9. Premium Dark

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

10. Kristalliline

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

11. Lawrencium

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

Seotud: Kuidas CSS -iga taustavärvi muuta

12. Õnnelik

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

13. Tüvi

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

14. Kollane mango

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

Seotud: Mis on kaskaadlaadilehed ja milleks kasutatakse CSS -i?

15. Mahlane rohi

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

kuidas näha, milline emaplaat teil on
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. Roosa kala

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

Seotud: CSS3 oluliste omaduste petuleht

17. Mere isand

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

18. Kirsiõis

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

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

19. Värske õhk

Ülaltoodud gradiendi loomiseks kasutage järgmist CSS -i:

background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% ); Jaga Jaga Piiksuma E -post CSS box-shadow kasutamine: 13 nippi ja näidet

Mahedad karbid tunduvad igavad. Kuuse neid CSS-i kasti-varju efektiga!

Loe edasi Seotud teemad Autori kohta Yuvraj Chandra(60 artiklit avaldatud)

Yuvraj on arvutiteaduse bakalaureuseõppe üliõpilane Indias Delhi ülikoolis. Ta on kirglik Full Stacki veebiarenduse vastu. Kui ta ei kirjuta, uurib ta erinevate tehnoloogiate sügavust.

Veel Yuvraj Chandrast

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin