clipPath vs. mask
These things are so similar, I find it hard to keep them straight. This is a nice little explanation from viewBox (what a cool name and URL, I hope they keep it up).
The big thing is that clipPath…
Shared by
Chris Coyier
on
Articles Tagged
mask
13 Articles
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
(Updated on )
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. …
Shared by
Chris Coyier
on
Masking GIFs with other GIFs
The other day, Cassie Evans tweeted a really neat trick that I’ve never seen before: using SVG to mask one GIF on top of another. The effect is quite lovely, especially if you happen to grab a colorful GIF and …
Robin Rendle
on
The Amazingly Useful Tools from Yoksel
I find myself web searching for some tool by Yoksel at least every month. I figured I’d list out some of my favorites here in case you aren’t aware of them.…
Chris Coyier
on
Weaving One Element Over and Under Another Element
In this post, we’re going to use CSS superpowers to create a visual effect where two elements overlap and weave together. The epiphany for this design came during a short burst of spiritual inquisitiveness where I ended up at The …
Preethi
on
Mask Compositing: The Crash Course
At the start of 2018, as I was starting to go a bit deeper into CSS gradient masking in order to create interesting visuals one would think are impossible otherwise with just a single element and a tiny bit of …
Ana Tudor
on
Using CSS Clip Path to Create Interactive Effects, Part II
This is a follow up to my previous post looking into clip paths. Last time around, we dug into the fundamentals of clipping and how to get started. We looked at some ideas to exemplify what we can do with …
1 Element CSS Rainbow Gradient Infinity
I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise. The gradient doesn't look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let's see how I did that!
Ana Tudor
on
(Updated on )
1 HTML Element + 5 CSS Properties = Magic!
Let’s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that’s there just to make clear that …
Ana Tudor
on
(Updated on )
Scooped Corners in 2018
When I saw Chris' article on notched boxes, I remembered that I got a challenge a while ago to CSS a design like it, but with rounded, scooped corners instead. So, let's see how we can do it that way instead and expand it to multiple corners while being mindful of browser support.
Ana Tudor
on
(Updated on )
Our Learning Partner
Frontend Masters
