Matthew Morete
@matthewmorete.com
📤 117
📥 274
📝 48
Building websites in Belfast He/Him
pinned post!
A short post on working with possibly invalid
#css
custom properties and their weird fallback rules
frontendmasters.com/blog/custom-...
loading . . .
Custom Property Fallbacks
This post starts with quite a tricky little quiz about what a color value resolves to be.
https://frontendmasters.com/blog/custom-property-fallbacks/
12 months ago
0
6
4
reposted by
Matthew Morete
Andy Bell
about 1 month ago
Go to
personalsit.es
Hit the “go to a random site link” Enjoy
loading . . .
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.
https://personalsit.es
6
143
35
reposted by
Matthew Morete
Rick Viscomi
9 months ago
It's 2025, stop putting http-equiv="X-UA-Compatible" in your <head>
2
21
6
reposted by
Matthew Morete
Álvaro Montoro
9 months ago
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
loading . . .
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...
https://alvaromontoro.com/blog/68009/lgbtq-flags-coded-in-css
5
45
17
reposted by
Matthew Morete
Ahmad Shadeed
9 months ago
I’m working on a CSS course: The Layout Maestro. 👉 Sign up for updates:
layoutmaestro.ishadeed.com
📓 Read the note:
ishadeed.com/note/layout-...
loading . . .
The Layout Maestro
An interactive course focused on how to think, build, and test a layout with real-world examples.
https://layoutmaestro.ishadeed.com/
2
121
17
@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!
10 months ago
1
3
0
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
loading . . .
Path to CSS Shape
Convert SVG path data to CSS shape() function.
https://path-to-shape.netlify.app/
10 months ago
0
0
0
clagnut.com/blog/2432
This has totally convinced me. No more max-inline-size: 60ch, long live max-inline-size: 30rem
loading . . .
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...
https://clagnut.com/blog/2432
11 months ago
0
3
0
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...
add a skeleton here at some point
12 months ago
0
2
0
reposted by
Matthew Morete
Pavel
12 months ago
At the time of reading, this website is at 27% battery life, adding a dimension of anxiety that I didn't know could exist
loading . . .
LOW←TECH MAGAZINE
This is a solar-powered website, which means it sometimes goes offline
https://solar.lowtechmagazine.com/
5
73
14
A short post on working with possibly invalid
#css
custom properties and their weird fallback rules
frontendmasters.com/blog/custom-...
loading . . .
Custom Property Fallbacks
This post starts with quite a tricky little quiz about what a color value resolves to be.
https://frontendmasters.com/blog/custom-property-fallbacks/
12 months ago
0
6
4
reposted by
Matthew Morete
Samuel
about 1 year ago
your outie always uses semantic html
10
240
33
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...
loading . . .
Simple Animated Text Gap
...
https://codepen.io/matthewmorete/pen/mybNgqV?editors=1100
about 1 year ago
0
1
0
#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...
loading . . .
about 1 year ago
1
3
1
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
about 1 year ago
0
1
0
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
loading . . .
CSS Infinite plane
...
https://codepen.io/matthewmorete/full/vEBmZeB
about 1 year ago
0
2
0
Squarespace allows custom css but rewrites 'calc(10vw + 2rem)' as '12vw' and I'd love to know who thought that was a good idea
about 1 year ago
0
1
0
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
loading . . .
Fluid Size
Calculate CSS clamp values for fluid sizing
https://fluidsize.com
about 1 year ago
0
4
0
reposted by
Matthew Morete
Phil Hawksworth
over 1 year ago
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
loading . . .
38
364
95
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/
about 1 year ago
1
1
0
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
about 1 year ago
0
0
0
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...
over 1 year ago
0
0
0
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
loading . . .
SVG filter + CSS only Text Marquee
...
https://codepen.io/matthewmorete/pen/OJYLLrX
almost 2 years ago
0
0
0
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.
loading . . .
CSS only marquee with slow on hover
...
https://codepen.io/matthewmorete/pen/poBqvEQ
almost 2 years ago
0
0
0
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
loading . . .
Transparent Text Hover effect
...
https://codepen.io/matthewmorete/pen/XWQxQMb
almost 2 years ago
0
0
0
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
loading . . .
Glitch Text
...
https://codepen.io/matthewmorete/full/LYvgNqv
almost 2 years ago
0
0
0
reposted by
Matthew Morete
rax ‘levon honkers’ king
almost 2 years ago
therapy: • expensive • inaccessible ‘guess i’ll just go fuck myself’ • free • easy
12
950
156
Subtle pixelated animated button made with svg patterns + masks and css animations. Making svgs behave the same in all browsers remains a pain 🥲
codepen.io/matthewmoret...
#svg
#css
#webdev
loading . . .
Pixelated Button
...
https://codepen.io/matthewmorete/full/BaEddPg
almost 2 years ago
0
2
0
you reached the end!!
feeds!
log in
