Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SVG mask technique over iframe experiment

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #198735
    joepk
    Participant

    I’ve got a little help already and with a simple fix the SVG mask now covers images. But ultimately I want to cover anything that I place behind it. Now it isn’t able to cover iframes because of things that are positioned absolute. See it in action in the codepen

    I’m not sure if there is a simple approach, but it would be great if the mask would just cover anything that is under it.

    There are some cool parallax features around. The one I used is amazing and its called Depthy You can make your own to!

    #199002
    joepk
    Participant

    Is there anyone who has a brilliant solution?

    #199031
    Shikkediel
    Participant

    Now it isn’t able to cover iframes because of things that are positioned absolute.

    Could you elaborate on that? Not sure what the exact issue is. No doubt you’ve realised <foreignObject> isn’t supported in IE (yet)…

    The one I used

    Very nifty indeed (worth clicking the link and having a look)!

    #199075
    joepk
    Participant

    Hi Shikkediel,

    What I mean is that, Position: absolute; content isn’t being covered by the mask.

    But you’re right this technique is a bit messy and not very cross-browser compatible yet. IE is the worst yet again.

    If there is another better way of masking things then i’d love to see it!

    #199094
    Shikkediel
    Participant

    Certainly interesting edgy stuff. But a long (and rather complicated) read up… I’ll keep an eye out at least. But it seems neither approach that would qualify for something like thing, mask and clip-path, is greatly supported yet.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.