matthewmorete.com - Profile | ThreadSky | a Reddit-style client for Bluesky

It's 2025, stop putting http-equiv="X-UA-Compatible" in your <head>

submitted 7 days ago • 2 comments

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

submitted 10 days ago • 5 comments

I’m working on a CSS course: The Layout Maestro. 👉 Sign up for updates: layoutmaestro.ishadeed.com 📓 Read the note: ishadeed.com/note/layout-...

submitted 18 days ago • 2 comments

@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!

submitted 33 days ago • 1 comment

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

submitted 33 days ago • 0 comments

clagnut.com/blog/2432 This has totally convinced me. No more max-inline-size: 60ch, long live max-inline-size: 30rem

submitted 83 days ago • 0 comments

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...

submitted 92 days ago • 0 comments

At the time of reading, this website is at 27% battery life, adding a dimension of anxiety that I didn't know could exist

submitted 92 days ago • 5 comments

A short post on working with possibly invalid #css custom properties and their weird fallback rules frontendmasters.com/blog/custom-...

submitted 104 days ago • 0 comments

your outie always uses semantic html

submitted 113 days ago • 10 comments

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...

submitted 124 days ago • 0 comments

#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...

submitted 154 days ago • 1 comment

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

submitted 165 days ago • 0 comments

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

submitted 173 days ago • 0 comments

Squarespace allows custom css but rewrites 'calc(10vw + 2rem)' as '12vw' and I'd love to know who thought that was a good idea

submitted 181 days ago • 0 comments

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

submitted 185 days ago • 0 comments

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

submitted 218 days ago • 44 comments

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/

submitted 200 days ago • 1 comment

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

submitted 202 days ago • 0 comments

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...

submitted 219 days ago • 0 comments

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

submitted 401 days ago • 0 comments

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.

submitted 415 days ago • 0 comments

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

submitted 419 days ago • 0 comments

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

submitted 420 days ago • 0 comments

therapy: • expensive • inaccessible ‘guess i’ll just go fuck myself’ • free • easy

submitted 439 days ago • 12 comments

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

submitted 439 days ago • 0 comments