Matthew Morete
LightNews LightNews
matthewmorete.com
Matthew Morete
@matthewmorete.com
110 followers 270 following 40 posts
Building websites in Belfast
He/Him
Posts Replies Media Videos
Pinned
matthewmorete.com
Matthew Morete @matthewmorete.com · Feb 28
A short post on working with possibly invalid #css custom properties and their weird fallback rules
frontendmasters.com/blog/custom-...
Custom Property Fallbacks
This post starts with quite a tricky little quiz about what a color value resolves to be.
frontendmasters.com
Reposted by Matthew Morete
rviscomi.dev
It's 2025, stop putting http-equiv="X-UA-Compatible" in your <head>
June 4, 2025 at 6:16 PM
Reposted by Matthew Morete
alvaromontoro.com
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
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...
alvaromontoro.com
June 1, 2025 at 8:27 PM
Reposted by Matthew Morete
ishadeed.com
I’m working on a CSS course: The Layout Maestro.

👉 Sign up for updates: layoutmaestro.ishadeed.com

📓 Read the note: ishadeed.com/note/layout-...
The Layout Maestro
An interactive course focused on how to think, build, and test a layout with real-world examples.
layoutmaestro.ishadeed.com
May 25, 2025 at 6:38 AM
matthewmorete.com
@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!
May 9, 2025 at 6:30 PM
matthewmorete.com
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 CSS Shape
Convert SVG path data to CSS shape() function.
path-to-shape.netlify.app
May 9, 2025 at 5:56 PM
matthewmorete.com
clagnut.com/blog/2432
This has totally convinced me. No more max-inline-size: 60ch, long live max-inline-size: 30rem
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...
clagnut.com
March 20, 2025 at 6:38 PM
matthewmorete.com
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...
March 12, 2025 at 12:36 PM
Reposted by Matthew Morete
spavel.bsky.social
At the time of reading, this website is at 27% battery life, adding a dimension of anxiety that I didn't know could exist
LOW←TECH MAGAZINE
This is a solar-powered website, which means it sometimes goes offline
solar.lowtechmagazine.com
March 12, 2025 at 3:05 AM
matthewmorete.com
A short post on working with possibly invalid #css custom properties and their weird fallback rules
frontendmasters.com/blog/custom-...
Custom Property Fallbacks
This post starts with quite a tricky little quiz about what a color value resolves to be.
frontendmasters.com
February 28, 2025 at 4:24 PM
Reposted by Matthew Morete
samuel.fm
your outie always uses semantic html
Ms Casey from Severence
February 18, 2025 at 11:35 PM
matthewmorete.com
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...
Simple Animated Text Gap
...
codepen.io
February 8, 2025 at 1:02 PM
matthewmorete.com
#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...
January 9, 2025 at 4:28 PM
matthewmorete.com
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);
December 29, 2024 at 2:58 PM
matthewmorete.com
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
CSS Infinite plane
...
codepen.io
December 21, 2024 at 4:29 PM
matthewmorete.com
Squarespace allows custom css but rewrites 'calc(10vw + 2rem)' as '12vw' and I'd love to know who thought that was a good idea
December 13, 2024 at 4:34 PM
matthewmorete.com
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
Fluid Size
Calculate CSS clamp values for fluid sizing
fluidsize.com
December 8, 2024 at 5:46 PM
Reposted by Matthew Morete
philhawksworth.dev
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
November 6, 2024 at 12:52 PM
matthewmorete.com
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.
November 24, 2024 at 1:46 PM
matthewmorete.com
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
November 22, 2024 at 3:19 PM
matthewmorete.com
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
November 4, 2024 at 7:57 PM
matthewmorete.com
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
SVG filter + CSS only Text Marquee
...
codepen.io
May 7, 2024 at 12:08 PM
matthewmorete.com
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.
CSS only marquee with slow on hover
...
codepen.io
April 22, 2024 at 8:16 PM
matthewmorete.com
Some more feColorMatrix practise with this SVG filter + css hover effect with real text transparency. Surprising how little css is needed to pull this off

codepen.io/matthewmoret...

#css #svg #webdev
Transparent Text Hover effect
...
codepen.io
April 19, 2024 at 10:14 AM
matthewmorete.com
Quick demo of a glitchy text effect using svg filters + css gradients. No text duplication thanks to the feColorMatrix techniques @anatudor is demoing/teaching
Demo: codepen.io/matthewmoret...
Inspo: www.textstudio.com/logo/text-wi...
#svg #css #webdev
Glitch Text
...
codepen.io
April 17, 2024 at 9:17 PM