CSS gradiendi põhitõed veebidisainis
CSS gradiendid võimaldavad luua sujuvaid üleminekuid kahe või enama värvi vahel, pakkudes veebidisainis paindlikku alternatiivi tavalistele taustapiltidele. Erinevalt pildifailidest laaditakse CSS-iga genereeritud gradiendid brauseris koheselt, need on skaleeritavad ilma kvaliteeti kaotamata ning neid saab koodis kiiresti muuta. Gradiendi generaator võimaldab luua ja kohandada kolme peamist gradiendi tüüpi: lineaarseid, radiaalseid ja koonilisi gradiente.
Tööriista esmasel avamisel on algseks gradiendiks määratud kaks värvipunkti: #6366f1 0% ja #ec4899 100%. See annab kohese visuaalse eelvaate, mida saab hakata vastavalt vajadusele muutma.
Lineaarsed gradiendid: suund ja värvipunktid
Lineaarne gradient (Linear) sulandab värve piki sirget joont. Selle suunda määrab nurk, mida saab tööriistas reguleerida spetsiaalse liuguri abil.
- Suuna määramine: Nurga väärtus esitatakse kraadides, kus 0° osutab otse üles ja 90° osutab paremale. Nurga muutmisega saab suunata värvide üleminekut vertikaalselt, horisontaalselt või diagonaalselt.
- Värvide jaotumine: Värvipunktid määravad, kus konkreetsed värvid piki seda sirget asuvad. Üleminek toimub sujuvalt ühelt punktilt teisele.
Radiaalsed gradiendid: kujud ja värvide levik
Radiaalne gradient (Radial) levitab värve keskkohast väljapoole, luues ringikujulise või elliptilise mustri. Erinevalt lineaarsetest gradientidest ei kasuta radiaalne gradient nurka. Selle asemel määratakse gradiendi leviku kuju:
- Ellips (Ellipse): Värvid levivad väljapoole elliptiliselt, kohandudes konteineri laiuse ja kõrguse suhtega.
- Ring (Circle): Värvid levivad ühtlaselt igas suunas, säilitades täiusliku ringi kuju sõltumata taustaelementide proportsioonidest.
Koonilised gradiendid: värvide pühkimine ümber keskpunkti
Kooniline gradient (Conic) pühib värve ümber keskpunkti, meenutades visuaalselt värviratast või pirukatabelit. Värvide üleminek toimub päripäeva ümber keskse punkti. Sarnaselt lineaarsele gradiendile saab ka koonilise gradiendi puhul kasutada nurga liugurit, et määrata alguspunkti suund, kus 0° osutab üles ja 90° paremale.
Värvipunktide roll ja seadistamine
Värvipunktid (color stops) määravad, millised värvid gradiendis osalevad ja kus kohas üleminek toimub. Iga värvipunkt koosneb konkreetsest värvitoonist ja selle positsioonist.
- Positsioon: Positsiooni väärtus määratakse protsentides vahemikus 0% kuni 100%. Väärtus 0% tähistab gradiendi algust ja 100% selle lõppu.
- Värvipunktide arv: Gradiendi generaator võimaldab kasutada kuni kaheksat värvipunkti, mis annab disainerile või arendajale vabaduse luua keerulisi ja mitmevärvilisi üleminekuid.
- Uute punktide lisamine: Kui klõpsata nupule "Lisa värvipunkt", luuakse uus punkt, mille vaikimisi positsiooniks on 50%.
- Piirangud: Kui saavutatakse maksimaalne lubatud arv ehk kaheksa värvipunkti, lülitatakse nupp "Lisa värvipunkt" välja. Vajadusel saab punkte eemaldada, kasutades valikut "Eemalda värvipunkt".
Gradiendi generaatori kasutamine ja CSS-i hankimine
Tööriist on loodud lihtsaks ja kiireks kasutamiseks nii lihtsa kahevärvilise tausta vajajale kui ka professionaalsele veebiarendajale.
- Valige jaotisest "Gradiendi tüüp" soovitud tüüp: "Lineaarne (Linear)", "Radiaalne (Radial)" või "Kooniline (Conic)".
- Sõltuvalt valitud tüübist reguleerige nurka ("Nurk") või valige kuju jaotisest "Kuju" ("Ellips (Ellipse)" või "Ring (Circle)").
- Seadistage jaotises "Värvipunktid" soovitud värvid ja nende positsioonid. Kasutage nuppe "Lisa värvipunkt" ja "Eemalda värvipunkt" punktide arvu reguleerimiseks.
- Jälgige reaalajas eelvaadet lehe ülaosas.
- Kui tulemus on sobiv, liikuge jaotisesse "CSS" ja klõpsake nupule "Kopeeri CSS". Pärast klõpsamist muutub nupu tekst olekusse "Copied", mis kinnitab, et kood on kopeeritud lõikelauale ja valmis veebilehe stiilifaili lisamiseks.
Privaatsus ja andmetöötlus
Kasutajate andmete privaatsus on tagatud kohaliku töötlusega. Iga gradient renderdatakse otse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse, mis tähendab, et kogu loomeprotsess toimub täielikult teie seadmes.
Korduma kippuvad küsimused
Mis vahe on lineaarsel, radiaalsel ja koonilisel gradiendil?
Lineaarne gradient (linear-gradient) sulandab värve piki sirget, mida suunate nurgaga. Radiaalne gradient (radial-gradient) levitab neid keskkohast väljapoole ringi või ellipsina. Kooniline gradient (conic-gradient) pühib neid ümber keskpunkti nagu värviratas.
Mis on värvipunktid?
Iga värvipunkt (color stop) on kindlale positsioonile kinnitatud värv piki gradienti — 0% alguses, 100% lõpus. Liigutage punkti, et nihutada selle värvi tipphetke, või lisage rohkem punkte rikkalikuma sulandumise saavutamiseks. Kasutada saab kuni kaheksat värvipunkti.
Kuidas juhtida gradiendi suunda?
Lineaarse või koonilise gradiendi puhul määrab nurga liugur suuna — 0° osutab üles, 90° paremale. Radiaalsel gradiendil nurka pole; selle leviku muutmiseks valige selle asemel ringi (circle) või ellipsi (ellipse) kujund.