Sign in

Matthew Morete

@matthewmorete.com
151 followers 301 following 126 posts

Building websites in Belfast He/Him matthewmorete.com

PostsRepliesMedia
Matthew Morete @matthewmorete.com · 25/09/2026
This 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())
CSS code: @property --vw { syntax: "<length>"; inherits: true; initial-value: 100vw; } :root { --progress: clamp(0, tan(atan2(var(--vw) - 300px, 1200px - 300px)), 1); }
261
Matthew Morete @matthewmorete.com · 21/09/2026
Can we get a grip
250
Matthew Morete @matthewmorete.com · 19/09/2026
codepen.io/editor/matth...
000
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 · 25/08/2026
010
Matthew Morete @matthewmorete.com · 14/08/2026
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()
A converter showing the svg logo rendered with shape() for 3979 bytes vs the same logo rendered with polygon (using 5 segments to approximate curves) for 4102 bytes
000
Matthew Morete @matthewmorete.com · 20/01/2026
I manually added it in dev tools:
000
Matthew Morete @matthewmorete.com · 20/01/2026
Sure, I'm seeing this, but can't see corner shape. Maybe the pen didn't update? Cause I can't see it in the pen's code either
100
Matthew Morete @matthewmorete.com · 20/01/2026
Doesn't seem to be working for me in Safari 18.3
110
Matthew Morete @matthewmorete.com · 09/01/2025
3D Transforms never render as nicely as I hope. Interesting you can get much nicer rendering on the edges if you fake the volume. Becomes more of a hassle to make the sides a different colour, which even if you go through has it's own list of rendering problems
110
Matthew Morete @matthewmorete.com · 09/01/2025
#CSS 3D Keys ⌨️ Uses 3d transforms and some simple trigonometry to calculate the sides of each key. Relative color syntax for the different shades. I had many failed attempts at adding some form of rounding, before compromising with this stylised look codepen.io/matthewmoret...
131
Matthew Morete @matthewmorete.com · 29/12/2024
Updated my fluid size calculator to now support up to 3 size/viewport pairs! You can even plateau the middle value if needed. Guaranteed to make the most complicated clamp you've ever used 🗜️ fluidsize.com
A graph with viewport width as the x axis, and size as the y, showing a line that defines the size of a element./* 100px @ 400px viewport → 250px @ 800-1200px viewport → 500px @ 1600px viewport */
--fluid-size: clamp(100px, max(min(37.5vw - 50px, 250px), 62.5vw - 500px), 500px);
010
Matthew Morete @matthewmorete.com · 24/11/2024
'background-repeat: round' ensures we have a whole number of repeats, but causes the gradient to double up with the border on two edges, breaking the effect. We fix that by moving the lines to a pseudo that we can extend and then clip
The top and left edges show the grid lines doubling up with the border, causing a visible bug
000
Matthew Morete @matthewmorete.com · 24/11/2024
I needed a perfectly even background grid, and while @css-only.dev's grid line generator got me 90% of the way there, I made a quick demo of how I made it work properly for my use case. Demo: codepen.io/matthewmoret... Gradient Generator: css-shape.com/grid-lines/
A centered square with perfectly even square grid lines, and a slightly rounded border.
110
Matthew Morete @matthewmorete.com · 04/11/2024
A layered split text effect using an svg filter for this weeks @codepen.io challenge. No duplication, editable text and all that good stuff codepen.io/matthewmoret...
A text effect where the word 'retro' is split, duplicated, and coloured to make a gradient from orange to blue
000