Tunnelmalliset liukuvärit: tummat ja syvät värikoodit

Tunnelmallinen liukuväri on tumma häivytys, joka käyttäytyy kuin hämärä huone: suurin osa pinnasta jää varjoon, yksi alue saa valoa ja värejä hillitään korostamisen sijaan. Resepti on helppo kertoa. Aloita sävytetystä lähes mustasta, lisää yksi tai kaksi hillittyä keskisävyä ja anna yhden valon, usein lämpimän viileää pohjaa vasten, herättää pinta eloon. Alla on kaksitoista kopioitavaa koodia sekä ohjeet oman version tekemiseen ja tekstin luettavuuteen.

Mikä tekee liukuväristä tunnelmallisen pelkän tumman sijaan

Moni tumma liukuväri tuntuu lattealta. Laivastonsinisestä mustaan häivyttyvä pinta on tumma mutta vailla säätä. Tunnelma syntyy muutamasta päätöksestä, joita valokuvaajat ja elokuvien värimäärittelijät tekevät vaistomaisesti. Sinä voit tehdä ne tietoisesti.

• Hämärä valaistus. Noin kolme neljäsosaa pinnasta on varjoa. Valo on poikkeus, ei sääntö.
• Yksi lähde. Valo tulee nurkasta tai reunasta, joten katse ymmärtää ikkunan tai lampun paikan.
• Hillitty väri. Keskisävyt ovat hieman harmaannettuja. Pölyinen petrooli tuntuu kirkasta tunnelmallisemmalta.
• Värilliset varjot. Tummin kohta on sinimusta, vihreänmusta tai häränveri, ei koskaan #000000.
• Lämpötilakontrasti. Pieni lämmin valo viileässä näkymässä tai päinvastoin luo jännitettä.

Kaksitoista tunnelmallista liukuvärikoodia

Jokainen näistä on yksi CSS-arvo, jonka voit liittää background-ominaisuuteen. Ne on ryhmitelty väljästi lämpötilan mukaan: ensin viileät ja myrskyisät, sitten lämpimät lamppuvalot ja lopuksi muutama siltä väliltä.

Jos haluat selkeän yön myrskyisen sijaan, yötaivaan liukuvärit painottuvat siniseen ja lisäävät tähtiä. Syvempiä, kiiltävämpiä ja kylläisempiä värejä tarjoavat jalokivisävyt, jotka ovat astetta kirkkaampia kuin nämä.

Tunnelmallinen väripaletti lähtökohdaksi

Kun teet oman, aloita paletista kahden värin sijaan. Viisi riittää: pohja, kaksi varjoaskelta, yksi hillitty keskisävy ja yksi valo. Vain valon väri saa olla aidosti kirkas, ja sen pitää näkyä pienellä alueella.

Värilämpötila selittää, miksi lämmin valo toimii niin hyvin viileää varjoa vasten. Lisää valmiita yhdistelmiä löydät artikkelista tummat väripaletit.

Tunnelmallisen liukuvärin tekeminen CSS:llä

1. 1

   Aseta sävytetty pohja

   Valitse värillinen lähes musta, kuten sinimusta #0b0d12 tai lämmin ruskeanmusta #120806. Käytä sitä myös background-color-varavärinä.

2. 2

   Lisää varjon runko

   Tee pehmeä lineaarinen liukuväri saman sävyn kahden tumman asteen välille. Se antaa pinnalle syvyyttä ennen valoa.

3. 3

   Sijoita yksi valo

   Lisää nurkkaan säteittäinen liukuväri, joka häipyy transparent-arvoon noin 40 prosentissa. Pidä väri hillittynä ja peittävyys selvästi alle täyden.

4. 4

   Lisää viileä vastavalo

   Voit lisätä vastakkaiseen nurkkaan toisen, suuremman ja himmeämmän säteittäisen liukuvärin viileissä sävyissä. Se estää varjopuolta kuolemasta.

5. 5

   Viimeistele rakeisuudella

   Hieno, vähän peittävä kohinakerros peittää raidoittumista ja saa pinnan tuntumaan filmiltä. Rakeiset liukuvärit antaa koodin.

.moody {
  background-color: #0b0d12; /* tinted ground and fallback */
  background-image:
    radial-gradient(circle at 78% 18%, rgba(201, 138, 58, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 100%, rgba(31, 58, 68, 0.8) 0%, transparent 55%),
    linear-gradient(165deg, #151a22 0%, #0b0d12 100%);
}

Sanat tunnelmallisella taustalla

Vaalea teksti tummalla pohjalla erottuu hyvin, kunnes se kulkee vaivalla tekemäsi valoläikän yli. Suunnittele otsikko varjopuolelle ja pidä valo erossa sanoista niiden taakse sijoittamisen sijaan. Pehmeä luonnonvalkoinen kuten #ece6dc sopii tunnelmalliseen pohjaan puhdasta valkoista paremmin, sillä puhdas valkoinen voi näyttää kovalta.

Oikeanpuoleisen version Gradientlyn Mark tekee itse. Se tietää sanojen paikan, syventää väriä kirjainten lähellä ja valitsee vaalean tai tumman tekstin riveittäin omasta paletistaan ilman lisälaatikoita tai varjoja. Teksti liukuvärillä käsittelee käsin tehtävää versiota.

Missä tunnelmalliset liukuvärit toimivat parhaiten

Ne sopivat yöhön, musiikkiin, juomiin, elokuvaan, tuoksuihin ja hiljaiseen ylellisyyteen. Lastenjuhliin tai kesäaleen ne sopivat paljon huonommin. Koko käyttöliittymän tekemistä tällä tyylillä käsittelee tummat liukuväritaustat, joka kertoo näyttöjen vaatimasta lisähuolellisuudesta.

Jos et halua säätää kerroksia käsin, Markkinoilla on juuri tällaisia eläviä Markeja. Voit hakea niitä sanoilla kuten ”deep teal” tai ”oxblood”. Suunnittele ilmaiseksi millä tahansa lunastamattomalla Markilla. Lunastamalla sen varmistat, ettei kenenkään muun julisteessa ole samaa tunnelmaa.