CSS gradientu veidi un to darbības principi
CSS gradienti ļauj veidot plūstošas pārejas starp dažādām krāsām, neizmantojot attēlu failus. Šis rīks nodrošina trīs galvenos gradientu veidus, kurus izmanto tīmekļa dizainā:
- Lineārs gradients (linear): Sajauc krāsas pa taisnu līniju, kuras virzienu nosaka lietotāja iestatītais leņķis.
- Radiāls gradients (radial): Izplata krāsas uz āru no centra apļa vai elipses formā.
- Konisks gradients (conic): Griež krāsas ap centrālo punktu līdzīgi kā krāsu aplī.
Katram gradienta veidam ir specifiski parametri, kas nosaka, kā krāsas tiek izvietotas un attēlotas gala rezultātā.
Lineārie gradienti: virziens un leņķis
Lineārajā gradientā krāsu pāreja notiek pa taisnu līniju. Šīs līnijas virzienu nosaka leņķis, ko mēra grādos (°).
Iestatot leņķi, tiek piemēroti šādi virziena noteikumi:
- 0° norāda taisni uz augšu.
- 90° norāda pa labi.
Mainot leņķa vērtību, mainās ass, pa kuru krāsas plūst viena otrā, ļaujot veidot horizontālas, vertikālas vai diagonālas pārejas.
Radiālie gradienti: formas un izplatīšanās
Atšķirībā no lineārajiem gradientiem, radiālie gradienti neizmanto leņķa iestatījumu. Tā vietā krāsu izplatīšanās notiek no centra uz āru, un lietotājs var izvēlēties vienu no divām formām:
- Elipse: Krāsu pāreja pielāgojas konteinera proporcijām, veidojot pastieptu formu.
- Aplis: Krāsu pāreja saglabā vienmērīgu, simetrisku apļa formu neatkarīgi no elementa malu attiecības.
Koniskie gradienti: rotācija ap centru
Koniskais gradients veido krāsu pāreju, kas griežas ap centrālo punktu. Līdzīgi kā lineārajiem gradientiem, arī koniskajam gradientam var iestatīt leņķi, kas nosaka sākuma punktu, no kura krāsas sāk savu rotāciju pulksteņrādītāja virzienā. Šis veids ir noderīgs, lai izveidotu krāsu riteņu efektus vai segmentētus vizuālos elementus.
Krāsu punktu loma un ierobežojumi
Krāsu punkti (color stops) nosaka, kuras krāsas tiks izmantotas gradientā un kur tieši tās atradīsies uz pārejas ass.
- Pozīcija: Katram punktam tiek piešķirta pozīcija procentos no 0% (sākums) līdz 100% (beigas).
- Sākuma stāvoklis: Noklusējuma gradients sastāv no diviem krāsu punktiem:
#6366f1pozīcijā0%un#ec4899pozīcijā100%. - Jaunu punktu pievienošana: Pievienojot jaunu krāsu punktu, tā noklusējuma pozīcija ir
50%. - Skaita ierobežojums: Gradientā var izmantot līdz astoņiem krāsu punktiem. Kad ir sasniegts maksimālais skaits (astoņi krāsu punkti), poga "Pievienot punktu" tiek deaktivizēta.
Gradientu ģeneratora lietošana
Rīks nodrošina tūlītēju vizuālo kontroli pār visiem gradienta parametriem.
Iestatījumu veikšana
Saskarnē ir pieejamas šādas vadības opcijas:
- Sadaļā Gradienta veids izvēlieties vienu no trim opcijām: Lineārs, Radiāls vai Konisks.
- Ja izvēlēts lineārs vai konisks gradients, izmantojiet slīdni Leņķis, lai iestatītu virzienu.
- Ja izvēlēts radiāls gradients, sadaļā Forma izvēlieties Elipse vai Aplis.
- Sadaļā Krāsu punkti varat mainīt katra punkta krāsu (Punkta krāsa) un tā novietojumu (Pozīcija).
- Lai pievienotu jaunu krāsu, spiediet pogu Pievienot punktu. Nevajadzīgos punktus var noņemt, izmantojot pogu Noņemt punktu.
Rezultāta iegūšana
Labajā pusē vai virs vadības paneļa ir redzams tūlītējs vizuālais priekšskatījums. Zem tā atrodas sadaļa CSS, kurā tiek automātiski ģenerēts gatavais kods. Noklikšķinot uz pogas Kopēt CSS, kods tiek saglabāts starpliktuvē, un pogas teksts mainās uz "Nokopēts".
Datu apstrāde un privātums
Katrs gradients tiek renderēts tieši jūsu pārlūkprogrammā. Nekas no tā, ko šeit iestatāt, netiek augšupielādēts BroBroGo.
Biežāk uzdotie jautājumi
Kāda ir atšķirība starp lineāru, radiālu un konisku gradientu?
Lineārs gradients (linear) sajauc krāsas pa taisnu līniju, kuru virzāt ar leņķi. Radiāls gradients (radial) izplata tās uz āru no centra aplī vai elipsē. Konisks gradients (conic) griež tās ap centru kā krāsu apli.
Kas ir krāsu punkti (color stops)?
Katrs krāsu punkts (color stop) ir krāsa, kas piesaistīta noteiktai pozīcijai gar gradientu — 0% sākumā, 100% beigās. Pārvietojiet punktu, lai mainītu vietu, kur tā krāsa sasniedz maksimumu, vai pievienojiet vairāk punktu bagātīgākam sajaukumam. Varat izmantot līdz astoņiem punktiem.
Kā es varu kontrolēt virzienu?
Lineāram vai koniskam gradientu leņķa slīdnis iestata virzienu — 0° norāda uz augšu, 90° norāda pa labi. Radiālam gradientam nav leņķa; tā vietā izvēlieties apļa vai elipses formu, lai mainītu tā izplatīšanos.