Matthew Morete @matthewmorete.com · 10hThe part I think is particular cool, is the PNG mask is wrapped in an SVG, which lets you apply CSS to it! In this case image-rendering:pixelated, without it the mask would be blurry 111
Reposted by Matthew MoreteCodePen @codepen.io · 11h"Pixel Dissolve Mask Generator" by Matthew Morete codepen.io/editor/matth... + a very cool website! matthewmorete.com 1102
Matthew Morete @matthewmorete.com · 26/09/2026I'm maybe an outlier in that if the CSS fallback produces the same result, I just do the fallback. I mostly save @supports for progressive enhancement where I'd do things differently based on if it's available or not. And I'm not a good enough developer to know much about tree shaking 😅 020
Matthew Morete @matthewmorete.com · 26/09/2026I think a lot people would find progress() easier to understand, and progress + the same atan2 fallback has the exact same browser support. Progress() has better support than the division 110
Matthew Morete @matthewmorete.com · 26/09/2026I'm just talking about the breakpoints, not the font-size values. I think the breakpoints should always be written in pixels anyway 000
Matthew Morete @matthewmorete.com · 26/09/2026Writing the division and @support is more code than needed though. We're already creating a fallback for progress. I dont want to create a 3 tier system of supports progress/supports division/everything else, when we could just do 2 tiers and be done 100
Matthew Morete @matthewmorete.com · 26/09/2026We have to work around the browser inconsistencies though? The whole reason we register the values is because the browser will convert them to like units. But since we know what those units will be, px in this case, we can skip registering more than we need too if we are also using pixels. 100
Matthew Morete @matthewmorete.com · 26/09/2026Yeah it does support unit divison but not mixed unit atan2. Where as firefox supports mixed unit atan2 but not unit divison. I think registering non-px values and using atan2 is the least code for a cross browser solution. 100
Matthew Morete @matthewmorete.com · 26/09/2026You can use rem's or whatever else, but you have to register more properties. And I was trying to highlight the simplest fallback for the most common use case in fluid typography 111
Matthew Morete @matthewmorete.com · 26/09/2026For cross-browser support, you can't mix units. Registering 100vw as a <length> forces it into pixels, which makes pixels the required unit. That's why this demo, that uses rems instead, doesn't work in safari: codepen.io/editor/matth...codepen.ioProgressA code demo by Matthew Morete created on CodePen 310
Matthew Morete @matthewmorete.com · 25/09/2026Cheers! Just a link to the post with the screenshot would be cool 🙂. Nothing more concrete publish yet 130
Matthew Morete @matthewmorete.com · 25/09/2026This conversation inspired me to write a bit more about polyfilling/fallbacks for progress(). If your breakpoints are in pixels, which they usually are, all you need is this! Not a nice as progress() but a lot better than I proposing in my previous article. Only 1 @property and 1 tan(atan2()) 261
Matthew Morete @matthewmorete.com · 25/09/2026Thank you! And you're so right that it's much easier to use. I've just a real fondness for the atan2 trick, and calculating progress is a great use for it since it also does the division: clamp(0,tan(atan2(var(--_vp-offset),var(--vp-span))),1); Not a lean as progress, but I think it's still elegant! 120
Matthew Morete @matthewmorete.com · 24/09/2026I wish we had gotten unclamped first just cause of how easy it is to clamp it. But I guess that's only a problem in the here and now, and in a years time I'll be glad the most common use is the easiest 010
Matthew Morete @matthewmorete.com · 24/09/2026It's nice to have but I don't think it's going to be anything game changing, cause you can already do it yourself in a lot of cases: (current - start) / (end - start). It'll probably seem more useful when we get calc-mix() and other -mix functions where we can do some fancy things without any maths 200
Reposted by Matthew MoreteJane Ori 💚 CSS Runner 👩💻 @janeori.propjockey.io · 19/09/2026Staff Software Engineer, great with: SQL, Node, Accessibility, Web Assembly, CSS, React, 3D Experience with: Firebase, PHP, Python, C, C#, C++, Java, Native Wii Homebrew Known for: CSS hacking & inventions, tech writing, (offline) game hacking, and many published OS packages 0146
Matthew Morete @matthewmorete.com · 19/09/2026A pixel dissolve generator! codepen.io/editor/matth... I've tried to make this effect 10 different ways at this point and it usually requires a mountain of code. An encoded PNG, wrapped in an encoded SVG with 'image-rendering:pixelated' is a very fun CSS trick and way way more compact.codepen.ioPixel Dissolve Mask GeneratorA code demo by Matthew Morete created on CodePen 071
Matthew Morete @matthewmorete.com · 19/09/2026All the corner-shape variations made with shape(). Hopefully not something we'll ever need in practise, cause it's way more code (and doesn't include nice features like automatic clamping), but fun to play about withcodepen.ioCorner-shapes with shape()A code demo by Matthew Morete created on CodePen 020
Matthew Morete @matthewmorete.com · 16/09/2026oooh yes please, I just saw @ishadeed.com say 'a simple thing should be straightforward to make' and I wondered what that would look like in this case, and it's exactly this 010
Matthew Morete @matthewmorete.com · 16/09/2026Especially considering you easily pass down child-count to get sibling-count, it's a little annoying we didn't get it first 010
Matthew Morete @matthewmorete.com · 15/09/2026Was playing around yesterday and ended up using it: codepen.io/editor/matth... I imagine it'll get a lot of use in styling APIs converting meaningful values to 0-1codepen.ioVariable 'font'/letter with shape()A code demo by Matthew Morete created on CodePen 010
Matthew Morete @matthewmorete.com · 14/09/2026aww that really sucks! It was exciting to see yous doing such good work over there 210
Matthew Morete @matthewmorete.com · 12/09/2026@codepen.io I greatly appreciate the pick, but pick this one instead! It's better! 000
Matthew Morete @matthewmorete.com · 12/09/2026codepen.io/editor/matth... A small upgrade to use shape() so you can spell a full word with a single element! --letters: var(--w),var(--o),var(--r),var(--l),var(--d); --count: 5; Obviously thats a very clunky API but it's a fun wee experimentcodepen.ioClip Path Pixel Font (Shape)A code demo by Matthew Morete created on CodePen 100
Matthew Morete @matthewmorete.com · 12/09/2026A pixel font with clip-path on @codepen.io codepen.io/editor/matth...codepen.ioClip Path Pixel FontA code demo by Matthew Morete created on CodePen 030
Matthew Morete @matthewmorete.com · 09/09/2026For sure, seems like CSS-Tricks is in good hands again and now Chris is making FrontendMasters an equally great blog 000
Matthew Morete @matthewmorete.com · 09/09/2026Is that was happened to CSS tricks? I thought it was just an effect of bringing Geoff Graham back 210
Reposted by Matthew MoreteJakob E @jakob-e.bsky.social · 08/09/2026Great news 🤩 For anyone interested in how to use progress in fluid typography @matthewmorete.com made an excellent post about it here 👇 blog.master.dev/fluid-typogr...blog.master.devFluid Typography with progress()With the `progress()` function in CSS we've got a new way to calculate the size for type based on the viewport without problems of the past. 0106
Matthew Morete @matthewmorete.com · 08/09/2026I was tired of having to remember how to calculate measurements for flat-bottom bags. Ive seen calculators for more complicated pouches, but couldnt find a simple calculator just for bottom boxed corners, so I like any good developer with a hobby I built one. boxedbottompattern.netlify.app #sewingboxedbottompattern.netlify.appBoxed-Bottom Pattern GeneratorGenerate custom cutting plans and corner notches for any flat-bottom bag, pouch, or fabric container. 110
Matthew Morete @matthewmorete.com · 31/08/2026I literally just yesterday finished making a very similar thing: emoji-favicons.matthewmorete.com Based of your article from 5/6 years ago on CSS tricks. Subdomains for the win, a wee one page thing isn't worth another yearly billemoji-favicons.matthewmorete.comEmoji FaviconsEasy favicons with emojis and SVG filters. 000
Matthew Morete @matthewmorete.com · 30/08/2026very fair I was just checking! I thought maybe we were disavowing all data urls so just wanted to share my fav usage 110
Matthew Morete @matthewmorete.com · 29/08/2026This is how I find out your name is Ashley and not just ash, spoilers 100
Matthew Morete @matthewmorete.com · 29/08/2026100%, there's so much transphobia/homophobia targeted at decent people that a single second spent defending a bigot is a second that could be better spent 010
Matthew Morete @matthewmorete.com · 29/08/2026So cool @preethisam.bsky.social killing it as per usual 000
Matthew Morete @matthewmorete.com · 29/08/2026This comparison completely sells it, it looks beaut pixelated. Shame it required so much effort compared to if 'image-rendering:pixelated' worked how you'd hope here, though I guess in 99% of uses, vectors staying vector is better 020
Matthew Morete @matthewmorete.com · 29/08/2026Would this count? css-tricks.com/emoji-as-a-f... It's nice to have it as a one liner rather than dealing with an extra file! Supported almost everywhere that matters except on google search results I thinkcss-tricks.comHow To Use an Emoji as a Favicon Easily | CSS-TricksWith just a simple one-liner of code you can use any emoji as a favicon of your website. 😃 120
Matthew Morete @matthewmorete.com · 29/08/2026Yes totally that all makes perfect sense. In general I weigh clutter vs browser support on a case by case basis. inset: 0 vs 4 properties is such a big win that I'll always choose it, 1 property vs 1 more verbose property with better browser support usually makes me lean towards the better support 000
Matthew Morete @matthewmorete.com · 29/08/2026Probably the last shape tool for my collection: Minify Shape. It’s very much inspired by SVGO, trying to do the same kind of cleanup and optimisation but for CSS shapes. minifyshape.matthewmorete.com Tested it with every shape I can get my hands on but would love to hear if you find any issues!minifyshape.matthewmorete.comCSS Shape() MinifierOptimise and minify shape() functions without impacting rendering 160
Matthew Morete @matthewmorete.com · 29/08/2026Do not agree, I don't see any other journalist out here covering digital privacy and fighting censorship like she does 020
Matthew Morete @matthewmorete.com · 29/08/2026I'm still a transform over individual transforms person. I'll change it when it gets in the way but otherwise I always go for the older properties 100
Matthew Morete @matthewmorete.com · 27/08/2026TIL: 'border-radius: 6px 999px 999px 6px' becomes '0px 999px 999px 0px' in most cases. 'When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap.' 010
Matthew Morete @matthewmorete.com · 25/08/2026Such a good article as per usual, TIL about flex-line-count 110
Matthew Morete @matthewmorete.com · 25/08/2026Some of my other tools would spit out extremely ugly calcs that I didn't want to clean up, but eventually I just wanted it to be dealt with and since subdomains are free it can now exist as its own thing minifycalc.matthewmorete.comminifycalc.matthewmorete.comCSS Calc() MinifierCondense calc() functions to their smallest form 000
