css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
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

Here's a popup that appears while blurring out the body underneath. click the 'X' close on the popup and the blur transition back while the popup fades off.

Suitable for sites that may want a nag (perhaps for donation or subscription services) or could be re-purposed as a general modal or lightbox.

Uses CSS3 Filter (for blur) and CSS3 Animation for blur transitions. The jQuery is minimal in this iteration, simply used to fade in the pop-up and add and remove the CSS3 classes for blurring.

Comments

  1. Nice effect. Just a heads up, Codepen has Autoprefixer built-in...might have saved you a lot of typing.

  2. This is cool, I had wondered about this myself. My only concern is that it seems to maintain a bit of a blur even when the modal fades out, probably because it still has a transform of 0px on it. Ant ideas?

  3. @tpalmer75 I hadn't observed that personally but I haven't tested across all browsers yet but in any case I would guess it would have to be a browser bug. What I could do to work around it is add a timer function that removes the class completely after the animation gets to blur(0px). I'll look at it later.

  4. @winger Yes!, I knew it actually but for some reason it wasn't working for me at the time for some reason so I decided to just do it myself. Probably I just had something weird with my css at the time that kept it from autoprefixing.

  5. I tried this recently, but the performance hit is just too much :(

  6. @nathansmonk Ha, yes, indeed! I'm not surprised.

    However, I think most of what I see on Codepen is more about the possibilities of using cutting-edge CSS and giving us a peak at the future. That's because with some of this stuff, people are not going to be comfortable putting it into production websites for another 2 years or more.

    I wouldn't hesitate to use this on my own site but I can understand how someone concerned with supporting older browsers and less current desktop's might hesitate on that.

  7. @jaeming

    > However, I think most of what I see on Codepen is more about the possibilities of using cutting-edge CSS and giving us a peak at the future. That's because with some of this stuff, people are not going to be comfortable putting it into production websites for another 2 years or more.

    Completely agree and I commend you for it. Wasn't trying to score points or anything just simply pointing out an observation.

  8. its awesome, Can I have a full script?

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

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