Sign in

Matthew Morete

@matthewmorete.com
150 followers 301 following 126 posts

Building websites in Belfast He/Him matthewmorete.com

PostsRepliesMedia
Reposted by Matthew Morete
CodePen @codepen.io · 2h
"Pixel Dissolve Mask Generator" by Matthew Morete codepen.io/editor/matth... + a very cool website! matthewmorete.com
172
Reposted by Matthew Morete
Jane Ori 💚 CSS Runner 👩‍💻 @janeori.propjockey.io · 19/09/2026
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
0146
Matthew Morete @matthewmorete.com · 19/09/2026
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.
codepen.io
Pixel Dissolve Mask Generator
A code demo by Matthew Morete created on CodePen
071
Matthew Morete @matthewmorete.com · 19/09/2026
codepen.io/editor/matth...
000
Matthew Morete @matthewmorete.com · 19/09/2026
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
codepen.io
Corner-shapes with shape()
A code demo by Matthew Morete created on CodePen
020
Matthew Morete @matthewmorete.com · 12/09/2026
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
codepen.io
Clip Path Pixel Font (Shape)
A code demo by Matthew Morete created on CodePen
100
Matthew Morete @matthewmorete.com · 12/09/2026
A pixel font with clip-path on @codepen.io codepen.io/editor/matth...
codepen.io
Clip Path Pixel Font
A code demo by Matthew Morete created on CodePen
030
Reposted by Matthew Morete
Jakob E @jakob-e.bsky.social · 08/09/2026
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...
blog.master.dev
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.
0106
Matthew Morete @matthewmorete.com · 08/09/2026
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
boxedbottompattern.netlify.app
Boxed-Bottom Pattern Generator
Generate custom cutting plans and corner notches for any flat-bottom bag, pouch, or fabric container.
110
Matthew Morete @matthewmorete.com · 29/08/2026
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!
minifyshape.matthewmorete.com
CSS Shape() Minifier
Optimise and minify shape() functions without impacting rendering
160
Matthew Morete @matthewmorete.com · 27/08/2026
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.'
010
Matthew Morete @matthewmorete.com · 25/08/2026
010
Matthew Morete @matthewmorete.com · 25/08/2026
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
minifycalc.matthewmorete.com
CSS Calc() Minifier
Condense calc() functions to their smallest form
000
Matthew Morete @matthewmorete.com · 22/08/2026
TIL calc(10px + 0) is invalid, but calc(10px + 0px) isn't. Learning when unitless zeros are acceptable is so confusing 😭
030
Matthew Morete @matthewmorete.com · 21/08/2026
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
pathtoshape.matthewmorete.com
Path to CSS Shape()
Convert SVG path data to CSS shape() function.
000
Matthew Morete @matthewmorete.com · 19/08/2026
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
shapetopolygon.matthewmorete.com
CSS Shape() to Polygon()
Create fallbacks or replacements for shape()
120
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
Reposted by Matthew Morete
Jens Oliver Meiert @meiert.com · 09/08/2026
Western Hypocrisy Is Western Supremacism: An argument against double standards, separation, and a hierarchy of worth.
meiert.com
Western Hypocrisy Is Western Supremacism
An argument against double standards, separation, and a hierarchy of worth.
011
Matthew Morete @matthewmorete.com · 06/08/2026
@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
100
Matthew Morete @matthewmorete.com · 02/08/2026
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! 🥳
codepen.io
Responsive Auto Grid, using factors of child count for equal columns
A code demo by Matthew Morete created on CodePen
000
Matthew Morete @matthewmorete.com · 02/08/2026
A pro codepen account is such a flex, I get it. You're better than me
010
Reposted by Matthew Morete
Paweł Grzybek @pawelgrzybek.com · 18/07/2026
📕 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
master.dev
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.
0112
Matthew Morete @matthewmorete.com · 10/07/2026
The rush of having a pen picked by @codepen.io
000
Reposted by Matthew Morete
Frontend Dogma @frontenddogma.com · 08/07/2026
Fluid Typography With “progress()”, by @matthewmorete.com (@frontendmasters.com): master.dev/blog/fluid-typography-wi… #css #functions #typography #liquiddesign
master.dev
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.
021
Matthew Morete @matthewmorete.com · 07/07/2026
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...
codepen.io
Newspaper Vibes
...
000
Matthew Morete @matthewmorete.com · 29/06/2026
Wrote a new post for @frontendmasters.com 😄 Fluid Typography with Progress() master.dev/blog/fluid-t... Discussing an often unmentioned problem with pre-calculated fluid type and how we can fix it with progress(). Not supported everywhere yet, but with a little extra code it works in all browsers
master.dev
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.
010
Reposted by Matthew Morete
Andy Bell @bell.bz · 15/01/2026
Go to personalsit.es Hit the “go to a random site link” Enjoy
personalsit.es
PersonalSit.es
Personal sites are sick as hell, so this site was built so we can all discover each other's. This directory of links are by folks that want to share their site with the world.
613929
Reposted by Matthew Morete
Rick Viscomi @rviscomi.dev · 04/06/2025
It's 2025, stop putting http-equiv="X-UA-Compatible" in your <head>
2206
Reposted by Matthew Morete
Álvaro Montoro @alvaromontoro.com · 01/06/2025
June is Pride Month. In this article, I explore several LGBTQ+ flags, how to recreate them using CSS and a single HTML element (fully responsive so they could double as icons), and share the history behind some of them. alvaromontoro.com/blog/68009/l... #css #webDevelopment #PrideMonth #CSSArt
alvaromontoro.com
LGBTQ+ Flags Coded in CSS
What different LGBTQ flags mean and how to code them with CSS and a single HTML element. A little bit of history and a little bit of tech for this Pride Month. :: Blog post at Alvaro Montoro's Persona...
54517
Reposted by Matthew Morete
Ahmad Shadeed @ishadeed.com · 25/05/2025
I’m working on a CSS course: The Layout Maestro. 👉 Sign up for updates: layoutmaestro.ishadeed.com 📓 Read the note: ishadeed.com/note/layout-...
layoutmaestro.ishadeed.com
The Layout Maestro
An interactive course focused on how to think, build, and test a layout with real-world examples.
212214
Matthew Morete @matthewmorete.com · 09/05/2025
@cssweekly.com Hi Zoran, was trying to submit a link to you via the form on your website, but it doesn't seem to be working, keeps giving me an error. Just FYI!
130
Matthew Morete @matthewmorete.com · 09/05/2025
Convert SVG path to #css Shape() path-to-shape.netlify.app Turns pixel based values into responsive percentages. Was very happy to discover the new shape() fully recreates the svg syntax, by far the hardest part is just parsing a svg path
path-to-shape.netlify.app
Path to CSS Shape
Convert SVG path data to CSS shape() function.
000
Matthew Morete @matthewmorete.com · 20/03/2025
clagnut.com/blog/2432 This has totally convinced me. No more max-inline-size: 60ch, long live max-inline-size: 30rem
clagnut.com
Use of ch unit considered inappropriate (in certain circumstances)
When did we start using the ch unit to specify the maximum length for a line of text in CSS? To do so makes assumptions that don’t necessarily hold up, and there are more appropriate units to use. Als...
030
Matthew Morete @matthewmorete.com · 12/03/2025
Just to add to the idea of fallback with 'color-mix': you can get equivalent colours if you prepare blacks/whites that are the same as the base colour but with a different lightness codepen.io/matthewmoret... Ignore the weird purple shift in the preview...
codepen.io
Color-mixing with different blacks
...
020
Reposted by Matthew Morete
Pavel @spavel.bsky.social · 12/03/2025
At the time of reading, this website is at 27% battery life, adding a dimension of anxiety that I didn't know could exist
solar.lowtechmagazine.com
LOW←TECH MAGAZINE
This is a solar-powered website, which means it sometimes goes offline
57313
Matthew Morete @matthewmorete.com · 28/02/2025
A short post on working with possibly invalid #css custom properties and their weird fallback rules frontendmasters.com/blog/custom-...
frontendmasters.com
Custom Property Fallbacks
This post starts with quite a tricky little quiz about what a color value resolves to be.
063
Reposted by Matthew Morete
Samuel @samuel.fm · 18/02/2025
your outie always uses semantic html
Ms Casey from Severence
1023831
Matthew Morete @matthewmorete.com · 08/02/2025
Animating the gap between letters with some straight forward maths and CSS. Works regardless of character count, but until we get sibling-count() and sibling-index() you'll need to set these manually codepen.io/matthewmoret...
codepen.io
Simple Animated Text Gap
...
010
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 · 21/12/2024
codepen.io/matthewmoret... Saw an infinitely moving plane in a film, and then spent the rest of the movie on my phone coding this for no reason
codepen.io
CSS Infinite plane
...
030
Matthew Morete @matthewmorete.com · 13/12/2024
Squarespace allows custom css but rewrites 'calc(10vw + 2rem)' as '12vw' and I'd love to know who thought that was a good idea
010
Matthew Morete @matthewmorete.com · 08/12/2024
I hate writing clamp() where I just guess what the preferred value should be, so I made a tool to help calculate it! fluidsize.com I’ve used this as a sass function for a while but I’m happy to have it now available anywhere. Hopefully someone out there finds it of use as well! #css #webdev
fluidsize.com
Fluid Size
Calculate CSS clamp values for fluid sizing
040
Reposted by Matthew Morete
Phil Hawksworth @philhawksworth.dev · 06/11/2024
I made you a little something. Help yourself to this little SVG+CSS flutter effect for your links to your @bsky.app account. (Psst. And publish the links to your @bsky.app account) flutterby.philhawksworth.dev
3836068
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 · 22/11/2024
How would you label a radio group? Each input gets it's own label, but what about the group. A fieldset with a legend? A label without a for attribute? Seen it done so many different ways and am never sure
000
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
Matthew Morete @matthewmorete.com · 07/05/2024
No JS + no text duplication text marquee, with slow on hover. I usually reach for `text-shadow` to this, but that requires a little JS to have the offsets be calculated exactly. SVG filters with primitiveUnits='objectBoundingBox' solves that problem entirely! #css #svg #webdev
codepen.io
SVG filter + CSS only Text Marquee
...
000
Matthew Morete @matthewmorete.com · 22/04/2024
This took a lot of learning to get working, infinite text marquee that slows down on hover, CSS only: codepen.io/matthewmoret... The trick here is to use 'animation-composition: add' to apply a reduced negative version of the current animation at the same time.
codepen.io
CSS only marquee with slow on hover
...
000