All Questions
28
questions
0
votes
1
answer
43
views
HTML and CSS only mask overlay, is it possible?
How to create a CSS-only overlay over images or other HTML elements?
Something like this:
All examples found until now suggest assigning a background and using a mix of either masks or clip-paths ...
- 67
1
vote
0
answers
46
views
Clip image inside of enclosed letters
I'm trying to clip an image inside of a letter/number (in this case 0).
This can ofcourse be hardcoded with a simple clip path, but this will make responsiveness and text size a lot more complicated ...
0
votes
0
answers
50
views
CSS relative clip-path: path() not working (entire bg image not showing), where is the code issue?
I am building a hero element that I'm trying to make each 'piece' link to a different page, and since there is a lot of overlapping have opted for clip-path instead of masking. Here is an image ...
0
votes
0
answers
29
views
How to use svg clipping mask to animate circles?
I want to create circles inside lenses that move inside lenses when slick slider transform.
What's the correct way to do it?
enter image description here
I used svg and clip-path with mask but the ...
1
vote
1
answer
153
views
How can I use clip-path to achieve a text effect on my SVG in the browser?
I want to use clip-path to implement effect like: svg with text clip-path, but open in browser it just display an empty
svg. I wrap the path with <g> tag, then it failed.
<svg xmlns="...
- 13
0
votes
0
answers
82
views
Clip path positioning right edge with absolute values and custom shape (CSS/SVG)
I am facing a problem and hope for help.
In picture 1 you can see the design of my client. This is about the custom shape. The shape must have exactly this curve and the 45 degree angle.
Picture 1 ...
1
vote
1
answer
49
views
Correct tileable pattern at D3.JS / SVG
Having an random set of paths with different dimensions. The task is to set a uniform even pattern on them. By now, it's looks like:
Needs to be
I have played with different preserveAspectRatio ...
- 113
0
votes
1
answer
625
views
Is there a way to cut out an svg path from another svg but leave remaining shape?
I have 2 main svgs one is a LOGO, and the other is a PILL shape I wish to cut out from the logo path. I have them in my index in <SVG> format. 4 letters in the logo needs to have each a cutout ...
- 521
0
votes
0
answers
353
views
Resizing and animating SVG clipPath
i have a SVG that i use as a mask (via clipPath) over an image
my idea was to use the SVG mask as a revealer for the image, by scaling it from 0 to big enouoght to reveal the image
i made this sample
#...
- 444
1
vote
1
answer
2k
views
How to position SVG clip-path using CSS and only clip one edge of clipped element
I am trying to use an SVG mask and the CSS clip-path property to make some "ragged" section dividers on a website.
I need to be able to apply ese "ragged" bottom edges to sections/...
- 27
1
vote
2
answers
1k
views
Reposition and Rescale Image with an SVG Mask [duplicate]
I was messing around with SVG Masks and after reading a few articles and testing some codes for a fancier mask, more than just simple polygons, I came up with this:
<div class="picture">
&...
user753531
1
vote
1
answer
3k
views
Mask Image with SVG Shape and add a Border
Not sure this is possible, so I have a back-up plan (use a background image and :after to mask one of 3x transarent PNGs with the border in the image and use nth-child to change them).
Here's what I'm ...
- 41
1
vote
1
answer
380
views
Exclude multiple rects from a div backdrop background [duplicate]
I have an app where I need to 'highlight' two separate rectangular areas by covering everything else with a half-transparent backdrop.
After some research I though that css clipping/masking could be ...
0
votes
1
answer
741
views
Safari SVG mask render glitch (clip-path)
I'm trying to make an image unveil effect with an SVG mask, where a path with a quite complex geometry is scaled via CSS transforms:
clip-path: url(#aqua-dot-mask);
https://codepen.io/rberneder/...
0
votes
1
answer
123
views
clipPath transform on :focus/:hover for multiple instances of same icon
I have an SVG icon with some masked shapes comprised of:
book-1: masked by clipPath mask-1
book-2: masked by clipPath mask-2
book-3: not masked, no transform required
On :focus / :hover I want mask-...
