CSS-liukuvärigeneraattori vai käsin kirjoitettu koodi

CSS-liukuvärigeneraattori antaa värien ja kulman valinnan jälkeen liitettävän arvon, kuten linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%). Se on hyvä lähtökohta. CSS-liukuvärin kirjoittaa kuitenkin käsin alle minuutissa, ja juuri käsin lisäät kolmannen pisteen, paremman väriavaruuden tai toisen kerroksen. Tässä luet, siistit ja kirjoitat koodin itse.

Jokaisen CSS-liukuvärin neljä osaa

.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }

Tyypeille on omat oppaat: lineaariset liukuvärit, säteittäiset liukuvärit ja kartioliukuvärit.

Kopioitavat liukuvärireseptit

Nämä on kirjoitettu käsin. Jokaisessa on perusgeneraattorista usein puuttuva idea: epäkeskinen valo, kolme pistettä tai valittu väriavaruus. Kopioi napsauttamalla.

Generaattorin tuloksen siistiminen

Vanha generaattori voi antaa viisi riviä yhden sijaan. Etuliitteelliset liukuvärit ja Internet Explorer -suodatin ovat olleet tarpeettomia vuosia. Ne lisäävät painoa, ja vanha -webkit--syntaksi käyttää eri kulmajärjestelmää, joka sekoittaa myöhemmän muokkaajan.

.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

Selainkin toimii generaattorina. Avaa kehittäjätyökalut, valitse elementti ja napsauta liukuvärin väriruutua Styles-paneelissa. Saat värivalitsimen kyseiselle pisteelle ja voit muokata kulmia sekä prosentteja suoraan sivun päivittyessä. Kopioi lopullinen arvo tyylitiedostoon. Oikeaa sisältöä vasten säätäminen toimii erillistä työkalua paremmin, sillä näet liukuvärin oman otsikon takana.

Viisi liukusäädintä parempaa muokkausta

1. 1

   Lisää keskimmäinen piste

   Kaksi pistettä tekee suoran rampin. Kolmas väri noin 50-60 %:n kohdalla tuo syvyyttä ja hallintaa muutoksen paikkaan.

2. 2

   Valitse väriavaruus

   in oklab pitää kaukaiset värit puhtaina, in oklch antaa sävyn kiertää. Liukuvärin interpolointi näyttää eron.

3. 3

   Siirrä valo sivuun

   Vaihda lineaarinen versioon radial-gradient(circle at 80% 20%, ...), jotta kirkkain väri tulee nurkasta kuin valonlähde.

4. 4

   Kerrosta kaksi tai kolme liukuväriä

   Erota background-image-arvot pilkuilla. Säteittäiset hehkut lineaarisella pohjalla ovat rikkaampia kuin yksi liukuväri; CSS-verkkoliukuvärit vie tämän pidemmälle.

5. 5

   Lisää hieman rakeisuutta

   Heikko kohinakerros peittää suurten tummien liukuvärien juovittumista. Koodi löytyy artikkelista CSS-kohinapinta.

.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Liukuväri uudelleenkäytettäväksi tokeniksi

Kun liukuväri toimii, nimeä se. Mukautettu ominaisuus sisältää koko arvon, jolloin painikkeet, bannerit ja pääkuva jakavat sen ja uudistus muuttaa yhtä riviä. CSS-muuttujat teemoissa näyttää vaihdon brändin tai tilan mukaan.

:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }

Milloin generaattori ei ole oikea työkalu

Generaattori ja käsin kirjoitettu CSS jakavat rajan: kuka tahansa voi lukea väripisteet tyylitiedostosta ja käyttää niitä. Se sopii käyttöliittymän yksityiskohtiin. Sivuston ja julkaisujen tunnistettavaan taustaan voit haluta rikkaampaa ja vaikeammin kopioitavaa. Liukuvärigeneraattorin käyttö antaa laajemmat neuvot.

Gradientlyn Markit ylittävät CSS:n kuvauksen: kerrostetut materiaalit, valo, rae ja liike renderöidään joka kokoon, ja omistajia on yksi kerrallaan. Suunnittele ilmaiseksi lunastamattomalla Markilla ja etsi Markkinoilta värisanoilla lähellä tavoittelemaasi liukuväriä oleva.