CSS litstigull

Hvernig á að nota CSS litstiglaframleiðandann

1. Veldu Tegund litstiguls: Línulegur, Geislalaga eða Keilulaga. Stóra forskoðunin efst uppfærist við hverja breytingu.
2. Fyrir línulegan litstigul stillirðu Horn með sleðanum eða slærð það inn í gráðum (90° fer frá vinstri til hægri, 180° ofan frá og niður). Fyrir keilulaga litstigul er hornið þar sem sveiflan byrjar.
3. Fyrir geislalaga og keilulaga litstigla færirðu miðjuna með Miðja X og Miðja Y. Geislalaga litstigull getur verið Hringur eða Sporbaugur (valmyndin Lögun).
4. Breyttu Litastopp. Smelltu hvar sem er á stikuna til að bæta við stoppi þar með litnum sem litstigullinn hefur þegar á þeim stað, eða notaðu Bæta við stoppi til að fylla stærsta bilið. Dragðu haldfang til að færa það. Hvert stopp hefur líka línu þar sem þú getur valið lit þess, slegið inn hvaða CSS-lit sem er, stillt Staða (%) eða Fjarlægja það (litstigull heldur alltaf að minnsta kosti tveimur stoppum).
5. Hakaðu valfrjálst í Endurtekinn, veldu Litablöndun, smelltu á Snúa við til að snúa stoppunum við eða Tilviljunarkenndur litstigull fyrir innblástur.
6. Afritaðu niðurstöðuna úr CSS-kóði með Afrita.

Lyklaborð: settu haldfang á stikunni í fókus og notaðu örvalyklana til að færa það um 1% (10% með Shift), Home og End til að stökkva á endana og Delete til að fjarlægja það.

Föllin þrjú fyrir litstigla

• linear-gradient() blandar litum eftir beinni línu. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) fer frá indígó til vinstri í bleikt til hægri. Horn eru réttsælis frá toppi: 0deg vísar upp, 90deg til hægri.
• radial-gradient() geislar út frá miðpunkti. radial-gradient(circle at 30% 40%, …) setur miðjuna 30% frá vinstri og 40% frá toppi. Sporbaugur teygist með kassanum, hringur helst kringlóttur.
• conic-gradient() sveiflast um miðju eins og vísar á klukku. conic-gradient(from 0deg at 50% 50%, …) býr til litahjól, kökurit og áhrif eins og hleðsluhringi. Staða stoppa er hlutfall af heilum hring.

Valkosturinn Endurtekinn notar repeating-linear-gradient() og systurföll þess: mynstrið sem stoppin þín skilgreina endurtekur sig þar til kassinn er fylltur. Settu síðasta stoppið vel undir 100% (til dæmis 20%) til að sjá rendur eða hringi.

Tvö stopp á sömu stöðu búa til harða brún í stað blöndunar, og þannig eru rendur og fánar gerðir. Framleiðandinn heldur stoppum raðað eftir stöðu í kóðanum, eins og CSS krefst.

sRGB- eða OKLCH-blöndun

Sjálfgefið blanda vafrar litum litstigla í sRGB. Milli tveggja mettaðra lita, eins og blás og guls, myndast oft sljór grár eða drullugur millilitur. CSS Color Level 4 leyfir þér að velja blöndunarrýmið: linear-gradient(90deg in oklch, …) blandar í skynjunarrýminu OKLCH og heldur miðjunni líflegri.

Með OKLCH (mýkri, með sRGB til vara) skrifar tólið tvær background yfirlýsingar: fyrst klassísku sRGB-útgáfuna, síðan OKLCH-útgáfuna. Vafrar sem styðja blöndunarrými (Chrome og Edge 111+, Safari 16.2+, Firefox 127+) nota seinni línuna; eldri vafrar hunsa hana og halda þeirri fyrri.

Ráð

• Litir með gegnsæi eru samþykktir í stopp-reitunum, til dæmis #00000080 eða rgb(0 0 0 / 50%), sem er handhægt fyrir yfirlög á myndum.
• Kóðinn er skrifaður með background. Notaðu background-image í staðinn ef þú stillir aðra bakgrunnseiginleika sérstaklega.
• Fínlegir litstiglar (tveir nálægir tónar af einum lit) líta yfirleitt fagmannlegar út en regnbogablöndur.