masks.css

[argyleink]

masks using shorthand, could do all kinds of cool stuff with named masks

[Afif13]

are these good ideas for masks or maybe shapes ?
https://twitter.com/ChallengesCss/status/1457656017823703041
https://twitter.com/ChallengesCss/status/1458074304332156944
https://twitter.com/ChallengesCss/status/1460933591240691718

[argyleink]

exactly what i was thinking! how can we package up some of these as like var(--mask-cut-corners-1), var(--mask-cut-corners-2), or var(--mask-scalloped-border-1), etc

i feel like the gradients are made special for the mask use case yeah? but if you have ideas on how to share code between the 2, i'm all ears 🙂 there's def overlap, with circles and squares made with conics n stuff, but the open-props has a lot of nimbleness because there's not a lot of cross dependencies.

[Afif13]

Here is what I see here:

  --mask-cut-size:20px;
  --mask-cut-corner-rounded:radial-gradient(circle var(--mask-cut-size),#0000 99%,#000) 10000% 10000%/99.5% 99.5%;
  --mask-cut-corner-45deg:
         conic-gradient(from calc(45deg/-2 -  45deg) at top  var(--mask-cut-size) left  var(--mask-cut-size),#0000 45deg,#000 0) 0    0/51% 51% no-repeat,
         conic-gradient(from calc(45deg/-2 +  45deg) at top    var(--mask-cut-size) right var(--mask-cut-size),#0000 45deg,#000 0) 100% 0/51% 51% no-repeat,
         conic-gradient(from calc(45deg/-2 - 135deg) at bottom var(--mask-cut-size) left  var(--mask-cut-size),#0000 45deg,#000 0) 0    100%/51% 51% no-repeat,
         conic-gradient(from calc(45deg/-2 + 135deg) at bottom var(--mask-cut-size) right var(--mask-cut-size),#0000 45deg,#000 0) 100% 100%/51% 51% no-repeat;
  --mask-cut-corner-90deg:
         conic-gradient(from calc(90deg/-2 -  45deg) at top  var(--mask-cut-size) left  var(--mask-cut-size),#0000 90deg,#000 0) 0    0/51% 51% no-repeat,
         conic-gradient(from calc(90deg/-2 +  45deg) at top    var(--mask-cut-size) right var(--mask-cut-size),#0000 90deg,#000 0) 100% 0/51% 51% no-repeat,
         conic-gradient(from calc(90deg/-2 - 135deg) at bottom var(--mask-cut-size) left  var(--mask-cut-size),#0000 90deg,#000 0) 0    100%/51% 51% no-repeat,
         conic-gradient(from calc(90deg/-2 + 135deg) at bottom var(--mask-cut-size) right var(--mask-cut-size),#0000 90deg,#000 0) 100% 100%/51% 51% no-repeat;
  --mask-cut-corner-135deg:
         conic-gradient(from calc(135deg/-2 -  45deg) at top  var(--mask-cut-size) left  var(--mask-cut-size),#0000 135deg,#000 0) 0    0/51% 51% no-repeat,
         conic-gradient(from calc(135deg/-2 +  45deg) at top    var(--mask-cut-size) right var(--mask-cut-size),#0000 135deg,#000 0) 100% 0/51% 51% no-repeat,
         conic-gradient(from calc(135deg/-2 - 135deg) at bottom var(--mask-cut-size) left  var(--mask-cut-size),#0000 135deg,#000 0) 0    100%/51% 51% no-repeat,
         conic-gradient(from calc(135deg/-2 + 135deg) at bottom var(--mask-cut-size) right var(--mask-cut-size),#0000 135deg,#000 0) 100% 100%/51% 51% no-repeat;
  --mask-cut-corner-180deg:
         conic-gradient(from calc(180deg/-2 -  45deg) at top  var(--mask-cut-size) left  var(--mask-cut-size),#0000 180deg,#000 0) 0    0/51% 51% no-repeat,
         conic-gradient(from calc(180deg/-2 +  45deg) at top    var(--mask-cut-size) right var(--mask-cut-size),#0000 180deg,#000 0) 100% 0/51% 51% no-repeat,
         conic-gradient(from calc(180deg/-2 - 135deg) at bottom var(--mask-cut-size) left  var(--mask-cut-size),#0000 180deg,#000 0) 0    100%/51% 51% no-repeat,
         conic-gradient(from calc(180deg/-2 + 135deg) at bottom var(--mask-cut-size) right var(--mask-cut-size),#0000 180deg,#000 0) 100% 100%/51% 51% no-repeat;
  --mask-cut-corner-225deg:
         conic-gradient(from calc(225deg/-2 -  45deg) at top  var(--mask-cut-size) left  var(--mask-cut-size),#0000 225deg,#000 0) 0    0/51% 51% no-repeat,
         conic-gradient(from calc(225deg/-2 +  45deg) at top    var(--mask-cut-size) right var(--mask-cut-size),#0000 225deg,#000 0) 100% 0/51% 51% no-repeat,
         conic-gradient(from calc(225deg/-2 - 135deg) at bottom var(--mask-cut-size) left  var(--mask-cut-size),#0000 225deg,#000 0) 0    100%/51% 51% no-repeat,
        conic-gradient(from calc(225deg/-2 + 135deg) at bottom var(--mask-cut-size) right var(--mask-cut-size),#0000 225deg,#000 0) 100% 100%/51% 51% no-repeat;
}

We have the rounded one and the other that are based on the angle of cut + a variable to control the size of the cut that works for all.

Demo: https://codepen.io/t_afif/pen/oNGXmPr

I will not add the rounded border here. I will make it with another collection.

[airen]

This is a great idea, but what would be more practical is to use mask to build UI effects for stamps or coupons! eg.

Very common in the development of e-commerce pages! I prefer corner-shape, or you can use mask to build the corner-shape effect！(via. https://lea.verou.me/2013/03/preview-border-corner-shape-before-implementations/)

[argyleink]

corner-shape will be sooo good for this library! your codepen works just like how the gradients do and is nearly ready to add to the lib. swift work!!

that ticket example is rad.

[Afif13]

For the borders:

* {
  --mask-border-width:20px;
  --mask-rounded-border:
       radial-gradient(farthest-side,#000 98%,#0000) 0 0/var(--mask-border-width) var(--mask-border-width) round,
       linear-gradient(#000 0 0) 50%/calc(100% - var(--mask-border-width)) calc(100% - var(--mask-border-width)) no-repeat;
  --mask-zig-zag-border:
      conic-gradient(from 135deg  at top   ,#000 90deg,#0000 0) 0 0   /calc(2*var(--mask-border-width)) var(--mask-border-width) space no-repeat,
      conic-gradient(from -45deg  at bottom,#000 90deg,#0000 0) 0 100%/calc(2*var(--mask-border-width)) var(--mask-border-width) space no-repeat,
      conic-gradient(from  45deg  at left  ,#000 90deg,#0000 0) 0 0   /var(--mask-border-width) calc(2*var(--mask-border-width)) no-repeat space,
      conic-gradient(from -135deg at right ,#000 90deg,#0000 0) 100% 0/var(--mask-border-width) calc(2*var(--mask-border-width)) no-repeat space,
      linear-gradient(#000 0 0) center/calc(100% - 2*var(--mask-border-width)) calc(100% - 2*var(--mask-border-width)) no-repeat;
}

2 Type of border + a variable to control the size. They are responsive and fit any height/width.

Demo: https://codepen.io/t_afif/pen/GRMJbmW

[argyleink]

very nice. so exciting! thank you =)

want me to ping you when i have a PR ready? you wanna contribute anymore than these great proofs of concept? lemme know how to ensure you're credited for these gems.

[Afif13]

Feel free to do what you think is suitable 🙂
Yes I am gonna add more ideas to the mask and clip section whenever I get a chance 😉 I will let you manage the naming because I am very bad at this and you have better visibility over the whole project to pick good naming

[argyleink]

i'll make sure you're credited all over!

[Afif13]

Here is another idea for the zig-zag border with different angles

* {
  --mask-size:20px;
  --mask-zig-zag-120deg-bottom:
      linear-gradient(#000 0 0) top/100% calc(100% - var(--mask-size)) no-repeat,
      conic-gradient(from -60deg at bottom,#0000,#000 1deg 120deg,#0000 121deg) bottom/calc(3.464*var(--mask-size)) var(--mask-size) repeat-x;
  --mask-zig-zag-120deg-top:
      linear-gradient(#000 0 0) bottom/100% calc(100% - var(--mask-size)) no-repeat,
      conic-gradient(from 120deg at top,#0000,#000 1deg 120deg,#0000 121deg) top/calc(3.464*var(--mask-size)) var(--mask-size) repeat-x;
  --mask-zig-zag-120deg-left:
      linear-gradient(#000 0 0) right/calc(100% - var(--mask-size)) 100% no-repeat,
      conic-gradient(from 30deg at left,#0000,#000 1deg 120deg,#0000 121deg) left/var(--mask-size) calc(3.464*var(--mask-size)) repeat-y;
  --mask-zig-zag-120deg-right:
      linear-gradient(#000 0 0) left/calc(100% - var(--mask-size)) 100% no-repeat,
      conic-gradient(from -150deg at right,#0000,#000 1deg 120deg,#0000 121deg) right/var(--mask-size) calc(3.464*var(--mask-size)) repeat-y;
  --mask-zig-zag-120deg-horizontal:
      linear-gradient(#000 0 0) center/calc(100% - 2*var(--mask-size)) 100% no-repeat,
      conic-gradient(from 30deg at left,#0000,#000 1deg 120deg,#0000 121deg) left/var(--mask-size) calc(3.464*var(--mask-size)) repeat-y,
      conic-gradient(from -150deg at right,#0000,#000 1deg 120deg,#0000 121deg) right/var(--mask-size) calc(3.464*var(--mask-size)) repeat-y;
  --mask-zig-zag-120deg-vertical:
      linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--mask-size)) no-repeat,
      conic-gradient(from 120deg at top,#0000,#000 1deg 120deg,#0000 121deg) top/calc(3.464*var(--mask-size)) var(--mask-size) repeat-x,
      conic-gradient(from -60deg at bottom,#0000,#000 1deg 120deg,#0000 121deg) bottom/calc(3.464*var(--mask-size)) var(--mask-size) repeat-x;
  --mask-zig-zag-90deg-top:
      linear-gradient(#000 0 0) bottom/100% calc(100% - var(--mask-size)) no-repeat,
      conic-gradient(from 135deg at top,#0000,#000 1deg 90deg,#0000 91deg) top/calc(2*var(--mask-size)) var(--mask-size) repeat-x;
  --mask-zig-zag-90deg-bottom:
      linear-gradient(#000 0 0) top/100% calc(100% - var(--mask-size)) no-repeat,
      conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/calc(2*var(--mask-size)) var(--mask-size) repeat-x;
  --mask-zig-zag-90deg-left:
      linear-gradient(#000 0 0) right/calc(100% - var(--mask-size)) 100% no-repeat,
      conic-gradient(from 45deg at left,#0000,#000 1deg 90deg,#0000 91deg) left/var(--mask-size) calc(2*var(--mask-size)) repeat-y;
  --mask-zig-zag-90deg-right:
      linear-gradient(#000 0 0) left/calc(100% - var(--mask-size)) 100% no-repeat,
      conic-gradient(from -135deg at right,#0000,#000 1deg 90deg,#0000 91deg) right/var(--mask-size) calc(2*var(--mask-size)) repeat-y;
  --mask-zig-zag-90deg-horizontal:
      linear-gradient(#000 0 0) center/calc(100% - 2*var(--mask-size)) 100% no-repeat,
      conic-gradient(from 45deg at left,#0000,#000 1deg 90deg,#0000 91deg) left/var(--mask-size) calc(2*var(--mask-size)) repeat-y,
      conic-gradient(from -135deg at right,#0000,#000 1deg 90deg,#0000 91deg) right/var(--mask-size) calc(2*var(--mask-size)) repeat-y;
  --mask-zig-zag-90deg-vertical:
      linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--mask-size)) no-repeat,
      conic-gradient(from 135deg at top,#0000,#000 1deg 90deg,#0000 91deg) top/calc(2*var(--mask-size)) var(--mask-size) repeat-x,
      conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/calc(2*var(--mask-size)) var(--mask-size) repeat-x;
  --mask-zig-zag-60deg-top:
      linear-gradient(#000 0 0) bottom/100% calc(100% - var(--mask-size)) no-repeat,
      conic-gradient(from 150deg at top,#0000,#000 1deg 60deg,#0000 61deg) top/calc(1.1547*var(--mask-size)) var(--mask-size) repeat-x;
  --mask-zig-zag-60deg-bottom:
      linear-gradient(#000 0 0) top/100% calc(100% - var(--mask-size)) no-repeat,
      conic-gradient(from -30deg at bottom,#0000,#000 1deg 60deg,#0000 61deg) bottom/calc(1.1547*var(--mask-size)) var(--mask-size) repeat-x;
  --mask-zig-zag-60deg-left:
      linear-gradient(#000 0 0) right/calc(100% - var(--mask-size)) 100% no-repeat,
      conic-gradient(from 60deg at left,#0000,#000 1deg 60deg,#0000 61deg) left/var(--mask-size) calc(1.1547*var(--mask-size)) repeat-y;
  --mask-zig-zag-60deg-right:
      linear-gradient(#000 0 0) left/calc(100% - var(--mask-size)) 100% no-repeat,
      conic-gradient(from -120deg at right,#0000,#000 1deg 60deg,#0000 61deg) right/var(--mask-size) calc(1.1547*var(--mask-size)) repeat-y;
  --mask-zig-zag-60deg-horizontal:
      linear-gradient(#000 0 0) center/calc(100% - 2*var(--mask-size)) 100% no-repeat,
      conic-gradient(from 60deg at left,#0000,#000 1deg 60deg,#0000 61deg) left/var(--mask-size) calc(1.1547*var(--mask-size)) repeat-y,
      conic-gradient(from -120deg at right,#0000,#000 1deg 60deg,#0000 61deg) right/var(--mask-size) calc(1.1547*var(--mask-size)) repeat-y;
  --mask-zig-zag-60deg-vertical:
      linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--mask-size)) no-repeat,
      conic-gradient(from 150deg at top,#0000,#000 1deg 60deg,#0000 61deg) top/calc(1.1547*var(--mask-size)) var(--mask-size) repeat-x,
      conic-gradient(from -30deg at bottom,#0000,#000 1deg 60deg,#0000 61deg) bottom/calc(1.1547*var(--mask-size)) var(--mask-size) repeat-x;
  --mask-zig-zag:
      conic-gradient(from 135deg  at top   ,#0000,#000 1deg 90deg,#0000 91deg) 0 0   /calc(2*var(--mask-size)) var(--mask-size) space no-repeat,
      conic-gradient(from -45deg  at bottom,#0000,#000 1deg 90deg,#0000 91deg) 0 100%/calc(2*var(--mask-size)) var(--mask-size) space no-repeat,
      conic-gradient(from  45deg  at left  ,#0000,#000 1deg 90deg,#0000 91deg) 0 0   /var(--mask-size) calc(2*var(--mask-size)) no-repeat space,
      conic-gradient(from -135deg at right ,#0000,#000 1deg 90deg,#0000 91deg) 100% 0/var(--mask-size) calc(2*var(--mask-size)) no-repeat space,
      linear-gradient(#000 0 0) center/calc(100% - 2*var(--mask-size)) calc(100% - 2*var(--mask-size)) no-repeat;
}

Demo: https://codepen.io/t_afif/pen/XWemxmg

We still don't have support for trigonometric functions otherwise I can also make the angle a variable. I need tan() to do a calculation based on the angle.

below the generic version to generate for other angles:

{
  --mask-zig-zag-{X}-top:
      linear-gradient(#000 0 0) bottom/100% calc(100% - var(--mask-size)) no-repeat,
      conic-gradient(from [180deg - X/2] at top,#0000,#000 1deg X,#0000 [X+1deg]) top/calc([2xtan(X/2)]*var(--mask-size)) var(--mask-size) repeat-x;
  --mask-zig-zag-{X}-bottom:
      linear-gradient(#000 0 0) top/100% calc(100% - var(--mask-size)) no-repeat,
      conic-gradient(from [-X/2] at bottom,#0000,#000 1deg X,#0000 [X+1deg]) bottom/calc([2xtan(X/2)]*var(--mask-size)) var(--mask-size) repeat-x;
   --mask-zig-zag-{X}-vertical:
      linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--mask-size)) no-repeat,
      conic-gradient(from [180deg - X/2] at top,#0000,#000 1deg X,#0000 [X+1deg]) top/calc([2xtan(X/2)]*var(--mask-size)) var(--mask-size) repeat-x
      conic-gradient(from [-X/2] at bottom,#0000,#000 1deg X,#0000 [X+1deg]) bottom/calc([2xtan(X/2)]*var(--mask-size)) var(--mask-size) repeat-x;
   --mask-zig-zag-{X}-left:
      linear-gradient(#000 0 0) right/calc(100% - var(--mask-size)) 100%  no-repeat,
      conic-gradient(from [90deg - X/2] at left,#0000,#000 1deg X,#0000 [X+1deg]) left/var(--mask-size) calc([2xtan(X/2)]*var(--mask-size))  repeat-y;
   --mask-zig-zag-{X}-right:
      linear-gradient(#000 0 0) left/calc(100% - var(--mask-size)) 100%  no-repeat,
      conic-gradient(from [-90deg - X/2] at right,#0000,#000 1deg X,#0000 [X+1deg]) right/var(--mask-size) calc([2xtan(X/2)]*var(--mask-size))  repeat-y;
  --mask-zig-zag-{X}-horizontal:
      linear-gradient(#000 0 0) center/calc(100% - 2*var(--mask-size)) 100%  no-repeat,
      conic-gradient(from [-90deg - X/2] at right,#0000,#000 1deg X,#0000 [X+1deg]) right/var(--mask-size) calc([2xtan(X/2)]*var(--mask-size))  repeat-y,
      conic-gradient(from [90deg - X/2] at left,#0000,#000 1deg X,#0000 [X+1deg]) left/var(--mask-size) calc([2xtan(X/2)]*var(--mask-size))  repeat-y;
}

The variable to control the size can be generalized for all the masks I have done so far. we need a good generic name for it.

For the all sides version, only the 90deg can give a good result and be responsive so I am not specifying any angle. You will also notice the use of "space" in the repetition. You can try "round" to get a different result that will impact the responsive part. We can probably make it a variable as well or we decide to keep only one version (I think "space" give the best result)

[argyleink]

i def think having left and right completes the offering 🙁

i like the shared --mask-size, gradients have that with the linear angle. not a perfect solution, but keeps usage easier.

[Afif13]

I have edited the above to include all the possible combination (the demo is also updated: https://codepen.io/t_afif/pen/XWemxmg). Note that for all the sides only the 90deg angle will give a good result hence there is no angle specified in the name since we don't have other variations

[Afif13]

Similar to the zig-zag border, here are more ideas with rounded shapes:

* {
  --mask-size:20px;
  --mask-rounded-1-bottom:
      linear-gradient(#000 0 0) top/100% calc(100% - var(--mask-size)) no-repeat,
      radial-gradient(circle farthest-side,#0000 97%,#000) 50% calc(100% - var(--mask-size))/calc(1.9*var(--mask-size)) calc(2*var(--mask-size));
  --mask-rounded-1-top:
      linear-gradient(#000 0 0) bottom/100% calc(100% - var(--mask-size)) no-repeat,
      radial-gradient(circle farthest-side,#0000 97%,#000) 50% var(--mask-size)/calc(1.9*var(--mask-size)) calc(2*var(--mask-size));
  --mask-rounded-1-vertical:
      linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--mask-size)) no-repeat,
      radial-gradient(circle farthest-side at top,#0000 97%,#000) top/calc(1.9*var(--mask-size)) var(--mask-size) repeat-x,
      radial-gradient(circle farthest-side at bottom,#0000 97%,#000) bottom/calc(1.9*var(--mask-size)) var(--mask-size) repeat-x;
  --mask-rounded-1-left:
      linear-gradient(#000 0 0) right/calc(100% - var(--mask-size)) 100% no-repeat,
      radial-gradient(circle farthest-side,#0000 97%,#000) var(--mask-size) 50%/calc(2*var(--mask-size)) calc(1.9*var(--mask-size));
  --mask-rounded-1-right:
      linear-gradient(#000 0 0) left/calc(100% - var(--mask-size)) 100% no-repeat,
      radial-gradient(circle farthest-side,#0000 97%,#000) calc(100% - var(--mask-size)) 50%/calc(2*var(--mask-size)) calc(1.9*var(--mask-size));
  --mask-rounded-1-horizontal:
      linear-gradient(#000 0 0) center/calc(100% - 2*var(--mask-size)) 100% no-repeat,
      radial-gradient(circle farthest-side at left,#0000 97%,#000) left/var(--mask-size) calc(1.9*var(--mask-size)) repeat-y,
    radial-gradient(circle farthest-side at right,#0000 97%,#000) right/var(--mask-size) calc(1.9*var(--mask-size)) repeat-y;
  --mask-rounded-2-bottom:
      linear-gradient(#000 0 0) top/100% calc(100% - var(--mask-size)) no-repeat,
      radial-gradient(circle farthest-side at top,#000 97%,#0000) bottom/calc(1.9*var(--mask-size)) var(--mask-size) repeat-x;
  --mask-rounded-2-top:
      linear-gradient(#000 0 0) bottom/100% calc(100% - var(--mask-size)) no-repeat,
      radial-gradient(circle farthest-side at bottom,#000 97%,#0000) top/calc(1.9*var(--mask-size)) var(--mask-size) repeat-x;
  --mask-rounded-2-vertical:
      linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--mask-size)) no-repeat,
      radial-gradient(circle farthest-side,#000 97%,#0000) 0/calc(1.9*var(--mask-size)) calc(2*var(--mask-size)) repeat space;
  --mask-rounded-2-left:
      linear-gradient(#000 0 0) right/calc(100% - var(--mask-size)) 100% no-repeat,
      radial-gradient(circle farthest-side at right,#000 97%,#0000) left/var(--mask-size) calc(1.9*var(--mask-size)) repeat-y;
  --mask-rounded-2-right:
      linear-gradient(#000 0 0) left/calc(100% - var(--mask-size)) 100% no-repeat,
      radial-gradient(circle farthest-side at left,#000 97%,#0000) right/var(--mask-size) calc(1.9*var(--mask-size)) repeat-y;
  --mask-rounded-2-horizontal:
      linear-gradient(#000 0 0) center/calc(100% - 2*var(--mask-size)) 100% no-repeat,
      radial-gradient(circle farthest-side,#000 97%,#0000) 0/calc(2*var(--mask-size)) calc(1.9*var(--mask-size)) space repeat;
  --mask-rounded-3-bottom:
      linear-gradient(#000 0 0) top/100% calc(100% - 2*var(--mask-size)) no-repeat,      
      radial-gradient(circle farthest-side at bottom,#0000 97%,#000) 50% calc(100% - var(--mask-size))/calc(2*var(--mask-size)) var(--mask-size) repeat-x,
      radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - var(--mask-size)) 99%/calc(2*2*var(--mask-size)) calc(2*var(--mask-size)) repeat-x;
  --mask-rounded-3-top:
      linear-gradient(#000 0 0) bottom/100% calc(100% - 2*var(--mask-size)) no-repeat,      
      radial-gradient(circle farthest-side at top,#0000 97%,#000) 50% var(--mask-size)/calc(2*var(--mask-size)) var(--mask-size) repeat-x,
      radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - var(--mask-size)) 1%/calc(4*var(--mask-size)) calc(2*var(--mask-size)) repeat-x;
  --mask-rounded-3-vertical:
      linear-gradient(#000 0 0) center/100% calc(100% - 4*var(--mask-size)) no-repeat,      
      radial-gradient(circle farthest-side at top,#0000 97%,#000) 50% var(--mask-size)/calc(2*var(--mask-size)) var(--mask-size) repeat-x,
      radial-gradient(circle farthest-side at bottom,#0000 97%,#000) 50% calc(100% - var(--mask-size))/calc(2*var(--mask-size)) var(--mask-size) repeat-x,
      radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - var(--mask-size)) 1%/calc(4*var(--mask-size)) calc(2*var(--mask-size)) repeat-x,
      radial-gradient(circle closest-side at 25% 50%,#000 97%,#0000) calc(50% - 3*var(--mask-size)) 99%/calc(4*var(--mask-size)) calc(2*var(--mask-size)) repeat-x;
  --mask-rounded-3-left:
      linear-gradient(#000 0 0) right/calc(100% - 2*var(--mask-size)) 100% no-repeat,      
      radial-gradient(circle farthest-side at left,#0000 97%,#000) var(--mask-size) 50%/var(--mask-size) calc(2*var(--mask-size)) repeat-y,
      radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 1% calc(50% - var(--mask-size))/calc(2*var(--mask-size)) calc(4*var(--mask-size)) repeat-y;
  --mask-rounded-3-right:
      linear-gradient(#000 0 0) left/calc(100% - 2*var(--mask-size)) 100% no-repeat,      
      radial-gradient(circle farthest-side at right,#0000 97%,#000) calc(100% - var(--mask-size)) 50%/var(--mask-size) calc(2*var(--mask-size)) repeat-y,
      radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 99% calc(50% - var(--mask-size))/calc(2*var(--mask-size)) calc(4*var(--mask-size)) repeat-y;
  --mask-rounded-3-horizontal:
      linear-gradient(#000 0 0) center/calc(100% - 4*var(--mask-size)) 100% no-repeat,      
      radial-gradient(circle farthest-side at left,#0000 97%,#000) var(--mask-size) 50%/var(--mask-size) calc(2*var(--mask-size)) repeat-y,  
      radial-gradient(circle farthest-side at right,#0000 97%,#000) calc(100% - var(--mask-size)) 50%/var(--mask-size) calc(2*var(--mask-size)) repeat-y,
      radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 1% calc(50% - var(--mask-size))/calc(2*var(--mask-size)) calc(4*var(--mask-size)) repeat-y,
      radial-gradient(circle closest-side at 50% 25%,#000 97%,#0000) 99% calc(50% - 3*var(--mask-size))/calc(2*var(--mask-size)) calc(4*var(--mask-size)) repeat-y;
  --mask-rounded:
      radial-gradient(farthest-side,#000 97%,#0000) 0 0/var(--mask-size) var(--mask-size) round,
      linear-gradient(#000 0 0) 50%/calc(100% - var(--mask-size)) calc(100% - var(--mask-size)) no-repeat;
}

Always the same variable to control the size.

Demo: https://codepen.io/t_afif/pen/mdBezOg

[argyleink]

beautiful

.box:nth-child(1) {-webkit-mask:var(--mask-rounded-1-bottom)}
.box:nth-child(2) {-webkit-mask:var(--mask-rounded-1-top)}
.box:nth-child(3) {-webkit-mask:var(--mask-rounded-2-bottom)}
.box:nth-child(4) {-webkit-mask:var(--mask-rounded-2-top)}
.box:nth-child(5) {-webkit-mask:var(--mask-rounded-3-bottom);--mask-size:10px}
.box:nth-child(6) {-webkit-mask:var(--mask-rounded-3-top);--mask-size:20px}

[Afif13]

I have also edited the above to include all the variations. Like with zig-zag, the all sides can only have one variation. All the other won't give a good result (at least not with a single variable). In the future, when mask-composite will have more support on Chrome I will be able to include it in the shorthand version and work on more variations.

[Afif13]

More ideas this time for fading effects:

* {
  --mask-fade-distance:80px; /* 100% if we want full fade (we can go beyond as well) */
  --mask-fade-opacity:10%; /* from 0% to 100%*/
  --mask-fade:linear-gradient(rgb(0 0 0/var(--mask-fade-opacity)) 0 0);
  --mask-fade-bottom:linear-gradient(to top,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 var(--mask-fade-distance));
  --mask-fade-top:linear-gradient(to bottom,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 var(--mask-fade-distance));
  --mask-fade-left:linear-gradient(to right,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 var(--mask-fade-distance));
  --mask-fade-right:linear-gradient(to left,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 var(--mask-fade-distance));
  --mask-fade-vertical:linear-gradient(rgb(0 0 0/var(--mask-fade-opacity)) ,#000 min(50%,var(--mask-fade-distance)) calc(100% - var(--mask-fade-distance)),rgb(0 0 0/var(--mask-fade-opacity)));
  --mask-fade-horizontal:linear-gradient(90deg,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 min(50%,var(--mask-fade-distance)) calc(100% - var(--mask-fade-distance)),rgb(0 0 0/var(--mask-fade-opacity)));
  --mask-fade-radial:radial-gradient(farthest-side,#000 calc(100% - var(--mask-fade-distance)),rgb(0 0 0/var(--mask-fade-opacity)));
  --mask-fade-bottom-right:linear-gradient(to top left,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 var(--mask-fade-distance));
  --mask-fade-bottom-left:linear-gradient(to top right,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 var(--mask-fade-distance));
  --mask-fade-top-left:linear-gradient(to bottom right,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 var(--mask-fade-distance));
  --mask-fade-top-right:linear-gradient(to bottom left,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 var(--mask-fade-distance));
  --mask-fade-diagonal-1:linear-gradient(to top left,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 min(50%,var(--mask-fade-distance)) calc(100% - var(--mask-fade-distance)),rgb(0 0 0/var(--mask-fade-opacity)));
  --mask-fade-diagonal-2:linear-gradient(to top right,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 min(50%,var(--mask-fade-distance)) calc(100% - var(--mask-fade-distance)),rgb(0 0 0/var(--mask-fade-opacity)));
  --mask-fade-diagonal-3:
    linear-gradient(to bottom right,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 var(--mask-fade-distance)) top    left /50.1% 50.1% no-repeat,
    linear-gradient(to bottom left ,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 var(--mask-fade-distance)) top    right/50.1% 50.1% no-repeat,
    linear-gradient(to top    right,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 var(--mask-fade-distance)) bottom left /50.1% 50.1% no-repeat,
    linear-gradient(to top    left ,rgb(0 0 0/var(--mask-fade-opacity)) ,#000 var(--mask-fade-distance)) bottom right/50.1% 50.1% no-repeat;
}

One variable will control the distance (can be pixel or percentage) and another one will control the opacity (0% = transparent, 100% = opaque). I am missing one variation (fading from from top/bottom/left/right at the same) because it requires mask composite. We will add later when we have better support.

Demo: https://codepen.io/t_afif/pen/poWjMem

[argyleink]

nice, these are great!

[argyleink]

adding this here too https://codepen.io/t_afif/pen/abyEmgj?editors=1100

[equinusocio]

Do masks should also use the shape-outside property to properly align content?

[Afif13]

What about adding the border-only version of the cut corner masks?

Here is a demo: https://codepen.io/t_afif/pen/QWmBBmb/067ad16a04211f5fa644dbcd36e312ad

[argyleink]

great suggestion! could offer 3 like we did with the others, but these ones have a combination of border size and cut size. maybe the 3 would scale together then? thin and small cut, medium and medium cut, large and large cut?

this is definitely where your generators are more helpful then prebaked props AAAANND using custom properties like mixins can be helpful (which Open Props is trying to not do for simplification purposes).

i'm a little torn, like they seem like an obvious addition but maybe they're too specific and wont get used? i can ask around!

[Afif13]

Yes I agree. Masks in general are still not widely used and these look too specific. Probably the angled one is a bit famous because such request is always asked in Stack Overflow. People always want to cut corner (like we already did) and some of them want the border only version.

Anyway, I let you decide 👍 I will put all my ideas here and I let you do the selection.

[Afif13]

Here is another idea of concept for tooltip/speech bubble with rounded corners: https://codepen.io/t_afif/pen/mdxzwQj/01209e3c27191827eac5e28b9f2f806d

We can have 3 variations for each case based on the radius (--tooltip-{top,left,right,bottom}-{1,2,3}). We can adjust the arrow part to have a fixed design so we don't need to bother making it dynamic (actually I have used a random configuration to show the trick).

I made them in a way that we can control the size of the arrow shape using border so we simply adjust the border-thickness for each direction to increase the size.

We can keep the version without radius in the clips.css (#70) as clip-path can give a better code in this case.

[argyleink]

nice, could definitely see these being handy and a nice import option 🤘🏻

The 3 radii we choose could come from the radius props already included, so there's consistency there. I like the usage of border-width for customizing the arrow part, cool work! Since these are nearly drop in and go, we'll just need to make sure the docsite spells it all out well.

@import "open-props/masks/tooltips";

.tooltip {
  padding: var(--size-5);
  -webkit-mask: var(--mask-tooltip-bottom-2);
  border: var(--border-size-5) solid transparent;
}

that def is cool and fits, super handy so folks dont have to make pseudo element triangles that always have a potential for a thin line to appear between the edge.

[Afif13]

Exactly! no pseudo element as the whole tooltip can also be the pseudo element.

I will try to play with the arrow to find the best design that fits all the size but maybe we can start with the basic one like below? Centered with a fixed angle.

I let you decide about that part, everything else should be straightforward 👍

[argyleink]

agree that a straight basic triangle arrow is the best to start with 👍🏻

[Afif13]

Ok here is the final code* (not really final because I will optimize it a ton of time later 😅)

  --r: 1rem; /* control the radius */
  
  --tooltip-top:
    conic-gradient(from 150deg at top,#0000,#000 1deg 60deg,#0000 61deg) top/100% 50% no-repeat,
    conic-gradient(at calc(2*var(--r)) calc(2*var(--r)),#000 75%,#0000 0) calc(-1*var(--r)) calc(-1*var(--r)) padding-box,
    radial-gradient(50% 50%,#000 98%,#0000) 0 0/calc(2*var(--r)) calc(2*var(--r)) space padding-box;
  --tooltip-bottom:
    conic-gradient(from -30deg at bottom,#0000,#000 1deg 60deg,#0000 61deg) bottom /100% 50% no-repeat,
    conic-gradient(at calc(2*var(--r)) calc(2*var(--r)),#000 75%,#0000 0)  calc(-1*var(--r)) calc(-1*var(--r)) padding-box,
    radial-gradient(50% 50%,#000 98%,#0000)  0 0/calc(2*var(--r)) calc(2*var(--r)) space padding-box;
  --tooltip-left:
    conic-gradient(from 60deg at left,#0000,#000 1deg 60deg,#0000 61deg) left   /50% 100% no-repeat,
    conic-gradient(at calc(2*var(--r)) calc(2*var(--r)),#000 75%,#0000 0) calc(-1*var(--r)) calc(-1*var(--r)) padding-box,
    radial-gradient(50% 50%,#000 98%,#0000)  0 0/calc(2*var(--r)) calc(2*var(--r)) space padding-box;
  --tooltip-right:
    conic-gradient(from -120deg at right,#0000,#000 1deg 60deg,#0000 61deg) right  /50% 100% no-repeat,
    conic-gradient(at calc(2*var(--r)) calc(2*var(--r)),#000 75%,#0000 0) calc(-1*var(--r)) calc(-1*var(--r)) padding-box,
    radial-gradient(50% 50%,#000 98%,#0000)  0 0/calc(2*var(--r)) calc(2*var(--r)) space padding-box;
}

I let you update the name and generate the different variation based on the radii you want to consider

The demo is also updated: https://codepen.io/t_afif/pen/mdxzwQj/01209e3c27191827eac5e28b9f2f806d?editors=1100

You will notice that the only difference between all of them is the first conic-gradient that will cover all the element area (including the border that's why we can control it with border). The other gradients will cover only the padding area. To optimize the file size we can use an intermediate variable to avoid the repetition.

Something like below

  --r: 1rem; /* control the radius */
  
  --_tooltip:
    conic-gradient(at calc(2*var(--r)) calc(2*var(--r)),#000 75%,#0000 0) calc(-1*var(--r)) calc(-1*var(--r)) padding-box,
    radial-gradient(50% 50%,#000 98%,#0000) 0 0/calc(2*var(--r)) calc(2*var(--r)) space padding-box;
  --_tooltip_g: #0000,#000 1deg 60deg,#0000 61deg;
  --tooltip-top:
    conic-gradient(from 150deg at top, var(--_tooltip_g)) top/100% 50% no-repeat,var(--_tooltip);
  --tooltip-bottom:
    conic-gradient(from -30deg at bottom,  var(--_tooltip_g)) bottom /100% 50% no-repeat,var(--_tooltip);
  --tooltip-left:
    conic-gradient(from 60deg at left,  var(--_tooltip_g)) left   /50% 100% no-repeat,var(--_tooltip);
  --tooltip-right:
    conic-gradient(from -120deg at right,  var(--_tooltip_g)) right  /50% 100% no-repeat,var(--_tooltip);
}

[Afif13]

Here is another idea for speech bubble: https://twitter.com/ChallengesCss/status/1560221299527614465
I think such design is very common and fits Open Props.

Like the previous one, we can have variation based on the radius and we have a fixed size tail (or make it variable as well). This time we cannot control it with border but the border width need to match the tail size.

[argyleink]

nice, a very cool alternative style 👍🏻
i'll work to make versions that look like this variant too when I port the other tooltip mask work ❤️

[Afif13]

I will add a variant of the "Drips" mask that we can call "Waves". Actually the Drips where a particular case of waves (the easiest one) but I worked on the Math to be able to control the curvature.

This was the subject of my last article: https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/ and my generator: https://css-generators.com/wavy-shapes/

There are a lof of configuration but you can pick one value for the curvature you find suitable and we will use a fixed size like we did with all the others.

Here is a demo as an example: https://codepen.io/t_afif/pen/wvjENpZ/88af8b7e57130a0a175b08499e472306?editors=1100

[argyleink]

very cool, definitely worthy of an addition to the current set 🤘🏻

[Afif13]

Adding another generator for flower shapes: https://css-generators.com/flower-shapes/

Now that the mask is well supported without prefixed version, we can do more complex shapes as we can include the mask-composite in the shorthand version and easily extra the whole value as a custom property.

Some rounded triangles here as well: https://css-generators.com/triangle-shapes/

[argyleink]

super useful work