Simulating a webkit backdrop filter blur
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
ChrisArasin Merge pull request #2 from Lev-Odessit/master
missed gitignore file was added
Latest commit 88defdf Jan 22, 2017
Failed to load latest commit information.
css wrong css property was fixed Jan 22, 2017
nav-demo first commit Dec 1, 2016
.gitignore missed gitignore file was added Jan 22, 2017 readme update Dec 16, 2016
index.html first commit Dec 1, 2016
main.js unused variables was removed Jan 22, 2017

#Frosted Glass Effect Messing around with a way to create the effect of blurring everything behind and element. Currently this is natively possible in Safari with a backdrop filter, but no other browsers support it.

This method duplicates everything that will be blurred, then uses either an svg or css filter to blur the contents, and then crops the container to the overlaying element's size with overflow hidden.

This is a rough initial concept. The root index page uses the effect with a draggable element. The nav-demo uses the effect in a flyout menu.