Gineadóir Grádán CSS

Conas an gineadóir grádán CSS a úsáid

1. Roghnaigh Cineál grádáin: Líneach, Raidiach nó Cónach. Nuashonraítear an réamhamharc mór ag an mbarr le gach athrú a dhéanann tú.
2. I gcás grádáin línigh, socraigh an Uillinn leis an duilleog sleamhnáin nó clóscríobh í i gcéimeanna (téann 90° ón taobh clé go dtí an taobh deas, 180° ón mbarr go dtí an bun). I gcás grádáin chónaigh, is é an uillinn an pointe a dtosaíonn an scuabadh uaidh.
3. I gcás grádán raidiach agus cónach, bog an lár le Lár X agus Lár Y. Is féidir le grádán raidiach a bheith ina Ciorcal nó ina Éilips (roghchlár Cruth).
4. Cuir na Stadanna datha in eagar. Cliceáil in aon áit ar an mbarra chun stad a chur leis ansin, leis an dath atá ag an ngrádán cheana féin ag an bpointe sin, nó úsáid Cuir stad leis chun an bhearna is leithne a líonadh. Tarraing hanla chun é a bhogadh. Tá sraith ag gach stad freisin inar féidir leat a dath a roghnú, aon dath CSS a chlóscríobh, a Suíomh (%) a shocrú nó é a Bain (coinníonn grádán dhá stad ar a laghad).
5. Más mian leat, cuir tic in aice le Athrá, roghnaigh an Idirshuíomh datha, cliceáil Cuir droim ar ais chun na stadanna a iompú nó Grádán randamach chun smaointe a fháil.
6. Cóipeáil an toradh ón gcuid Cód CSS leis an gcnaipe Cóipeáil.

Méarchlár: fócasaigh hanla ar an mbarra, ansin bain úsáid as na heochracha saighead chun é a bhogadh 1 % (10 % le Shift), Home agus End chun léim go dtí na himill, agus Delete chun é a bhaint.

Na trí fheidhm ghrádáin

• linear-gradient() measctha dathanna feadh líne dhíreach. Ritheann linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) ó indigo ar an taobh clé go bándearg ar an taobh deas. Is deiseal ón mbarr a thomhaistear uillinneacha: pointeálann 0deg suas, 90deg ar dheis.
• radial-gradient() astaíonn ó phointe lárnach. Cuireann radial-gradient(circle at 30% 40%, …) an lár 30 % ón taobh clé agus 40 % ón mbarr. Sínfidh éilips leis an mbosca, fanfaidh ciorcal cruinn.
• conic-gradient() scuabann timpeall lár cosúil le lámha cloig. Déanann conic-gradient(from 0deg at 50% 50%, …) rothaí datha, cartaí píce agus éifeachtaí casadóra. Is sciar den chasadh iomlán iad suímh na stad.

Úsáideann an rogha Athrá repeating-linear-gradient() agus a gcomhghleacaithe: athrá an patrún a shainíonn do stadanna go dtí go mbeidh an bosca lán. Cuir an stad deireanach i bhfad faoi bhun 100 % (mar shampla 20 %) chun stríoca nó fáinní a fheiceáil.

Cruthaíonn dhá stad ar an suíomh céanna imeall crua in ionad meascáin, agus is mar sin a dhéantar stríoca agus bratacha. Coinníonn an gineadóir na stadanna in ord suímh sa chód, mar a éilíonn CSS.

Idirshuíomh sRGB nó OKLCH

De réir réamhshocraithe, meascann brabhsálaithe dathanna grádáin in sRGB. Idir dhá dhath sáithithe, mar ghorm agus buí, cruthaíonn sé seo meán liath mín nó láibeach go minic. Ligeann CSS Color Level 4 duit spás an idirshuímh a roghnú: meascann linear-gradient(90deg in oklch, …) sa spás OKLCH, a bhaineann le braistint an duine, agus coinníonn sé an lár beoga.

Leis an rogha OKLCH (níos míne, le sRGB mar chúltaca), scríobhann an uirlis dhá dhearbhú background: ar dtús an leagan clasaiceach sRGB, ansin an leagan OKLCH. Úsáideann brabhsálaithe a thacaíonn le spásanna idirshuímh (Chrome agus Edge 111+, Safari 16.2+, Firefox 127+) an dara líne; ní thugann na cinn is sine aird uirthi agus coinníonn siad an chéad cheann.

Leideanna

• Glactar le dathanna le trédhearcacht sna réimsí stad, mar shampla #00000080 nó rgb(0 0 0 / 50%), rud atá áisiúil do na forleaganacha ar íomhánna.
• Scríobhtar an cód le background. Úsáid background-image ina ionad más rud é go socraíonn tú airíonna cúlra eile ar leith.
• Breathnaíonn grádáin chaolchúiseacha (dhá scáth ghar do dhath amháin) níos gairmiúla de ghnáth ná meascáin tuar ceatha.
• Oibríonn an uirlis seo i do bhrabhsálaí. Ní chuirtear aon rud a chuireann tú isteach chuig freastalaí.