Conversation

Notices

1. Embed this notice
   Ana Tudor 🐯 (anatudor@mastodon.social)'s status on Tuesday, 26-Nov-2024 23:50:29 JST Ana Tudor 🐯

   • CodePen

   #tinyCSStip

   Ever want to mask something out of an element, but not cut out blur or box-shadow or a pseudo outside the element's border box?

   Well, subtract whatever you want masked out from a fully opaque layer with `mask-clip` set to `no-clip`!

   mask:
   conic-gradient(red 0 0) no-clip subtract,
   var(--masked-area)

   @codepen demo: https://codepen.io/thebabydino/pen/MYggKre

   #CSS #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

   • Joachim repeated this.
   • Embed this notice
     Ana Tudor 🐯 (anatudor@mastodon.social)'s status on Tuesday, 26-Nov-2024 23:50:29 JST Ana Tudor 🐯

     in reply to

     Also, let me show you something: search result for "mask-clip mdn" vs. when actually going to the MDN page.

     And no, `margin-box` doesn't work.

     #css #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment