Grunnatriði CSS-litastigla
CSS-litastiglar gera hönnuðum og vefforriturum kleift að sýna mjúk umskipti á milli tveggja eða fleiri lita sem bakgrunn á vefsíðum. Vafrinn býr til þessi sjónrænu hrif beint með kóða.
Þegar litastigull er hannaður þarf að skilgreina tegund hans, stefnu eða lögun, og hvernig litirnir dreifast á milli upphafspunkts og endapunkts. Þetta tól einfaldar ferlið með því að sýna breytingar í rauntíma og útbúa tilbúinn CSS-kóða.
Tegundir stigla og eiginleikar þeirra
Mismunandi tegundir stigla ákvarða hvernig litirnir blandast innbyrðis og hvaða rúmfræðilega mynstur þeir fylgja. Tólið býður upp á þrjár grunntegundir:
Línulegur (linear)
Línulegur stigull blandar litum eftir beinni línu. Áttin sem litirnir færast í ræðst af horninu sem er valið. Hornasleðinn stýrir þessari stefnu þar sem 0° vísar upp og 90° vísar til hægri. Þessi tegund hentar vel þegar óskað er eftir einföldum umskiptum, til dæmis ofan frá og niður eða horn í horn.
Hringlaga (radial)
Hringlaga stigull dreifir litum út á við frá miðjunni. Þessi tegund notar ekki horn til að ákvarða stefnu. Þess í stað er hægt að velja á milli tveggja forma:
- Sporbaugur: Litirnir dreifast í sporöskjulaga formi og aðlagast hlutföllum svæðisins.
- Hringur: Litirnir dreifast jafnt í allar áttir frá miðjunni og mynda fullkominn hring, óháð hlutföllum bakgrunnsins.
Keilulaga (conic)
Keilulaga stigull sveipar litum í kringum miðjuna eins og litahjól. Umskiptin eiga sér stað í hringlaga hreyfingu í kringum miðpunktinn, frekar en að færast út á við frá honum. Líkt og með línulega stigla ákveður hornasleðinn upphafsstefnu sveipsins, þar sem 0° vísar beint upp og 90° vísar til hægri.
Litastopp og staðsetning þeirra
Litastopp skilgreina hvaða litir koma fram í stiglinum og hvar nákvæmlega þeir eiga að vera staðsettir. Hvert litastopp samanstendur af litagildi og prósentutölu frá 0% til 100%. Staðsetningin 0% táknar upphaf stigulsins en 100% táknar endapunkt hans.
Sjálfgefinn stigull í tólinu inniheldur tvö litastopp: #6366f1 0% og #ec4899 100%. Hægt er að bæta við fleiri litum til að búa til flóknari litasamsetningar. Þegar nýju litastoppi er bætt við fær það sjálfgefna staðsetningu við 50%. Tólið leyfir að hámarki átta litastopp. Þegar átta litastopp eru til staðar verður hnappurinn „Bæta við stoppi“ óvirkur.
Notkun á Litagradíent rafall
Tólið er hannað til að mæta þörfum ólíkra notenda, allt frá þeim sem þurfa fljótlegan tveggja lita bakgrunn yfir í hönnuði og vefforritara sem þurfa nákvæma stjórn á mörgum litastoppum og flóknum hornum.
Skref við gerð litastiguls:
- Veldu tegund stiguls: Undir „Tegund stiguls“ er valið á milli „Línulegur (linear)“, „Hringlaga (radial)“ eða „Keilulaga (conic)“.
- Stilltu stefnu eða lögun:
- Fyrir línulega og keilulaga stigla er sleðinn „Horn“ notaður til að ákvarða stefnuna.
- Fyrir hringlaga stigla er valið á milli „Sporbaugur“ og „Hringur“ undir „Lögun“.
- Settu upp litastopp: Undir „Litastopp“ er hægt að breyta litum og staðsetningu þeirra. Notaðu „Bæta við stoppi“ til að fjölga litum eða „Fjarlægja stopp“ til að fækka þeim. Staðsetning hvers stopps er stillt með prósentugildi undir „Staðsetning“.
- Afritaðu CSS-kóðann: Skoðaðu útkomuna í rauntíma í forskoðunarglugganum. Þegar hönnunin er tilbúin er smellt á hnappinn „Afrita CSS“ undir „CSS“. Við það breytist texti hnappsins í „Afritað“ og kóðinn vistast á klemmuspjaldið, tilbúinn til notkunar í stílblöðum.
Vinnsla og persónuvernd
Öll vinnsla á gögnum og teikning á litastiglum fer fram staðbundið. Hver litastigull er teiknaður beint í vafranum þínum. Engu af því sem þú stillir hér er hlaðið upp á BroBroGo.
Algengar spurningar
Hver er munurinn á línulegum, hringlaga og keilulaga stiglum?
Línulegur (linear) stigull blandar litum eftir beinni línu sem þú stýrir með horni. Hringlaga (radial) stigull dreifir þeim út á við frá miðjunni í hring eða sporbaug. Keilulaga (conic) stigull sveipar þeim í kringum miðjuna eins og litahjól.
Hvað eru litastopp?
Hvert litastopp er litur sem er festur við ákveðna staðsetningu á stiglinum — 0% í byrjun, 100% í enda. Færðu stopp til að breyta því hvar liturinn nær hámarki, eða bættu við fleiri stoppum til að fá ríkari blöndun. Þú getur notað allt að átta stopp.
Hvernig stjórna ég stefnunni?
Fyrir línulegan (linear) eða keilulaga (conic) stigul ákveður hornasleðinn stefnuna — 0° vísar upp, 90° vísar til hægri. Hringlaga (radial) stigull hefur ekkert horn; veldu þess í stað hring- eða sporbaugslögun til að breyta því hvernig hann dreifist.