Slik bruker du CSS3 Blending Mode [CSS3 Tips]

Merk: Denne funksjonen krever aktivering fra krom: // flaggsiden for at den skal fungere.

Hvis du noen gang har brukt en grafikk- eller fotoeditor som Photoshop og Pixelmator, bør du allerede være kjent med Blending Modes. Blending Modes er en samling av moduser som gjør at en gjenstand kan blandes med andre objekter, og dermed produsere kontrastiv utgang av blandingen . Hvis det gjøres riktig, kan Blending Modes gi et meget fristende resultat, slik som dette.

Blending Mode har vært en funksjon som bare finnes i grafikk- og fotoredigerere. I dag kan du finne det i CSS rike. La oss se hvordan det fungerer.

Starter

Det er verdt å merke seg at CSS3 Blend Mode er en eksperimentell funksjon. Firefox og Chrome er den eneste nettleseren som sendes med denne funksjonen ved skrivingstidspunktet.

Merk: I Chrome, før det er i stand til å gjengi CSS3-blendmodus, må du aktivere webplatformfunksjonene fra krom: // flaggsiden.

Bakgrunns- og blandingsmodus

Det er to nylig introduserte CSS egenskaper med hensyn til Blending Mode: mix-blend-mode og background-blend-mode .

mix-blend-mode definerer hvordan innholdet i et element blandes med annet innhold under . Mens egenskapen for background-blend-mode, som navnet antyder, adresserer bakgrunnsfargen, bakgrunnsbildet og bakgrunnsgradienter .

Som i Photoshop kan vi bruke følgende blandemoduser til disse CSS-egenskapene: normal, multiplisere, skjerm, overlegg, mørkere, lysere, fargeverspeil, fargebrenn, hardt lys, mykt lys, forskjell, utestenging, nyanse, metning, farge og lysstyrke.

Google-logoen er fargerik, og har blitt formet i mange former for Google Doodle-prosjektet. I dette innlegget utfører vi Blend-effekten på Google-logotypen for å illustrere hvordan denne nye CSS3-funksjonen fungerer.

Først, la oss sette opp merkingen: vi pakker hver bokstav sammen med et spenningselement, slik at vi kan angi forskjellige farger og stilregler for brevet.

 o o g l e G o o g l e 

Deretter legger vi til fargene for Google-merkevaren, avledet fra BrandColors. Her velger vi elementet ved hjelp av nth-child barnvelgeren, og lar oss bruke stilene uten å måtte legge til flere HTML-klasser til hvert av spanelementet som pakker inn bokstavene.

 .demo-wrapper .title {letter-spacing: -25px; } span: første barn {farge: # 4285f4; stilling: relativ; z-indeks: 100; } span: nth-child (2) {color: # db4437; } span: nth-child (3) {color: # f4b400; } span: nth-child (4) {color: # 4285f4; stilling: relativ; z-indeks: 100; } span: nth-child (5) {color: # 0f9d58; } span: nth-child (6) {color: # db4437; } 

På dette stadiet, her er hvordan logoen viser seg. Logoen ser nå mer tett da vi reduserer hvite mellomrom mellom brevet ved -25px gjennom lagt kode.

Nå bruker vi Blend-modusen.

 span {mix-blend-mode: multiply; } 

Den originale fargen på logoen, samt fargen på de kryssede bokstavene, blir mer levende .

Vi har brukt logoen med både Opacity og CSS3 Blend Mode. Utgangen, som forventet, er karakteristisk; fargene på Google-logoen med den anvendte opaciteten ser foreldet ut og bleknet. Se en demonstrasjon av deres sammenligning i handling under.

• Se demo
• Last ned kilde

Ytterligere ressurser

• CSS Compositing og Blending Level 1 Dokumentasjon - W3C
• Nye CSS-gradientmuligheter med egenskapen bakgrunns-blanding-modus

Slik legger du til Facebook Authorship i WordPress

Facebook gir mange tjenester for å la nettsteder være mer engasjerende gjennom det sosiale nettverket, for eksempel ved å bruke kommentaren, likebox, den eminente like- knappen, og mer nylig har den forbedret forfatter-tagging-funksjonen. Forfatter-taggen, når den er gitt, tillater Facebook å merke den delte artikkelen med forfatterens Facebook-profil.Merk

(Tekniske og design tips)

11 beste Android-lansere du kan laste ned (2018)

En Android-launcher-app oppretter hjemmeskjermen du ser og bruker når du låser opp enheten din, slik at den må være vakker, men likevel intuitiv nok til å gi en fantastisk opplevelse. Heldigvis er Google Play Butikk vert for en mengde lanseringsprogrammer som du kan laste ned og bruke for å tilpasse opplevelsen.I det

(Tekniske og design tips)