cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Realtime blurring like in iOS 7, uses CSS blur, so your browser better support it.

Comments

  1. really getting into SVG filters at the moment - this is a lovely example of them!

  2. Excellent!! Definitely gonna be using this technique soon! :) Great work!

  3. I tried scaling the blur to the full size page and the performance is super slow. I think it's because of cloning such a large portion of the screen.

    If you have a solution for a full size page I would be happy to have it: .screen { position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden; }

  4. @asule, I just updated the pen to use CSS 3D transforms instead of margin-top for offsetting the blurred layer (no need for a reflow when using translate()) this gained approx 15 fps, how does it perform on your machine?

  5. I used another approche to create this effect using css regions: http://codepen.io/FWeinb/pen/Dfoaw There you don't need to clone the content.

  6. Very nice @FWeinb!

    Can't wait for regions to become available by default. :-)

  7. Change overflow:auto to overflow:auto; -webkit-overflow-scrolling: touch;, it breaks on iPad or iPhone. The blur portion doesn't sync. Nice try ;-)

  8. Nice job, its only not working for me anymore on chrome version 36.0.1985.125 m last week it worked fine.

  9. Thanks for the heads-up @siebe, I just made a small adjustments and it seems to function correctly again.

  10. I was looked for this many times. I really love it.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...