Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Have det sjovt med fremtidens CSS: backdrop-filter

by
Difficulty:IntermediateLength:ShortLanguages:

Danish (Dansk) translation by Benjamin Høegh (you can also view the original English article)

I denne tutorial vil vi se en spirende CSS legetøj kommer af navnet på Backdrop Filter.

Forslagets backdrop-filter er stærkt påvirket af Apple designsprog, især den frostklare-gennemsigtig-sløret-baggrund set i deres seneste iOS og macOS grænseflader. Du vil have bemærket det i Dock, højre klik menuen og Notification centeret.

Backdrop-filter er i øjeblikket bagt under CSS-filter niveau 2, og på tidspunktet for at skrive, det virker kun arbejde i Safari 9 med - webkit-præfiks, og Chrome, samt Opera ved at aktivere den "eksperimentelle Web platformfunktioner" under menuen chrome://flags.

Chrome Flag Menu

Brug Backdrop Filter

Backdrop-filter er inkluderet som en del af specifikationen CSS filter og er dermed, og har samme egenskaber som filter det anvender alle de velkendte filtrering funktioner så som grayscale(), blur() og sepia(). Den eneste forskel her er, at det vil påvirke elementerne under det markerede element.

For at bruge det, vil vi brug for mindst to elementer; det første element vil være mål, mens andet vil ligge nedenunder. For eksempel:

Angive en baggrund i det første element med lav opacitet, så vi kan tilføje backdrop-filter med en funktion, for eksempel, grayscale() til at gøre baggrunden sort og hvid.

Bemærket i følgende demo, at efterkommere af .filter elementerne (en knap i dette tilfælde) forbliver skarpe trods blur() funktion tilsætning. Det er en fordel backdrop-filter i modsætning til filter, hvor alle inden i dit element bliver påvirket.

Bemærk: billedet her taget fra tutorial hvordan man skaber en lille Red Riding Hood inspireret Fairytale Illustration i Paint Tool SAI.

Kombinere flere filtre

Kombinerer to filter funktioner i en enkelt erklæring er også acceptabel. For eksempel, at beholde vores blur(), mens vi tilføjer grayscale() til at gøre baggrunden af sort hvid.

Andre funktioner, du kan tilføje i blandingen omfatter:

  • Brightness(): acceptere et tal fra 0 til uendeligt, eller procent. Et vilkårligt tal under 1, fx 0.8, vil gøre elementet mørkere, og angive et vilkårligt antal over 1 vil lyser elementet.
  • Contrast(): accepterer et tal eller procent, som virker ligesom brightness(), bortset fra denne funktion definerer element kontrast.
  • Invert(): denne funktion genererer de modsatte også kaldt negative, farver i baggrunden. Ligeledes, funktionen også accepterer et tal eller procent som værdien.

Avanceret Filter med SVG

Hvis du ikke kan finde den ønskede effekt fra disse standardfunktioner, kan du altid tilføje et mere avanceret filter gennem SVG. Oprette en SVG filter med et unik ID, og gem det i som en .svg fil:

Henvise filteret med funktionen url(), som så.

Desværre, tilføje filter med funktionen url() synes ikke at arbejde i enhver browser, på nuværede tidpunkt. Men når det gennemføres korrekt, billedet skal se sådan ud.

Brugerdefineret filter med SVG.

Hvad at lave?

Der er en række praktiske implementeringer på nettet hvor vi kunne anvende baggrund filtre på en mere meningsfuld måde end blot at være en garniture. Et godt eksempel er Medium, der slører post billede dækning samt billeder i opstille tilfredshed før billedet er fuldt loaded.

A post in Medium with the title image cover and the excerpt
Sløret billede i Medium.com

En anden stor real-world eksempel er Facebook, som slører billeder med modne, upassende eller foruroligende indhold, før brugere har givet sit samtykke til at få vist billedet i fuld.

Facebook sløring en voldelig billede efter deres Facebook Fællesskabet Standard retningslinje.

Konklusion

Over det seneste år, er CSS blevet forbedret med nye specifikationer, der gør det muligt designere til at bygge mere overbevisende grænseflader på nettet. Transformeringer, overgange og animationer har alle spillede deres del, og nu Backdrop filter kommer vores vej også.

Selv om det måske for tidligt at bruge backdrop-filter i produktion, så viser demoerne, at vi snart vil kunne anvende filtereffekter på elementerne i en mere forenklet måde og i sidste ende mindre afhængige af tunge JavaScript eller lærred biblioteker. Indtil da, Følg den Webkit Blog for opdateringer om dette og andre projekter.

Yderligere ressourcer

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.