Share
În acest tutorial vom examina o jucărie CSS emergentă, denumită Filter Backdrop.
Propunerea de filtru de fundal este puternic influențată de limbajul de design al Apple, mai ales că geroasă-transparent-încețoșate-fond văzute în cele mai recente interfețe iOS și macOS. Ați observat-o în Dock, în meniul contextual și în centrul de notificare.
Filtrul pentru fundal este în prezent copiat sub Filtrele CSS Nivel 2 și la momentul scrisului funcționează numai în Safari 9 cu -WebKit- prefix și Chrome, precum și Opera, prin activarea funcțiilor "Platformă Web Experimentală" în cadrul funcției chrome: // flags meniul.
Filtrul pentru fundal este inclus ca parte a caietului de sarcini al filtrelor CSS și, astfel, ca și filtru proprietate, ea moștenește toate funcțiile de filtrare cunoscute alb-negru(), estompa(), și sepia (). Singura diferență este că va afecta elementele aflate sub elementul selectat.
Pentru a le folosi, vom avea nevoie de cel puțin două elemente; primul element va fi ținta, în timp ce al doilea va fi sub el. De exemplu:
Setați un fundal în primul element cu o opacitate scăzută, astfel încât să putem adăuga fundal filtru cu o funcție, de exemplu, alb-negru() pentru a transforma fundalul alb-negru.
.filtru -webkit-backdrop-filter: estomp (10px); / * Safari 9+ * / fundal-filtru: estompare (10px); / * Chrome și Opera * / fundal-culoare: rgba (255, 255, 255, 0.3);
Observați în demonstrația următoare că descendenții din .filtru elemente (un buton în acest caz) rămân clare în ciuda estompa() adăugarea de funcții. Acesta este un avantaj fundal filtru are peste filtru proprietate; unde toți urmașii sunt afectați.
Notă: imaginea de aici luată din tutorial Cum de a crea o mică roșcărie Hood Ilustrație inspirat de basm în Instrumentul Paint SAI.
Combinarea a două funcții de filtrare într-o singură declarație este, de asemenea, acceptabilă. De exemplu, păstrarea noastră estompa(), dar adăugând alb-negru() funcția de a desprinde fundalul de culoare.
.filtru -webkit-backdrop-filter: tonuri de gri () estompare (10px); / * Safari 9+ * / fundal-filtru: nuanțe de gri () (10px); / * Chrome și Opera * / fundal-culoare: rgba (255, 255, 255, 0.3);
Alte funcții pe care le puteți adăuga în mix includ:
Accentsconagua
luminozitate (): acceptarea unui număr de la 0 la infinit sau procent. Orice număr de mai jos 1, de exemplu. 0,8, va întuneca elementul și specificând orice număr de mai sus 1 va lumina elementul.contrast(): acceptă un număr și un procent care funcționează similar cu luminozitate () , cu excepția faptului că această funcție definește contrastul elementului.inversa(): această funcție generează culorile opuse sau negative ale fundalului. De asemenea, funcția acceptă și un număr și un procent ca valoare.Dacă nu puteți găsi efectul dorit de la aceste funcții implicite, puteți adăuga întotdeauna un filtru mai avansat prin SVG. Creați un filtru SVG cu un ID unic și salvați-l într-un .svg fişier:
Consultați filtrul cu URL-ul () funcția, așa cum se întâmplă.
.filtru -webkit-backdrop-filter: url (... /images/filter.svg#morph); / * Safari 9 * / fundal-filtru: url (... /images/filter.svg#morph); / * Chrome și Opera * /
Din păcate, adăugarea unui filtru cu URL-ul () funcția nu pare să funcționeze în nici un browser în timpul persistent. Dar odată implementată corespunzător, imaginea ar trebui să arate așa.
Filtru personalizat cu SVG. Există o serie de implementări practice pe web, unde am putea aplica filtrele backdrop într-un mod mai semnificativ decât să fim o garnitură. Un exemplu bun este Medium (Mediu), care estompează acoperirea imaginii postului, precum și imaginile din conținutul mesajului înainte ca imaginea să fie complet încărcată.
Imagine neclare în Medium.comUn alt exemplar din lumea reală este Facebook, care estompează imagini cu conținut matur, inadecvat sau deranjant, înainte ca utilizatorii să fi consimțit să vizualizeze imaginea în întregime.
Facebook estompat o imagine violentă în urma orientării lor Facebook Community Standard.De-a lungul anilor, CSS a fost îmbunătățită cu noi specificații care permit proiectanților să construiască interfețe mai atractive pe web. Transformările, tranzițiile și animațiile au jucat cu toții rolul lor, iar acum filtrele Backdrop vin și noi.
Deși este prea devreme să folosim filtrul backdrop în producție, aceste demonstrații arată că în curând vom putea aplica efecte de filtrare elementelor într-un mod mai simplificat și, în cele din urmă, mai puțin bazate pe bibliotecile grele JavaScript sau Canvas. Până atunci, urmați blogul Webkit pentru actualizări privind acest proiect și alte proiecte.
