Paradis For Designere Og Utviklere

Slik viser du tekst på bilde Med CSS3 mix-blend-modus

Bildebakgrunner ser bra ut etter store displaytekster. Men CSS-implementeringen er ikke så grei. Vi kan bruke background-clip: text; eiendom, men det er fortsatt en eksperimentell funksjon uten tilstrekkelig nettleserstøtte.

CSS-alternativet for å vise en bakgrunnsbilde bak en tekst, bruker egenskapen for mix-blend-mode . Blendmodusene for HTML-elementer støttes ganske enkelt på tvers av alle moderne desktop- og mobilnettlesere, med unntak av noen få, for eksempel Internet Explorer.

I dette innlegget skal vi se hvordan mix-blend-mode (to av dens moduser spesifikt) fungerer, og hvordan du kan bruke den til å vise en tekst med bildebakgrunn i to brukstilfeller:

når bakgrunnsbildet kan ses gjennom teksten
når bakgrunnsbildet løper rundt teksten

Se noen eksempler i demoen under (bilder er fra unsplash.com).

CSS-egenskapen for blandemix mix-blend-mode definerer hvordan innholdet og bakgrunnen til et HTML-element skal blandes fargeløst .

Ta en titt på listen over blandemodi, hvorav vi bruker multiply og screen i dette innlegget.

Først, la oss se på hvordan disse to spesifikke blandingsmodusene fungerer.

Hvordan `multiply` og `screen` fungerer

Blendingmodusene er teknisk sett funksjoner som beregner en sluttfargeverdi ved hjelp av fargekomponentene til et element og dens bakgrunn.

`multiply`

I multiply de enkelte fargene til elementene og deres bakgrunner, og den resulterende fargen blir brukt til den endelige blandede versjonen.

multiply beregnes i henhold til følgende formel:

B(Cb, Cs) = Cb × Cs

hvor: Cb - Fargekomponent av bakgrunnen Cs - Fargekomponent av kildeelementet B - Blandingsfunksjon

Når Cb og Cs multipliseres, er den resulterende fargen en blanding av disse to fargekomponentene, og er så mørk som den mørkeste av de to farger .

For å lage vår tekstbildebakgrunn, må vi fokusere på saken når Cs (fargekomponenten til kildeelementet) er enten svart eller hvitt .

Hvis Cs er svart er verdien 0, utgangsfarge vil også være svart, fordi Cb × 0 = 0 . Så når elementet er farget svart, spiller det ingen rolle hvilken farge bakgrunnen er, alt vi kan se etter at blandingen er svart.

Hvis Cs er hvit er verdien 1, utdatafarge er hva Cb er, fordi Cb × 1 = Cb . Så i dette tilfellet ser vi bakteppet direkte som det er .

`screen`

Skjermblandingsmodus fungerer på samme måte som multiply, men med motsatt resultat . Så, en svart forgrunn viser bakgrunnen som den er, og en hvit forgrunn viser hvit med uansett kuliss.

La oss raskt se sin formel:

B(Cb, Cs) = Cb + Cs - (Cb × Cs)

Når Cs er svart (0), vil bakgrunnsfargen bli vist etter blanding, som:

Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb

Når Cs er hvit (1) vil resultatet bli hvitt med noe bakteppe, som:

Cb + 1 -(Cb × 1) = Cb + 1 - Cb = 1

1. Bilde vist gjennom tekst

For å vise tekst som viser gjennom bakgrunnsbildet, bruker vi skjermblandingsmodus med svart tekst og hvitt omgivelsesrom .

Vann

 .backdrop {bredde: 600px; høyde: 210px; bakgrunnsbilde: url (someimage.jpg); bakgrunnsstørrelse: 100%; margin: auto; } .text {color: black; bakgrunnsfarge: hvit; mix-blend-modus: skjerm; bredde: 100%; høyde: 100%; skriftstørrelse: 160pt; font-weight: bolder; tekst-align: center; linjehøyde: 210px; margin: 0; }

For øyeblikket ser vår tekst ut som nedenfor, i neste trinn legger vi til tilpasset farge i bakgrunnen.

Legge til farge

Som du kanskje har gjettet, bruker vi bare to fargevalg for bruk av blandingsmodus for området som omgir teksten - svart eller hvitt . Men med hvit er det mulig å legge til noe farge på det ved å bruke et overlegg, hvis overleggsfarge passer fint sammen med bildet som brukes .

For å legge til farge i det omkringliggende området, legg til en

til HTML for et overlegg, og gi det en bakgrunnsfarge med høy gjennomsiktighet . Bruk også mix-blend-mode: multiply egenskapen for overlegget, da det hjelper bakgrunnsfargen på overlegget å blande seg litt bedre med bildet som vises i tekst.

Vann

 .overlay {bakgrunnsfarge: rgba (0, 255, 255, .1); mix-blend-modus: multiplisere; bredde: 100%; høyde: 100%; posisjon: absolutt; topp: 0; }

Med denne teknikken kan vi fargelegge omgivelsene rundt teksten med bildebakgrunnen:

Vær oppmerksom på at teknikken fungerer bra bare med subtile transparente farger . Hvis du bruker en helt uigennemskinnelig farge eller en farge som ikke stemmer overens med bildet, vil bildet som vises i teksten, ha en veldig synlig tone av fargen som brukes, så med mindre det er et blikk du går for, unngå ugjennomsiktig farger .

2. Tekst omgitt av bildebakgrunn

Selv om en vanlig tekstplassering over en bildebakgrunn krever samme teknikk, skal jeg vise deg et eksempel på hvordan den ovenfor viste demo ser ut når effekten er reversert, dvs. når tekstfargen er hvit og bakgrunnen er svart.

 .text {color: white; bakgrunnsfarge: svart; mix-blend-modus: skjerm; bredde: 100%; høyde: 100%; skriftstørrelse: 160pt; font-weight: bolder; tekst-align: center; linjehøyde: 210px; margin: 0; }

Du kan bruke det samme overlegget for å legge til litt farge i teksten, med mindre du vil beholde den hvit.

 .overlay {bakgrunnsfarge: rgba (0, 255, 255, .1); mix-blend-modus: multiplisere; bredde: 100%; høyde: 100%; posisjon: absolutt; topp: 0; }

Og under kan du se hvordan omvendt tilfelle ser ut som:

Merk at i Internet Explorer, eller en annen nettleser som ikke støtter mix-blend-mode, vises ikke bakgrunnsbildet, og teksten forblir svart (eller hvit).

Topp 6 synder av artikkelen skriver

En vis mann sa en gang: «Fortell meg hvor jeg skal dø, så jeg vil ikke gå dit.» En måte å finne ut hvordan man gjør noe, er å finne ut hvordan man ikke skal gjøre det først, så omvendt.Ta for eksempel artikkelskriving. For å lære det, kan du enten (1) ploge gjennom massevis av Internett-ressurser på gjøremålene i artikkelen skriver; eller (2) holde øye med disse grunnleggende, men viktige, boo-boos, og kutte dem ut så snart du ser dem. Her har jeg satt

(Tekniske og design tips)

9 tips for Internett-personvern [Infographic]

Du kan sannsynligvis ikke leve uten smarttelefonen din, eller i mindre grad må smarttelefonen din være innenfor rekkevidde, men visste du at appene og tjenestene du kjører på telefonen, sporer oppførselen din for å gi deg " bedre søkeresultater "? Hvis du verdsetter personvernet for søket ditt, innholdsinnstillingene dine, og ganske mye det du gjør på smarttelefonen din, må du se på dette infografisk av whoishostingthis.com.Vil du

(Tekniske og design tips)

Interessante Artikler