Webkit is introducing something that might be one of the most requested features since
backdrop-filter is the answer of the visual effect that Apple has incorporated their operating systems, and many of us has tried to mimic on our websites.
Not only for blur,
backdrop-filter will accept any filter function.
none | <filter-function-list> where <filter-function-list> = [ <filter-function> | <url> ]+ where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow() href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar" <a="">| <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()></drop-shadow()>
It will also work over videos, and could be an animated property.
Currently it's only supported on latest version of Safari (9.0). It's defined on Editor's Draft in the Filter Effects Module Level 2 specs.
Scroll and hit "Rerun" to get a new picture.
Subscribe to RECodes
Get the latest posts delivered right to your inbox