Valkoinen liukuväri: hillityt sävyt ja CSS-koodit

Valkoinen liukuväri vaihtuu puhtaasta valkoisesta vain hieman tummempaan valkoiseen, jossa on yleensä hento lämmin, viileä tai helmiäinen sävy. Muutos on tarkoituksella pieni: sen pitäisi tuntua pinnalle lankeavalta valolta, ei väriltä. Siksi valkoiset liukuvärit sopivat selkeille verkkosivuille, tuotekuviin, kutsuihin ja minimalistisiin somejulkaisuihin. Alla saat ohjeet voimakkuuden valintaan, valkoisten paletin, kopioitavat koodit ja oikean tavan häivyttää valkoiseen CSS:llä.

Kuinka suuri sävymuutos valkoinen liukuväri tarvitsee

Liian pientä muutosta ei huomaa, varsinkaan puhelimen täydellä kirkkaudella. Liian suuri muutos tekee valkoisesta harmaan ja nuhjuisen. Taulukon kolme voimakkuutta kuvaavat loppusävyn eroa puhtaaseen valkoiseen. Keskimmäinen sopii useimpiin ulkoasuihin.

Valkoiset sävyt liukuvärin pohjaksi

Täysin neutraali harmaa valkoisen liukuvärin lopussa näyttää hieman elottomalta. Pieni sävytys auttaa: lämpimät valkoiset muistuttavat paperia, pellavaa ja norsunluuta, viileät posliinia, huurretta ja lunta. Valitse muuhun palettiin sopiva sävy ja käytä sitä johdonmukaisesti koko sarjassa.

Valkoisen liukuvärin koodit

Kaikki nämä alkavat puhtaasta tai lähes puhtaasta valkoisesta. Paperi ja norsunluu ovat lämpimiä ja sopivat julkaisuihin. Posliini ja huurre ovat viileitä ja teknisiä. Aamuvalo tuo yhteen kulmaan pehmeän hohteen. Helmi yhdistää useita lähes huomaamattomia sävyjä hennoksi helmiäiseksi ilman sateenkaarivaikutelmaa.

Jos haluat hieman enemmän väriä mutta yhtä ilmavan tunnelman, seuraava askel on pastelliliukuväri. Neutraalien sävyjen toisen pään löydät harmaiden liukuvärien koodeista.

Valkoinen liukuväri tuotteiden taustalla

Valokuvaajat valaisevat valkoisen taustan niin, että valo vähenee pehmeästi reunoja kohti. Se erottaa kohteen taustasta ilman varjon rajaa. Säteittäinen valkoinen liukuväri tekee saman näytöllä. Se on erityisen hyödyllinen, kun irrotat tuotteen valokuvasta: tasainen valkoinen näyttää liimatulta, pehmeä sävymuutos studiolta.

Tuotekuvien taustat käsittelee varjoja, värillisiä taustoja ja tilanteita, joissa valkoinen ei toimi.

Häivytys valkoiseen CSS-liukuvärillä

Verkon tavallisin valkoinen liukuväri ei ole tausta. Se on häivytys, joka pehmentää katkaistun artikkelin loppua, vieritettävän listan alareunaa tai valokuvan reunaa. Määritä läpinäkyvä pää valkoiseksi, jonka peittävyys on nolla. Nykyselaimet sekoittavat arvon transparent oikein, mutta rgb(255 255 255 / 0) kertoo tarkoituksen täsmällisesti ja välttää harmahtavan kaistan, jonka jotkin vanhemmat moottorit piirsivät.

/* soften the end of a clipped block of text */
.excerpt {
  position: relative;
  max-height: 12rem;
  overflow: hidden;
}

.excerpt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, #ffffff 90%);
  pointer-events: none;
}

Jos sivun tausta on sävytetty valkoinen, häivytä siihen väriin. Muuten häivytyksen loppuun jää näkyvä vaaleampi kaistale. Läpinäkyvä CSS-liukuväri käsittelee häivytyksiä ja päällekkäisiä kerroksia tarkemmin.

Raikas valkoinen ilman haalistunutta ilmettä

Valkoisissakin liukuväreissä näkyy sävyportaita, vaikkakin vähemmän kuin tummissa. Jos huomaat portaita suurella näytöllä, hyvin hieno rakeisuus korjaa ne. Liukuvärien raidoittuminen selittää keinon.

Valkoiset liukuvärit minimalistisissa ulkoasuissa

Minimalistinen ulkoasu onnistuu tai epäonnistuu typografiansa mukana, eikä valkoinen anna sille piilopaikkaa. Käytä vahvaa, lähes mustaa tekstiä, runsaasti tilaa ja yhtä värillistä yksityiskohtaa. Valkoinen liukuväri tuo juuri riittävästi syvyyttä, jotta sivu tuntuu valaistulta ja viimeistellyltä. Minimalistiset taustat tarjoaa lisää samanhenkisiä ideoita. Verkkosivun pääkuvan taustat näyttää, miten posliini- tai aamuvaloliukuväri voi kantaa koko laskeutumissivua.

Gradientlyssä vaaleat Markit toimivat kuten voimakkaatkin: Mark pitää sanojen takana rauhallisen alueen, ja Automaattinen muste valitsee tumman tekstivärin Markin omasta paletista. Hento valkoinen ei siis saa harmaata tekstiä, joka katoaa näkyvistä.