Läpinäkyvät CSS-liukuvärit: häivytykset ja peittokerrokset

Tee läpinäkyvä CSS-liukuväri antamalla yhdelle väripisteelle nolla-alfa: linear-gradient(to bottom, #7c3aed, transparent) häivyttää violetin pois ja paljastaa alla olevan sisällön. Sama idea toimii tekstin lopun häivytyksissä, kuvatekstien takana olevissa tummennuksissa ja kuvien värikerroksissa. Kun haluat häivyttää elementin sisällön taustan sijaan, käytä liukuväriä mask-image-ominaisuudessa.

Läpinäkyvän värin kirjoitustavat

Miksi häivytykset muuttuivat ennen harmaiksi

Avainsana transparent tarkoittaa mustaa nolla-alfalla. Varhaiset selaimet sekoittivat punaisen, vihreän ja sinisen kanavan erillään alfakanavasta, joten valkoisesta transparent-arvoon kulkeva häivytys kävi puoliksi läpinäkyvän harmaan kautta. Siksi vanhat ohjeet vaativat sen sijaan arvoa rgba(255, 255, 255, 0).

Määrittely edellyttää nyt esikerrottua alfaa: jokaista väriä painotetaan sen peittävyydellä ennen sekoittamista. Täysin läpinäkyvä piste ei siis tuo mukaan lainkaan väriä. Kaikki nykyiset selaimet toimivat näin. Saman värin kirjoittaminen nolla-alfalla on silti harmiton tapa, joka toimii myös sähköpostiohjelmissa ja vanhoissa WebView-näkymissä.

Häivytyksen loppukohta merkitsee yhtä paljon kuin sen värit. 70 prosentin kohdalla oleva väripiste päättää häivytyksen ajoissa ja jättää laatikon loppuosan täysin läpinäkyväksi. Tämä sopii sävytykseen, joka koskettaa vain yhtä reunaa. Kaksi samassa kohdassa olevaa pistettä leikkaa värin suoraan läpinäkyväksi. Se sopii puoliksi täytettyihin palkkeihin ja jaettuihin taustoihin. Pisteiden paikat selitetään CSS:n lineaarisissa liukuväreissä.

Sisällön häivyttäminen mask-image-ominaisuudella

Taustaliukuväri on sisällön takana, joten se ei voi häivyttää tekstiä, kuvia tai vieritettävää listaa. Maski voi. mask-image-ominaisuudessa liukuvärin peittävät osat pitävät elementin näkyvissä ja läpinäkyvät osat piilottavat sen. Maskin väri ei merkitse, vain alfa.

/* Fade the last lines of a teaser paragraph */
.teaser {
  max-height: 9rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Soft edges on a horizontally scrolling row */
.carousel {
  overflow-x: auto;
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Fade a photo into the page on any background colour */
.hero-photo {
  mask-image: linear-gradient(to bottom, #000 50%, transparent 95%);
}

Vanha vaihtoehto oli sisällön päälle asetettu valkoinen liukuväri. Se hajoaa heti, kun sivu ei ole valkoinen, esimerkiksi tummassa tilassa. Se myös estää napsautukset, ellet muista asetusta pointer-events: none. Maskilla ei ole kumpaakaan ongelmaa.

Tummennukset: läpinäkyvät liukuvärit tekstin takana

Tummennus peittää osan kuvasta, jotta sen päällä oleva teksti erottuu. Se häipyy täysin läpinäkyväksi, joten muu kuva pysyy kirkkaana. Kahden pisteen häivytys toimii, mutta sen suora muutos jättää näkyvän viivan tummennuksen loppuun. Useammat, loppua kohti loivennetut pisteet piilottavat reunan.

.card {
  background-image:
    linear-gradient(to top,
      rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%,
      rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%,
      rgb(2 6 23 / 0) 100%),
    url("/images/coast.jpg");
  background-size: cover;
  color: #f8fafc;
}

Sävytä tummennus kuvan oman värin syvällä sävyllä puhtaan mustan sijaan, niin se tuntuu osalta kuvaa. Lämpimässä auringonlaskukuvassa esimerkiksi syvä ruskea rgb(41 20 8 / 0.75) sulautuu kuvaan, kun taas musta näyttää sen päälle asetetulta suodattimelta. CSS-liukuvärikerrokset käsittelee väripesuja ja sekoitustiloja, ja teksti kuvan päällä tekstin sijoittelua.

Läpinäkyvät aukot ja valokeilat

Käännä idea toisin päin: keskusta läpinäkyväksi ja ulkopuoli tummaksi. Sivun tai kuvan päälle asetettu säteittäinen liukuväri jättää yhden alueen valoisaksi ja himmentää muun. Se sopii käyttöönoton vinkkeihin, tuotteiden lähikuviin ja esitysdioihin.

.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 40%),
    transparent 0 140px,
    rgb(2 6 23 / 0.72) 220px
  );
}

Somejulkaisuihin ja painotuotteisiin tarvitsee harvoin rakentaa tummennuksia käsin. Gradientlyssä Mark itse tekee tilaa sanoille syventämällä tai vaalentamalla värejä kirjainten lähellä. Erillistä peittokerrosta ei tarvitse säätää jokaiseen kokoon.