CSS-ing Candy Ghost Buttons
Recently, while looking for some ideas on what to code as I have zero artistic sense so the only thing I can do is find pretty things that other people have come up with and remake them with clean and …
Ana Tudor
on
Articles Tagged
mask
15 Articles
Image Fragmentation Effect With CSS Masks and Custom Properties
Geoff shared this idea of a checkerboard where the tiles disappear one-by-one to reveal an image. In it, an element has a background image, then a CSS Grid layout holds the “tiles” that go from a filled background color to …
Temani Afif
on
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
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 )
Our Learning Partner
Frontend Masters
