Matthew Morete
@matthewmorete.com
Building websites in Belfast
He/Him
He/Him
Pinned
Matthew Morete
@matthewmorete.com
· Feb 28
Custom Property Fallbacks
This post starts with quite a tricky little quiz about what a color value resolves to be.
frontendmasters.com
A short post on working with possibly invalid #css custom properties and their weird fallback rules
frontendmasters.com/blog/custom-...
frontendmasters.com/blog/custom-...
Reposted by Matthew Morete
It's 2025, stop putting http-equiv="X-UA-Compatible" in your <head>
June 4, 2025 at 6:16 PM
It's 2025, stop putting http-equiv="X-UA-Compatible" in your <head>
Reposted by Matthew Morete
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/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
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/blog/68009/l...
#css #webDevelopment #PrideMonth #CSSArt
Reposted by Matthew Morete
I’m working on a CSS course: The Layout Maestro.
👉 Sign up for updates: layoutmaestro.ishadeed.com
📓 Read the note: ishadeed.com/note/layout-...
👉 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
I’m working on a CSS course: The Layout Maestro.
👉 Sign up for updates: layoutmaestro.ishadeed.com
📓 Read the note: ishadeed.com/note/layout-...
👉 Sign up for updates: layoutmaestro.ishadeed.com
📓 Read the note: ishadeed.com/note/layout-...
@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
@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!
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
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
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
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
clagnut.com/blog/2432
This has totally convinced me. No more max-inline-size: 60ch, long live max-inline-size: 30rem
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
clagnut.com/blog/2432
This has totally convinced me. No more max-inline-size: 60ch, long live max-inline-size: 30rem
This has totally convinced me. No more max-inline-size: 60ch, long live max-inline-size: 30rem
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/matthewmoret...
Ignore the weird purple shift in the preview...
March 12, 2025 at 12:36 PM
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/matthewmoret...
Ignore the weird purple shift in the preview...
Reposted by Matthew Morete
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
At the time of reading, this website is at 27% battery life, adding a dimension of anxiety that I didn't know could exist
A short post on working with possibly invalid #css custom properties and their weird fallback rules
frontendmasters.com/blog/custom-...
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
A short post on working with possibly invalid #css custom properties and their weird fallback rules
frontendmasters.com/blog/custom-...
frontendmasters.com/blog/custom-...
Reposted by Matthew Morete
your outie always uses semantic html
February 18, 2025 at 11:35 PM
your outie always uses semantic html
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/matthewmoret...
Simple Animated Text Gap
...
codepen.io
February 8, 2025 at 1:02 PM
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/matthewmoret...
#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...
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
#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...
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...
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
Guaranteed to make the most complicated clamp you've ever used 🗜️
fluidsize.com
December 29, 2024 at 2:58 PM
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
Guaranteed to make the most complicated clamp you've ever used 🗜️
fluidsize.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
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
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
Saw an infinitely moving plane in a film, and then spent the rest of the movie on my phone coding this for no reason
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
Squarespace allows custom css but rewrites 'calc(10vw + 2rem)' as '12vw' and I'd love to know who thought that was a good idea
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
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
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
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
Reposted by Matthew Morete
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
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
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
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
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/
Demo: codepen.io/matthewmoret...
Gradient Generator: css-shape.com/grid-lines/
November 24, 2024 at 1:46 PM
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/
Demo: codepen.io/matthewmoret...
Gradient Generator: css-shape.com/grid-lines/
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
Seen it done so many different ways and am never sure
November 22, 2024 at 3:19 PM
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
Seen it done so many different ways and am never sure
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...
@codepen.io challenge. No duplication, editable text and all that good stuff
codepen.io/matthewmoret...
November 4, 2024 at 7:57 PM
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...
@codepen.io challenge. No duplication, editable text and all that good stuff
codepen.io/matthewmoret...
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
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
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.
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
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.
The trick here is to use 'animation-composition: add' to apply a reduced negative version of the current animation at the same time.
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
codepen.io/matthewmoret...
#css #svg #webdev
Transparent Text Hover effect
...
codepen.io
April 19, 2024 at 10:14 AM
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
codepen.io/matthewmoret...
#css #svg #webdev
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
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
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
Demo: codepen.io/matthewmoret...
Inspo: www.textstudio.com/logo/text-wi...
#svg #css #webdev