Search
Extremely Chill Spray Paint Simulator Wants To Be Your Next Power Wash-Style Obsession
1.10.2024
At PAX West, Kotaku got the chance to preview a previously unannounced game which has now officially been revealed to the public as Spray Paint Simulator. If you have played (dozens of hours of) PowerWash Simulator like I have, then you’ll be right at home with Spray Paint Simulator. We got...
CSS Grid and Custom Shapes, Part 3
11.11.2022
After Part 1 and Part 2, I am back with a third article to explore more fancy shapes. Like the previous articles, we are going to combine CSS Grid with clipping and masking to create fancy layouts for image …
CSS Grid and Custom Shapes, Part 3 originally published on CSS-Tricks, which...
What Would it Take to Prevent CSS Tooltips From Overflowing?
12.1.2022
Say you have an elements with CSS tooltips and you’re going to position those tooltips such that it opens up next to the element on hover (or probably better: when clicked/tapped). Next to it where? Above it? What if the …
What Would it Take to Prevent CSS Tooltips From Overflowing?...
Cutouts
16.8.2021
Ahmad Shadeed dug into shape “cutouts” the other day. Imagine a shape with another smaller shape carved out of it. In his typical comprehensive way, Ahmad laid out the situation well—looking at tricky situations that complicate things.
The first thing …
The post Cutouts appeared...
Perfect Tooltips With CSS Clipping and Masking
17.6.2021
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.
Those …
The post Perfect Tooltips With CSS Clipping and Masking appeared...
Painters Tape and Fault Tolerance
9.1.2021
Snipping the top bit of Nicholas C. Zakas’s Top of the Month newsletter (go sign up!), with permission.
One of my favorite things in the world is painters tape (also called masking tape). It seems like something silly: some tape …
The post Painters Tape and Fault Tolerance appeared...
clipPath vs. mask
27.12.2020
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 (the element in SVG, as well as clip-path in CSS) is vector and when it is applied, whatever you...
How to Get Handwriting Animation With Irregular SVG Strokes
11.9.2020
I wanted to do a handwriting animation for calligraphy fonts — the kind where the words animate like they are being written by an invisible pen. Because calligraphy fonts have uneven stroke widths (they actually aren’t even strokes in terms of SVG), it was near impossible to do this sort of thing...
Masking GIFs with other GIFs
3.12.2019
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......
Multi-Million Dollar HTML
30.9.2019
Two stories:
Jason Grigsby finds Chipotle's online ordering form makes use of an input-masking technique that chops up a credit card expiration year making it invalid and thus denying the order. If pattern="\d\d" maxlength="2" was used instead (native browser feature), the browser is smart enough...
Mask Compositing: The Crash Course
2.3.2019
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...