Now 40% less CSS for the same result! - Minified CSS - No SVG wrapper, I was wrong, it doesn’t need it - No supports, supporting view-transitions but not mask is rare and they just get no transition - Better png encoding + No MIME type or checksum - Frames reversed when smaller

Matthew Morete@matthewmorete.com · 3w ago

A 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.

What do you want us to work on in 2027? Here's a web app where you can rank the Interop proposals you care about, giving us data we can use to prioritise feature development. interop-rank.fxdx.dev

Interop Feature Ranking

Rank the web platform features you care most about

interop-rank.fxdx.dev

Fallbacks for CSS “progress()”, by @matthewmorete.com (@frontendmasters.com): https://blog.master.dev/fallbacks-for-css-progress/?ref=frontenddogma.com #css #functions

Fallbacks for CSS `progress()`

The new CSS progress() function calculates a value between 0 and 1, representing its position within a defined range. While awaiting broader browser support, users can manually implement this using other methods.

blog.master.dev

CSS can only morph between shape()s with the same number and type of commands, which usually they don't. So I made a tool to convert them into compatible shapes. shapemorph.matthewmorete.com It tries to pick the smoothest arrangement of points, but adjust the shape index to try other variations!

CSS Shape() Morph

Prepare shape() values for morphing with native CSS transitions & animations

shapemorph.matthewmorete.com

If you wanna use progress() but the browser support isn't good enough yet, then have I got the blog post for you

Master.dev (Formerly Frontend Masters)@frontendmasters.com · last wk.

Fallbacks for CSS `progress()` The new CSS progress() function calculates a value between 0 and 1, representing its position within a defined range. While awaiting broader browser support, users can manually implement this using other methods.

"Pixel Dissolve Mask Generator" by Matthew Morete codepen.io/editor/matth... + a very cool website! matthewmorete.com

Staff 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

A 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.

Pixel Dissolve Mask Generator

A code demo by Matthew Morete created on CodePen

codepen.io

codepen.io/editor/matth...

Matthew Morete@matthewmorete.com · 3w ago

All 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 with

All 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 with

Corner-shapes with shape()

A code demo by Matthew Morete created on CodePen

codepen.io

codepen.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 experiment

Clip Path Pixel Font (Shape)

A code demo by Matthew Morete created on CodePen

codepen.io

Matthew Morete@matthewmorete.com · 4w ago

A pixel font with clip-path on @codepen.io codepen.io/editor/matth...

A pixel font with clip-path on @codepen.io codepen.io/editor/matth...

Clip Path Pixel Font

A code demo by Matthew Morete created on CodePen

codepen.io

Great 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...

Fluid 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.

blog.master.dev

I 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 #sewing

Boxed-Bottom Pattern Generator

Generate custom cutting plans and corner notches for any flat-bottom bag, pouch, or fabric container.

boxedbottompattern.netlify.app

Probably 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!

CSS Shape() Minifier

Optimise and minify shape() functions without impacting rendering

minifyshape.matthewmorete.com

TIL: '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.'

Some 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.com

CSS Calc() Minifier

Condense calc() functions to their smallest form

minifycalc.matthewmorete.com

TIL calc(10px + 0) is invalid, but calc(10px + 0px) isn't. Learning when unitless zeros are acceptable is so confusing 😭

Small update to my Path to Shape() tool: a slightly nicer ui & dark mode, a tad more optimised output, and a control for decimal precision (which helps a lot as shape() can get biggggg). Check it out here: pathtoshape.matthewmorete.com

Path to CSS Shape()

Convert SVG path data to CSS shape() function.

pathtoshape.matthewmorete.com

This week's side project: a little tool to convert CSS shape() paths into polygon() for a fallback/better browser support. Try it here: shapetopolygon.matthewmorete.com

CSS Shape() to Polygon()

Create fallbacks or replacements for shape()

shapetopolygon.matthewmorete.com

Playing around with making a 'shape to polygon' converter for the purposes of fallbacks. But it's interesting that since shape() is sooo verbose you can often get a very similar result for almost the same bytes with polygon()

Western Hypocrisy Is Western Supremacism: An argument against double standards, separation, and a hierarchy of worth.

Western Hypocrisy Is Western Supremacism

An argument against double standards, separation, and a hierarchy of worth.

meiert.com

@kevinpowell.co If you're looking for another question I'd be very interested in more 2 state vs 3 state dark/light toggle data! Very fascinating how much great minds are differing on this

codepen.io/editor/matth... A responsive auto grid, that ensures equal columns! Go from 6 to 3 to 2 to 1, without the unevenness of 4 or 5 columns. Works on any number of items, as long as it's not prime. Though larger counts will require more 'steps'. And first codepen 2.0 pen! 🥳

Responsive Auto Grid, using factors of child count for equal columns

A code demo by Matthew Morete created on CodePen

codepen.io

A pro codepen account is such a flex, I get it. You're better than me

📕 Good read “Fluid Typography with progress()” by @matthewmorete.com I had no clue that CSS progress() function existed. This is so so so useful. master.dev/blog/fluid-t... #css

Fluid 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.

master.dev

The rush of having a pen picked by @codepen.io

Fluid Typography With “progress()”, by @matthewmorete.com (@frontendmasters.com): https://master.dev/blog/fluid-typography-with-progress/?ref=frontenddogma.com #css #functions #typography #liquiddesign

Fluid 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.

master.dev

Looking to have a newspaper effect as a background, without having a bunch of text duplicated in the html. My first attempt, hopefully to be improved. codepen.io/matthewmoret...

Newspaper Vibes

...

codepen.io