CSS Gradient Rafall

Búðu til litaskiptingar sjónrænt og afritaðu CSS kóða samstundis

Raðaðu mörgum litum frjálslega til að búa til sjónrænt fallegar CSS **litaskiptingar**. Styður bæði **linear-gradient** og **radial-gradient**, með eins smella afritun á fullbúnum CSS kóða. Náðu rauntíma litastillingum sem eru ómögulegar með gervigreind (AI).

Forskoðun

Tegund Litaskiptingar

Tegund

Horn (90°)

Lögun

Litastopp (Color Stops)

Forstillingar

Hvernig á að nota

Það er einfalt að nota CSS gradient rafalinn:

Skref 1: Veldu tegund litaskiptingar

Veldu línulega litaskiptingu (**linear**) eða geislamyndaða litaskiptingu (**radial**) og stilltu **hornið** eða **lögunina**.

Skref 2: Stilltu litina

Veldu liti með litavali og fínstilltu **stöðu** hvers litar með stöðusleðanum. Bættu við eða fjarlægðu liti frjálslega.

Skref 3: Afritaðu CSS kóða

Stilltu á meðan þú athugar forskoðunina og afritaðu síðan fullbúinn CSS kóða með einum smelli.

Þetta tól keyrir alfarið í vafranum þínum. Öll vinnsla fer fram á tækinu þínu. Engin gögn eru send út á við.

Notkunarsvið

Hægt er að nota CSS gradient rafalann í eftirfarandi tilvikum:

1. Bakgrunnar Hero-hluta

Búðu til grípandi **litaskiptingar** bakgrunna fyrir efstu síður vefsíðunnar. Náðu fram áhrifamiklum fyrstu sýnum sem nýta vörumerkjaliti.

2. Hnappa hover áhrif

Notaðu **litaskiptingar** við **hover** yfir hnappa til að veita gagnvirka UI upplifun. Stuðlar að bættu smellihlutfalli notenda.

3. Skreyting korta hönnunar

Bættu **litaskiptingum** við vörukort eða bloggfærslukort til að ná fram nútímalegri, stílhreinni hönnun. Fullkomið fyrir rafræn viðskipti og fjölmiðlasíður.

4. Litaskiptingar á texta

Sameinaðu með **background-clip: text** til að nota **litaskiptingar** á textann sjálfan. Skapaðu dýpt og lúxus í fyrirsögnum og lógóum.

5. Kommur á deiliskipunum hluta

Notaðu **litaskiptingar** í deiliskipunum hluta og ramma til að skapa einingu og flæði á allri síðunni.

6. Hönnun sem er samhæf við dökka stillingu (Dark mode)

Búðu til dekkri **litaskiptingar** til að byggja UI sem er bjartsýnn fyrir dökka stillingu. Náðu augnvænni hönnun sem hentar til langtímanotkunar.

Hvað er CSS Gradient

CSS **litaskiptingar** eru tækni sem nær fram bakgrunnum og skreytingum sem blanda tveimur eða fleiri litum slétt saman með því að nota eingöngu CSS kóða, án myndaskráa.

Línuleg Litaskipting (linear-gradient)

Litaskipting þar sem litir breytast línulega eftir tilgreindu horni eða stefnu. Horn er hægt að stilla frjálslega frá **0** gráðum (upp á við) til **360** gráðum (heill hringur), og einnig er hægt að tilgreina stefnu eins og '**to bottom**' og '**to right**'.

Geislamynduð Litaskipting (radial-gradient)

Litaskipting þar sem litir dreifast geislamyndað frá miðjunni. Þú getur valið **hring** eða **sporöskju** form og stillt miðjustöðu og dreifingu. Hentar vel til að skreyta hnappa og tákn.

Hvað eru Litastopp (Color Stops)

Litastopp eru stöður þar sem ákveðnir litir eru settir innan litaskiptingar. Hægt er að setja hvaða fjölda lita sem er í hvaða stöðu sem er frá **0%** (upphafsstaða) til **100%** (endarstaða). Samsetning margra litastoppa skapar flókna og fallega litaskiptingar.

Algengar Spurningar

Er CSS gradient rafallinn ókeypis?

Já, það er algjörlega **ókeypis** í notkun. Engin skráning er nauðsynleg og það keyrir í vafranum þínum, svo þú getur byrjað að nota það strax.

Hver er munurinn á linear-gradient og radial-gradient?

**linear-gradient** er línuleg litaskipting þar sem litir breytast línulega, en **radial-gradient** er geislamynduð litaskipting þar sem litir dreifast frá miðjunni. Línuleg virkar vel fyrir hnappa og borða, en geislamynduð hentar táknum og skreytingum.

Hversu marga liti get ég notað í litaskiptingu?

Fræðilega ótakmarkað, en **2-4** litir eru ráðlagðir fyrir sjónrænt fallegar litaskiptingar. Of margir litir gera litaskiptingar flóknar og hönnun erfiðari að sameina.

Get ég notað það á snjallsímum?

Já, hannað **mobile-first** og virkar þægilega á snjallsímum. Er með snertivæddar sleða og litaval.

Get ég bætt við eigin forstilltum litaskiptingum?

Núverandi útgáfa býður upp á **6** forstillingar (Sólarupprás, Haf, Skógur, osfrv.), en áætlað er að bæta við sérsniðinni forstilltum vistunaraðgerð í framtíðinni.

Virka CSS litaskiptingar í eldri vöfrum?

**linear-gradient** og **radial-gradient** eru studdar í IE10+, Chrome 26+, Firefox 16+, og Safari 7+. Fyrir eldri vafra er mælt með því að tilgreina **fallback** bakgrunnslit.

Hver eru áhrif litaskiptinga á frammistöðu?

CSS **litaskiptingar** bæta hleðsluhraða síðunnar þar sem þær þurfa ekki að hlaða myndaskrár. Hins vegar geta flóknar litaskiptingar eða samsetningar með hreyfimyndum aukið álag á flutning.

Get ég notað mynduðu CSS kóðann eins og hann er?

Já, hægt er að nota myndaða kóðann strax með því að afrita og líma hann inn í CSS skrána þína. Hann er skrifaður sem **background** eiginleiki og er tilbúinn til að nota.