I am very new to html5 css3, I have done some tests yesterday with clip-path, and now I want to play with masks.
I want to create an SVG mask and use it for a simple html img.
I have looked on the codepen link of this article, https://css-tricks.com/clipping-masking-css/, codepen does not render the “mask of HTML element” correctly either.
I have tried mask-image (not sure to understand the difference between mask and mask-image), I tried with or without -webkit- prefix, I tried with mask-type=luminance… no luck so far.
Can you tell me what I did wrong?
More generally, I used to do some flash, and I want to convert this existing website into a full html5/css3 one: http://www.obscures.net
On this website, I define:
– one element always visible following the mouse pointer.
– a mask with gradient and blur filter, always following the mouse pointer.
– an image masked by the previous mask.
– on top of that, the mouse clic is not captured by the first 2 elements.
My first step in html is to understand how to mask an image. Am I going in the right direction, or will I have to code everything using canvas stuff?
Viewing 1 post (of 1 total)
The forum ‘CSS’ is closed to new topics and replies.