Liukuväripallo: hohtavat pallot pääkuviin ja kansiin

Liukuväripallo on säteittäisellä liukuvärillä tehty hohtava pallo: kirkas ydin, kylläinen värikaista ja pitkä häivytys tummaan pohjaan. Se on suosittu tuotelanseeraussivuilla, sovellusten pääkuvissa, podcast-kuvissa ja levynkansissa, koska yksi muoto antaa katseen kiintopisteen, syvyyttä ja energiaa ilman valokuvaa. Ohje on lyhyt. Vaikuttavan pallon erottaa sumeasta möykystä pohja, ytimen väri ja sijoittelu.

Kolme liukuväripallon tyyppiä

• Pehmeä hohtopallo: ei lainkaan reunaa, vain pimeästä leviävää valoa. Rauhallinen ja tunnelmallinen, sopii suurten sommitelmien taakse.
• Valaistu pallo: terävä pyöreä reuna ja heijastus toisella sivulla, kuin planeetta tai lasipallo. Vahva ja graafinen. Valaistussäännöt ovat liukuvärimuodoissa.
• Pimennysrengas: tumma kiekko, jonka reunan ympäri vuotaa valoa. Dramaattinen ja yöllinen, suosittu musiikissa ja tekniikassa.

Liukuväripallon ohjeet

Jokainen ohje on yksi radial-gradient(), jonka voit liittää CSS:ään tai suunnittelutyökaluun. Ensimmäinen pysäkki on ydin, keskimmäiset värillinen pinta ja viimeinen pohja. Pohjapysäkin siirto kauemmas leventää hohtoa.

Vältä puhtaan valkoista ydintä. Pallon omalla värillä sävytetty valkoinen, kuten violetin pallon #faf5ff, pitää keskustan valoisana ilman puhkipalamista. Vältä myös puhdasta mustaa pohjaa: lähes musta, jossa on ripaus pallon sävyä, liittää hohdon tilaan.

Miksi pallo tarvitsee tumman pohjan

Hohto on kontrastia. Valkoisella sivulla sama violetti pallo näyttää mustelmalta, syvällä musteen värisellä pohjalla valolta. Jos brändisi käyttää vaaleita taustoja, valitse vaalea pastellipallo ja leveä pehmeä häivytys. Hyväksy, että se näyttää väriläikältä hohdon sijaan. Tummat liukuväritaustat tarjoaa pohjia kaikille yllä oleville palloille.

Mihin sijoitat liukuväripallon

Pallo on kuvan kirkkain asia, joten se vetää katseen ensimmäisenä. Se on etu otsikon vierellä ja ongelma otsikon alla. Aseta pallo ylös sivulle, rajaa suuri pallo reunasta ja pidä sanat rauhallisella tummalla pohjalla. Älä käytä palloa tekstin takaisena hohtona: se heikentää kontrastia juuri tärkeimmässä kohdassa.

Liukuväripallo pääkuvassa CSS:llä

Yksinkertaisin tapa on säteittäinen liukuvärikerros itse osiossa. Pehmeämpään, orgaanisempaan hohtoon käytä erillistä voimakkaasti sumennettua ympyräelementtiä. Voit myös animoida sitä hitaasti piirtämättä koko osiota uudelleen.

.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 30%, #faf5ff 0%, #c4b5fd 6%, #7c3aed 16%, #2e1065 34%, transparent 55%),
    #0b0a1a;
  color: #f5f3ff;
}

/* Optional: a soft second light, blurred */
.hero::before {
  content: "";
  position: absolute;
  width: 40vmax;
  aspect-ratio: 1;
  left: -12vmax;
  bottom: -18vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #0891b2 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
}

.hero > * {
  position: relative;
}

Liukuväripallon animointi

Muutaman prosentin ajelehtiva tai hieman suuremmaksi ja pienemmäksi hengittävä pallo tuntuu elävältä häiritsemättä sanoja. Pidä jakso pitkänä, noin 10-20 sekuntia, ja pehmennä alku ja loppu, jotta liike ei tunnu käynnistyvän tai pysähtyvän. Vie someen lyhyt silmukka, jonka viimeinen ruutu vastaa ensimmäistä; saumaton videosilmukka kertoo miten. Verkossa liikuta sumennettua elementtiä transform-ominaisuudella ja poista liike sitä pyytäviltä käyttäjiltä vähennetyn liikkeen avulla.

Tee liukuväripallosta omaperäinen

Pallo on jo niin tavallinen, että oletusversio näyttää pohjalta. Toinen himmeämpi valo, sävynvaihto häivytyksessä tai rakeisuuskerros tekee siitä tunnistettavamman. Gradientlyn Markit menevät pidemmälle: jokainen on elävä tausta omine valoineen, materiaaleineen ja liikkeineen. Ne tarkistetaan niin, ettei kaksi näytä samalta, ja ne renderöityvät kaikissa suunnittelukoissa. Selaa tummia Markeja Markkinoilla ja suunnittele maksutta millä tahansa lunastamattomalla Markilla.