Questions tagged [css-mask]
The mask CSS property hides an element (partially or fully) by masking or clipping the image at specific points.
css-mask
98
questions
0
votes
2
answers
59
views
Masking a part of a border
Is it possible to make a div border masked in a specific place like in the picture above?
Some kind of div masks another div without setting a background-color (because the background of a whole site ...
- 11
0
votes
0
answers
20
views
CSS fade works in emulation on desktop, not on actual mobile device
I have created the following mask and tested it by means of the desktop browser's mobile device emulation (from the Developer Tools in Firefox):
.Main
{
position: fixed;
width: ...
- 3,700
1
vote
1
answer
40
views
Creating a wavy border on all sides using CSS
Using this generator I can create the wavy border I'm after on either the top and bottom or left and right, but I'm having trouble combining these masks to create a wavy border all the way around.
Top ...
- 1,940
1
vote
1
answer
54
views
Circle cut out with fully transparent border?
I am working on a project that has a contact-us button. This button requires a status indication. I've read the following article that shows a status indication on a avatar image. The cool thing about ...
- 23
0
votes
1
answer
40
views
CSS Gradients Rendering Incorrectly in Browser?
I'm doing some custom coding in Squarespace. I am having a strange thing happen that I've never seen before. I am trying to add a hard-stop gradient mask to a div (textbox) so that I can create a wavy ...
- 29
0
votes
1
answer
76
views
Clip/mask (remove) top-right image corner with SVG
Is there a (Cross browser (no IE)) way to clip the top right corner of an dynamically sized image with this svg? In the worst case, I can use a fixed aspect ratio, but I prefer it to be as flexible as ...
- 13
0
votes
0
answers
12
views
CSS mask vs. background unexpected ordering [duplicate]
I have observed there is a significant difference in ordering when using CSS background-* vs. mask-*. Here is an example:
<style>
.cover {
position: absolute;
left: 30px;
top: 0;
...
- 870
1
vote
1
answer
44
views
Achieving a smooth blending of gradient in the foreground into the background
I am attempting to create a pure CSS-generated rainbow gradient overlay on top of an underlying background. The goal is to have the rainbow fully opaque at the center and gradually fade to fully ...
- 290
0
votes
1
answer
85
views
Use canvas as background for overlaying elements using mask
I have a full-screen background canvas, I want to draw elements on top of that canvas that act as a mask. So the canvas should only be visible through the overlaying elements.
Here's a picture on what ...
- 501
3
votes
3
answers
145
views
mask cuts out border. Is there anyway to force border to div's shape once it is masked?
So I'm trying to create a responsive frame with inverted corners for my website. I achieved to create the shape of it but once I try to add border to it, -webkit-mask cuts it out. Is there any way to ...
- 31
1
vote
1
answer
76
views
How to Create a Multiple Semi-circle on The Right Side with CSS
How to create multiple half/semi-circle on one side only (check my image below)?
My expected result:
The result:
The code I have tried:
.ticket {
display: inline-block;
width: 500px;
...
- 556
2
votes
1
answer
66
views
Is it possible to combine a linear-gradient and a radial-gradient in mask-image in CSS?
I'm trying to create the following shape:
using the CSS -webkit-mask-image: property. What I have is:
body {
background-image: url("https://picsum.photos/500");
background-size: cover;
...
- 865
1
vote
1
answer
320
views
CSS mask and mask-composite doesn't work in Safari 14
http://hisidi.kr/2023/100/
In this website, I masked circular shaped space at the top and bottom of the screen by using mask and mask-composite.
But in Safari 14, it doesn't work properly(maybe ...
- 11
1
vote
1
answer
95
views
How can I animate cutting an element with CSS?
I'm trying to animate an element being cut like this
but I can't figure out how to do it. I tried doing it with transparent gradient mask and shifting the position, but I couldn't make the element ...
- 163
2
votes
2
answers
262
views
How to mask div boxes with multiple shapes in css only?
I'm a novice in coding and I'm trying to figure out how to mask div boxes with multiple circles along the edge on certain positions to get something like this in the picture. The website is www....
