1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Depth of Field Effect?

Discussion in 'HTML & Website Design' started by 7643sfsag6, Jun 14, 2019.

  1. #1
    Hi all,
    Just trying to create a modal that zooms and blurs the background back. Based on avgrund by hakim https://lab.hakim.se/avgrund/
    Now it has nesting modals also with the help of @deathshadow over at codingforums.
    Here is the current state:
    https://jsfiddle.net/postcolonialboy/1jz0q3xk/19/
    Now, what I am trying to do is:
    by clicking the nested modal link, everything should be pushed back again and blurred - like simulating receding layers/depth of field.
    I've attached an image to explain this:
    https://ibb.co/LNB83jm
    Thanks
     
    Solved! View solution.
    7643sfsag6, Jun 14, 2019 IP
  2. #2
    You might be able to layer the :checked part of my implementation to fake it.

    .toggle:checked ~ #content {/* blur + zoom depth 1 */}
    .toggle:checked ~ .toggle:checked ~ #content {/* blur + zoom depth 2 */}
    .toggle:checked ~ .toggle:checked ~ .toggle:checked ~ #content {/* blur + zoom depth 3 */}
    /* etc, etc */

    The amount of blur being based on how many of the underlying checkboxes are out of focus. The problem would be getting the top-most ones to blur the underlying. Nesting could solve this, but it gets really complex, convoluted, and tricky.

    To that end with it already being an ice-skating uphill effect when it comes to accessibility, resulting in pages that are hard to navigate and difficult to read, I would NOT implement such a thing on a website. It's artsy fartsy crap that amounts to throwing code at a page for very little in terms of usability and functionality.
     
    deathshadow, Jun 14, 2019 IP