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.
A backdrop-filter szintaxisa a következőképpen alakul:
Szűrési-mód lehet:
Természetesen egyszerre többet is lehet alkalmazni.
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.
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.
A szerzőről
Horváth Norbert
Webdesigner, frontend fejlesztő, grafikus. A fejlődés és a modern technika megszállottja, szeret új dolgokat elsajátítani. Kreativitás a legjobb barátja. Mikor nem a gép előtt tervezi a legújabb weboldalt, szívesen fotóz, videót vág vagy éppen Jamie Oliver-i magasságokba emeli konyhája művészetét.
Megjegyzések
Szólj hozzá!
Küldés