Kategória: Webfejlesztés

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:

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. 

kép a szerzőről

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

További cikkek

Miért fontos a design?

Webáruház indítás a járvány alatt. Főbb okok a webáruház mellett.

User Experience Design alappillérei