Home-theater-designers
Kung nasa internet ka nang higit sa ilang minuto, malamang na nakatagpo ka ng gradient ng CSS. Maaaring magamit ang pag-aari ng background sa CSS upang lumikha ng isang hanay ng iba't ibang mga estilo, at ang isa sa mga pinaka nakakaintriga na uri ay kung ano ang magagawa nito sa gradient na halaga.
Ang pag-alam kung paano magdisenyo at lumikha ng iba't ibang mga gradient ng CSS ay isang pag-aari para sa anumang taga-disenyo ng software o developer. Mula sa artikulong ito, matututunan mo ang lahat ng kailangan mong malaman upang simulang isama ang mga gradient ng CSS sa iyong mga proyekto.
Ano ang isang CSS Gradient?
Ang isang gradient ng CSS ay mahalagang kombinasyon ng dalawa o higit pang mga kulay na maayos na naglilipat mula isa hanggang sa susunod. Ang transitional state ng isang CSS gradient ay nakasalalay sa uri ng gradient na ginamit. Mayroong dalawang pangunahing uri ng gradients na karaniwang ginagamit sa disenyo ng software: linear at radial.
Gayunpaman, mayroong isang pangatlong uri ng gradient na hindi gaanong popular at kilala bilang conic gradient.
CSS Gradients Syntax
Background-image: gradient-type (direction, color1, color2);
Ang gradient ng CSS ay dapat italaga sa pag-aari ng background-imahe na CSS. Ang gradient type ay maaaring maging isa sa maraming; linear-gradient, radial-gradient, o conic-gradient. Ang uri ng gradient ay sinusundan ng pagbubukas at pagsasara ng mga braket na naglalaman ng palipat na direksyon ng gradient, pati na rin ang mga kulay na isasama sa gradient.
Kaugnay: Paano Magtakda ng isang Imahe sa Background sa CSS
Ang halimbawa sa itaas ay nagpapakita ng dalawang kulay, ngunit ang isang gradient ay maaaring maglaman ng maraming magkakaibang mga kulay. Ang tanging kinakailangan ay ang bawat kulay sa listahan ay pinaghihiwalay ng isang kuwit.
Ano ang isang Linear Gradient?
Ang linear gradient ay ang pinakatanyag na gradient ng CSS. Lumilikha ito ng isang pahalang, patayo, o dayagonal na paglipat ng gradient gamit ang dalawa o higit pang mga kulay.
Halimbawa ng CSS Linear Gradient
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
Ang code sa itaas ay bubuo ng sumusunod na gradient ng CSS:
Mayroong isang pangunahing bahagi ng gradient syntax na tinanggal mula sa halimbawa sa itaas. Ang sangkap na ito ay ang palipat na direksyon ng gradient, at ito ay tinanggal dahil ang default na pagkakahanay ng linear gradient ay patayo (itaas-sa-ilalim); iyon ang nais na output sa halimbawang ito.
Ang code sa itaas ay gumagawa ng parehong resulta sa sumusunod na linya ng code. Ang pagkakaiba lamang sa pagitan ng dalawa ay ang seksyon ng direksyon ng code.
Gamit ang Halimbawang Linear Gradient Halimbawa
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Tulad ng nakikita mo mula sa output ang code sa itaas ay lumilikha ng isang gradient na nagsisimula sa asul sa itaas pagkatapos ay dahan-dahang lumipat sa orange sa ilalim. Kung nais mong baligtarin ang pagkakasunud-sunod ng mga kulay maaari mo lamang palitan ang sa ilalim kasama si sa itaas at babaligtarin nito ang direksyon ng gradient, na gumagawa ng sumusunod na output:
Katulad ng patayong pagkakahanay, ang pahalang na pagkakahanay ng isang gradient ay maaaring makamit sa paggamit ng dalawang hanay ng mga keyword sa direksyon: sa kaliwa at sa kanan , na kung saan ay gumawa ng mga sumusunod na output, ayon sa pagkakabanggit.
kung paano maglipat ng mga file mula sa mac patungong android
Diagonal Linear Gradient
Posibleng makamit ang isang dayagonal linear gradient transition sa anumang direksyon ng isang linear gradient. Mayroong apat na tukoy na listahan ng mga keyword na kailangan mong malaman upang magawang posible ito.
- Sa kanang ibaba
- Sa kaliwang ibabang bahagi
- Sa kanang itaas
- Sa kaliwang itaas
Gamit ang Halimbawa ng Diagonal Linear Gradient
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
Ang halimbawa sa itaas ay gumagawa ng sumusunod na output:
Tulad ng nakikita mo mula sa output sa itaas, ginagawa ng linear gradient ang paglipat nito sa isang direksyon na dayagonal na gumagalaw mula sa kaliwang tuktok sa kaliwang bahagi sa kanang gradient.
Maraming kulay na Linear Gradient
Ang isang linear gradient ay maaaring magkaroon ng dalawa o higit pang mga kulay, ngunit ano ang hitsura ng mas maraming mga kulay sa isang gradient? Ang isang maraming kulay na linear na gradient na pag-aayos ng kulay ay nakasalalay sa direksyon nito. Ang mga paglipat sa isang pahalang na direksyon ay magkakaroon ng bawat bagong kulay na lilitaw sa kaliwa o kanan ng linear gradient, depende sa eksaktong direksyon ng linear gradient.
Multicolored Linear Gradient Halimbawa
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Ang linya ng code sa itaas ay makakagawa ng sumusunod na output:
Tulad ng nakikita mo ang bawat bagong kulay ay idinagdag sa kanan ng gradient, lumilikha ng kung ano sa paglaon ang mga morph sa isang bahaghari. Ang parehong output ay maaaring makamit sa isang patayong direksyon; gayunpaman, ang tukoy na pag-aayos ng kulay sa linear gradient ay depende sa patayong direksyon ng keyword (sa itaas o sa ibaba).
Ano ang Radial Gradient?
Ang Radial gradient ay lumilikha ng isang spiraling gradient ng dalawa ay mas maraming mga kulay na nagsisimula mula sa gitna bilang default. Kung saan ang linear gradient ay gumagawa ng isang tuwid na gradient na dumadaloy nang patayo o pahalang, ang radial gradient ay gumagawa ng isang pabilog na gradient na dumadaloy mula sa gitna hanggang sa panlabas na mga gilid.
Gamit ang Halimbawa ng Radial Gradient
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
Ang linya ng code sa itaas ay makakagawa ng sumusunod na output:
Pagbabago ng Radial Gradient Center
Bilang default ang isang radial gradient ay nagsisimula sa gitna ng gradient; gayunpaman, posible na baguhin ang puntong pinagmulan sa pagpapakilala ng ilang mga keyword.
kung paano patayin ang apple tv
Pagbabago ng Halimbawa ng Posisyon ng Radial Gradient Start Position
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
Ang linya ng code sa itaas ay makakagawa ng sumusunod na output:
Tulad ng nakikita mo mula sa output sa itaas ng gradient ay nagsisimula ngayon mula sa kanang tuktok na sulok sa halip na sa gitna. Posible ang pagbabagong ito dahil sa pagsasama ng keyword itaas sa kanan sa code sa itaas. Ang sumusunod na listahan ng mga keyword ay maaari ding magamit upang mabago ang puntong pinagmulan ng radial gradient:
- Itaas sa kaliwa
- Ibabang kanan
- Babang kaliwa
Multicolored Radial Gradients
Tulad ng linear gradient, ang radial gradient ay maaari ring gumamit ng dalawang higit pang mga kulay, ang pangunahing pagkakaiba ay kung saan ang linear gradient ay nagdaragdag sa gradient sa isang tuwid na linya, ang radial gradient ay nagdaragdag ng mga bagong kulay sa panlabas na gilid.
Multicolored Radial Gradient Halimbawa
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Ang linya ng code sa itaas ay makakagawa ng sumusunod na output:
Pagpapasadya ng Gradients
Sa ngayon nakita mo kung paano baguhin ang direksyon at center point ng isang gradient, ngunit hindi mo pa nakikita kung paano ipasadya ang isang gradient. Ang pagpapasadya ng isang gradient ay maaaring parang tunog ng maraming trabaho, ngunit kapag naintindihan mo ang mga pangunahing kaalaman sa paglikha ng isang gradient sa background sa CSS ang susunod na halatang hakbang ay pag-alam kung paano gawing mas natatangi ang iyong mga gradient ng CSS.
kung paano mapupuksa ang bloatware sa windows 10
Bilang default, ang mga kulay sa isang gradient ay sumakop sa isang pantay na ibinahagi na dami ng puwang sa bawat kulay na maayos na paglipat sa isa pagkatapos nito. Kaya't kung ang dalawang kulay ay pinagsama upang mabuo ang isang gradient, ang bawat kulay ay sasakupin ang kalahati ng puwang na magagamit habang lumilipat mula sa isa patungo sa isa pa. Kung pinagsama ang tatlong mga kulay ang bawat kulay ay maghawak ng isang-katlo ng puwang na magagamit.
Gamit ang isang pasadyang gradient, matutukoy mo ang dami ng puwang na sasakupin ng isang kulay sa isang gradient sa pamamagitan ng tahasang pagtatalaga ng posisyon na huminto sa kulay .
Pagpapasadya ng isang Linear Gradient Halimbawa 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
Ang linya ng code sa itaas ay makakagawa ng sumusunod na output:
Ang output sa itaas ay nagpapakita ng pangalawang kulay sa linear gradient na humihinto sa 30% point ng unang kulay sa gradient, sa halip na kaugalian na posisyon nito, at dahil ang pangalawang kulay ay ang pangwakas na kulay din sa gradient na natural na umaabot hanggang sa wakas .
Kung ilalagay mo ang 30% sa code sa itaas sa pagtatapos ng unang mga bagay na kulay ay dapat na maging mas malinaw.
Pagpapasadya ng isang Linear Gradient Halimbawa 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Ang code sa itaas ay bubuo ng sumusunod na output.
Ang output sa itaas ay malinaw na ipinapakita ang unang kulay sa gradient stopping sa 30% point ng pangalawang kulay sa gradient. Ang halimbawang ito kasama ang isa sa itaas ay dapat makatulong upang mas madali mong maunawaan ang pagpapasadya ng color-stop.
Ang pagpapasadya ng isang radial gradient ay ginagawa sa parehong paraan tulad ng isang linear gradient. Ang tanging bagay na kailangan mong gawin upang makamit ang parehong mga resulta sa itaas sa isang radial gradient ay upang baguhin ang gradient uri at direksyon.
Lumikha ng Mga Gradient ng CSS Ay Hindi Na Mas Madali
Nagbibigay sa iyo ang artikulong ito ng tutorial ng mga tool upang makilala at lumikha ng mga linear at radial gradients. Kung nagawa mo ito sa puntong ito, natutunan mo kung paano baguhin ang direksyon at ang gitna ng isang gradient. Bilang karagdagan, mayroon ka na ngayong mga kasanayan upang ipasadya ang mga gradient ng CSS at lumikha ng mga natatanging gradient sa background.
Gayunpaman, kung hindi mo nais na dumiretso sa paglikha ng bago at natatanging mga gradient, maaari kang magsimula sa pamamagitan ng paglikha ng ilang magagandang hitsura na mayroon nang dati.
Magbahagi Magbahagi Mag-tweet Email 27 Naka-istilong CSS Background Gradient HalimbawaAng mga solidong kulay ay kaya noong nakaraang taon. Ang mga gradients ay nasa! Ngunit paano mo malilikha ang mga ito sa CSS?
Basahin Susunod Mga Kaugnay na Paksa- Programming
- Pag-unlad sa Web
- Disenyo ng web
- CSS
Si Kadeisha Kean ay isang Full-Stack Software Developer at Teknikal / Teknikal na Manunulat. Siya ay may natatanging kakayahan na gawing simple ang ilan sa mga pinaka kumplikadong teknolohikal na konsepto; paggawa ng materyal na maaaring madaling maunawaan ng anumang baguhan sa teknolohiya. Siya ay madamdamin tungkol sa pagsusulat, pagbuo ng mga kagiliw-giliw na software, at paglalakbay sa buong mundo (sa pamamagitan ng mga dokumentaryo).
Higit pa Mula kay Kadeisha KeanMag-subscribe sa aming newsletter
Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!
Mag-click dito upang mag-subscribe