Moderní tvorba webových aplikací

O webu

CSS backdrop-filter

Vlastnost backdrop-filter dokáže uplatnit filtr pro pozadí elementu.

3 minuty

CSS filtry se těší dobré podpoře napříč prohlížeči.

Zápis

Vlastnost backdrop-filter slouží pro aplikování filtrů na pozadí elementu, bez ovlivnění samotného obsahu. Zápis je úplně stejný jako u filter:

element {
  backdrop-filter: nazevFiltru(parametr);
}

Aby se efekt mohl projevit, musí být element průhledný – je už jedno jestli pomocí opacity nebo pozadí zapsaného např. průhlednou RGBA barvou, případně to funguje i úplně bez pozadí.

Rozmazaný text pomocí filter

Rozmazaný obsah v pozadí

Rozmazávač

Samostatná živá ukázka

Podpora

Podpora není tak dobrá jako u obyčejného filteru.

Nefunguje v IE 11 a Firefoxu (nejspíš začne fungovat v blízké budoucnosti).

Využití

Může se zdát, že jde totéž co vlastností backdrop-filter zajistit obyčejným filterem. To je do jisté míry pravda, ale backdrop-filter přináší zjednodušení – odpadá nutnost vytvářet speciální elementy pro aplikování filtru na požadované místo stránky.

U klasického filtru je často problém v tom, že rozmazává i obsah. Bylo tak dřív nutné mít specifickou strukturu HTML kódu.

Odkazy

Související články

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Poskakování stránky kvůli posuvníku

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

8 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025