Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
mask-image

4 Articles
Direct link to the article Creating Realistic Reflections With CSS
filter mask-image reflection

Creating Realistic Reflections With CSS

In design, reflections are stylized mirror images of objects. Even though they are not as popular as shadows, they have their moments — just think about the first time you explored the different font formats in MS Word or PowerPoint: …

Preethi on May 2, 2022
Direct link to the article Perfect Tooltips With CSS Clipping and Masking
clip-path mask-image tooltip

Perfect Tooltips With CSS Clipping and Masking

Clipping and masking have been around for a while now in CSS and even have pretty decent browser support. I recently worked on a project that needed to use a clipping technique for tooltips showing above links in text.…

Louis Hoebregts on Jun 17, 2021
Direct link to the article mask-image
mask mask-image

mask-image

The mask property in CSS allows you to hide parts of an element. For example, if you have a black and white image, you can apply that as a mask and the black parts will force the element to be transparent on that elements. Masks can also match the alpha transparency of the mask image.
Chris Coyier on May 10, 2021
Direct link to the article Flexible Repeating SVG Masks
mask mask-image

Flexible Repeating SVG Masks

Tyler Gaw reminds us that mask-image can repeat, resize, and move just like background-image does, which is fun to combine and play with. I could see it being a fun option for an <hr, like Sara is doing. …

Chris Coyier on Mar 22, 2020

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top