CSS backdrop-filter
Vlastnost backdrop-filter dokáže uplatnit filtr pro pozadí elementu.
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č
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
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.