Legmenőbb effekt a backdrop-filter segítségével!

Webdesignerként mindig azon gondolkozik az ember, hogy mi újat alkalmazhatna a weboldal tervezése, fejlesztése közben. Mindig kellene valami menőség, amivel fel lehet dobni egy weboldalt. Mégis mi lenne menőbb annál, ha a blurt végre úgy tudnánk alkalmazni, ahogy mindig is szerettük volna: divek, menük, pop-upok háttereként? 

A backdrop-filter CSS tulajdonsággal lehetővé válik, hogy egyszerűen manipuláljuk vizuálisan az adott elem mögött lévő tartalmat. A filter tulajdonsághoz hasonló dolgokat lehet művelni vele (pl. szürkítés, szépia, elmosódás, stb), de azzal ellentétben nem az adott elem hátterét babrálja, hanem egy szűrőt hoz létre.

Kép forrása

A nyelvtan 

A backdrop-filter szintaxisa a következőképpen alakul: 

backdrop-filter: szűrési-mód(érték) 

Szűrési-mód lehet:

• blur()
• brightness() 
  
• brightness() 
  
• contrast() 
• drop-shadow() 
• grayscale() 
• hue-rotate() 
• invert()
• opacity()
• saturate()
• sepia()
• url() – (SVG szűrő alkalmazáshoz)

Természetesen egyszerre többet is lehet alkalmazni.  

.class {

backdrop-filter: blur(8px) grayscale(0.6);

} 

Az egyes szűrési-módok elfogadott érték típusáról a W3 Filter Effects Module oldalán lehet tájékozódni.

A gyakorlatban. 

Van egy egyszerű képes hátterünk, felette egy szöveges div és a blur szűrési módnak köszönhetően az .above div alatti tartalom elmosódik. 

Most, hogy megnéztük hogyan működik nincs más dolgunk csak kreatívan felhasználni weboldalak készítése során.