Sumennetut liukuvärit: modernia pehmeää väriä

Sumennettu liukuväri on väriä ilman reunoja: muutama pehmeä muoto pohjalla, sumennettuna kunnes jäljellä on vain sävystä toiseen ajelehtiva valo. Se näyttää huurrelasin läpi otetulta kuvalta tai valaistuun kaupunkiin suunnatulta epätarkalta linssiltä. Pehmeys sopii hyvinvointisovelluksiin, musiikkiin, ihonhoitoon, rauhalliseen teknologiaan ja taustakuviin. Menetelmä on yksinkertainen: ensin muodot, sitten paljon sumennusta, lopuksi rae. Alla olevat yksityiskohdat ratkaisevat, näyttääkö tulos unenomaiselta vai tuhruiselta.

Sumennetut, revontuli- ja mesh-liukuvärit

Nämä kolme sekoitetaan helposti, koska kaikki näyttävät pehmeiltä. Ne perustuvat eri ajatuksiin, ja oikean valitseminen muuttaa suunnittelutehtävää.

Näin teet sumennetun liukuvärin

1. 1

   Valitse pohja

   Vaalea luonnonvalkoinen ilmavaan ilmeeseen, syvä muste hohtavaan. Pohja täyttää kaikki muotojen jättämät aukot.

2. 2

   Valitse kolme tai neljä naapuriväriä

   Väriympyrässä lähekkäiset värit, kuten pinkki, syreeni ja taivaansininen, muodostavat puhtaat välisävyt. Lähivärit tarjoaa lisää yhdistelmiä.

3. 3

   Piirrä suuria päällekkäisiä muotoja

   Kolmesta viiteen ympyrää tai soikiota, joista kukin peittää neljänneksen tai puolet pohjasta. Anna osan jatkua reunojen yli.

4. 4

   Sumenna voimakkaasti

   Käytä Gaussin sumennusta noin 10-20 prosenttia pohjan lyhyemmästä sivusta. 1080 pikseliä leveässä postauksessa se on noin 110-220 pikseliä.

5. 5

   Lisää rae

   Hieno kohinakerros 3-6 prosentin peittävyydellä piilottaa raidoittumisen ja estää muovisen vaikutelman.

6. 6

   Tarkista puhelinkoossa

   Pienennä kuvaa. Jos jollakin muodolla on yhä näkyvä reuna, sumenna lisää tai suurenna muotoa.

Sumennettujen liukuvärien värireseptit

Jokainen näyte jäljittelee valmista ilmettä yhdellä liukuvärillä. Voit kopioida sen suoraan CSS:ään tai käyttää värejä muodoissasi. Keskeltä sivuun asetetut elliptiset säteittäisliukuvärit pääsevät yllättävän lähelle oikeaa sumennusta.

Valitse perhe päälle tulevan sisällön mukaan. Vaaleat sumennukset kantavat tummaa tekstiä ja sopivat ihonhoitoon, paperituotteisiin, hyvinvointiin ja toimituksellisiin kansiin. Tummat saavat vaalean tekstin hohtamaan ja sopivat yöelämään, musiikkiin ja myöhäisiin tapahtumiin. Neutraali, kuten pellavan sävyinen sumennus, toimii hiljaisena tuotekuvan taustana, jossa väri ei saa kilpailla esineen kanssa. Lisää pehmeitä paletteja löydät oppaasta unenomaiset liukuvärit.

Kuinka paljon liukuväriä pitää sumentaa

Useimmat sumennetut liukuvärit epäonnistuvat, koska sumennusta on liian vähän. 30 pikselin sumennus 1080 pikselin pohjalla on yhä pehmeäreunainen muoto, joka näyttää läiskältä. Sumennuksen on oltava niin suuri, ettei yhden muodon loppua voi erottaa.

Sumennettu liukuväri CSS:llä

Verkossa on kaksi tapaa. Läpinäkyvään häipyvät kerrostetut säteittäisliukuvärit ovat kevyitä ja renderöityvät heti. Oikeat sumennetut elementit näyttävät pehmeämmiltä ja voivat liikkua, mutta piirtäminen on raskaampaa. Staattiseen taustaan kerrokset yleensä riittävät.

/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }

Jos tarvitset huurretun paneelin sumennetun taustan päälle itse taustan sijaan, käytä backdrop-filter-ominaisuutta. Sitä käsittelee CSS-taustan suodatus.

Miksi sumennettu liukuväri näyttää halvalta ja miten korjaat sen

Raidoittuminen yllättää kaikki, sillä sumennus luo pitkiä lempeitä häivytyksiä monen pikselin yli. Pieni rae korjaa sen. Liukuvärien raidoittuminen selittää syyn. Jos kaksi väriä kohtaa harmaana, vaihda toinen naapuriväriin, kuten sameat liukuvärit neuvoo.

Gradientlyn Markeissa on pehmeitä hajanaisia materiaaleja sisäänrakennetulla rakeella. Ne pitävät sanojesi taustan rauhallisena, joten sumennettu ilme ei niele otsikkoa. Voit suunnitella Studiossa ilmaiseksi millä tahansa lunastamattomalla Markilla.