Articles Tagged mask

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 place it on top of a monochrome one:



See the Pen
Masking gifs with other gifs... (svg masking is cool) by Cassie Evans (@cassie-codes)
on CodePen.

Considering I’ve never done anything with SVG masks before, I … Read article

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.… Read article

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 Bible Project’s website. They make really cool animations, and I mean, really cool animations.… Read article

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 CSS, I learned about a property that had previously been completely unknown to me: mask-composite.

As this is not a widely used property, I couldn't find any comprehensive resources on this topic. So, as I began to use … Read article

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 clipping. We’re going to take things a step further in this post and look at different examples, discuss alternative techniques, and consider how to approach our work to be cross-browser compatible.… Read article

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!

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 our one HTML element has some transparent parts), no JavaScript. What would you think that involves?… Read article

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.

Knockout text is a technique where words are clipped out of an element and reveal the background. In other words, you only see the background because the letters are knocking out holes. It’s appealing because it opens up typographic styles that we don’t get out of traditional CSS properties, like color.

While we’ve seen a number of ways to accomplish knockout text in the past, there are some modern CSS properties we can use now and even enhance the … Read article

I was recently doing some client work where I used both <clippath></clippath>s and <mask></mask>s in SVG to hide and show content for animation. When I started this project, I thought I knew all of the reasons to use one over the other. But, as tends to happen, working closely with something reveals idiosyncrasies. In this post, we'll go over some of these details so that you can get productive as soon as possible.… Read article