Share
I denne opplæringen vil vi se på et fremvoksende CSS-leketøy som går under navnet Backdrop Filter.
Bakgrunnsfilterforslaget er sterkt påvirket av Apples designspråt, spesielt det kald-transparent-uklare-bakgrunn sett i deres nyeste iOS- og macOS-grensesnitt. Du har lagt merke til det i Dock, Kontekstmenyen og Meldingssentralen.
Bakgrunnsfilteret er for tiden bakket under CSS-filtre Nivå 2, og på skrivetidspunktet virker det bare i Safari 9 med -webkit- prefiks og Chrome samt Opera ved å aktivere "Eksperimentell Web Platform Funksjoner" under chrome: // flags Meny.
Bakgrunnsfilter er inkludert som en del av CSS Filters spesifikasjon og dermed på samme måte som filter eiendom, arver det alle kjente filtreringsfunksjoner slik gråtoner (), uklarhet(), og sepia (). Den eneste forskjellen her er at den vil påvirke elementene under det valgte elementet.
For å bruke det, trenger vi minst to elementer; Det første elementet vil være målet, mens det andre vil ligge under det. For eksempel:
Sett en bakgrunn i det første elementet med lav opacitet slik at vi kan legge til bakgrunn-filteret med en funksjon, for eksempel, gråtoner () for å snu bakgrunnen svart og hvitt.
.filter -webkit-backdrop-filter: uskarphet (10px); / * Safari 9+ * / bakteppefilter: uskarphet (10px); / * Chrome og Opera * / bakgrunnsfarge: rgba (255, 255, 255, 0.3);
Legg merke til i følgende demonstrasjon at etterkommerne av .filter elementer (en knapp i dette tilfellet) forblir skarpe til tross for uklarhet() funksjon tillegg. Dette er en fordel bakgrunn-filteret har over filter eiendom; hvor alle etterkommere er påvirket.
Merk: bildet her tatt fra opplæringen Hvordan lage en liten rød hette inspirert Fairytale Illustrasjon i Paint Tool SAI.
Kombinere to filterfunksjoner i en enkelt deklarasjon er også akseptabelt. For eksempel holder vi uklarhet(), men legger til gråtoner () funksjon for å fjerne bakgrunnsfargen.
.filter -webkit-backdrop-filter: gråtoner () uskarphet (10px); / * Safari 9+ * / bakgrunnsfilter: gråtoner () uskarphet (10px); / * Chrome og Opera * / bakgrunnsfarge: rgba (255, 255, 255, 0.3);
Andre funksjoner du kan legge inn i blandingen inkluderer:
Accentsconagua
lyshet (): akseptere et tall fra 0 til uendelig, eller prosentandel. Et hvilket som helst nummer nedenfor 1, f.eks. 0.8, vil mørke elementet og spesifisere et hvilket som helst tall over 1 vil lette elementet.kontrast(): aksepterer et tall og en prosentandel som fungerer i likhet med lyshet () funksjon, unntatt denne funksjonen definerer elementets kontrast.inverterer (): Denne funksjonen genererer motsatte eller negative farger i bakgrunnen. På samme måte aksepterer funksjonen også et tall og prosentandel som verdien.Hvis du ikke finner den ønskede effekten fra disse standardfunksjonene, kan du alltid legge til et mer avansert filter gjennom SVG. Opprett et SVG-filter med en unik ID, og lagre den i en .svg fil:
Se filteret med url () funksjon, som så.
.filter -webkit-backdrop-filter: url (... /images/filter.svg#morph); / * Safari 9 * / bakteppe-filter: url (... /images/filter.svg#morph); / * Chrome og Opera * /
Dessverre legger du til filter med url () funksjonen ser ikke ut til å fungere i en hvilken som helst nettleser i prosentvis tid. Men en gang riktig implementert, skal bildet se slik ut.
Egendefinert filter med SVG. Det finnes en rekke praktiske implementeringer på nettet der vi kan bruke bakteppefiltre på en mer meningsfylt måte enn bare å være garnering. Et godt eksempel er Medium, som blur postbildedekselet og bildene i innleggets innhold før bildet er fullt lastet.
Uklart bilde i Medium.comEt annet stort virkelighetseksempel er Facebook, som blur bilder med modent, upassende eller forstyrrende innhold, før brukerne har samtykket i å se bildet i sin helhet.
Facebook slør et voldsomt bilde etter deres Facebook-fellesskaps retningslinje.Gjennom årene har CSS blitt forbedret med nye spesifikasjoner som gjør det mulig for designere å bygge mer overbevisende grensesnitt på nettet. Transformer, overganger og animasjoner har alle spilt sin rolle, og nå er Bakgrunnsfiltre også kommet vår vei.
Selv om det kanskje er for tidlig å bruke bakgrunnsfilter i produksjon, viser disse demonstrasjonene at vi snart vil kunne bruke filtereffekter til elementer på en forenklet måte og i siste instans mindre avhengige av tunge JavaScript- eller Lerretsbiblioteker. Inntil da, følg Webkit Blog for oppdateringer om dette og andre prosjekter.
