The direction aware trick is so clever it could probably be its own article
1 month ago
0
0
0
0
Posts by Matthew Morete
6 digit hex codes take 2 optional digits (always 2, 1 would be invalid) to control opacity from 0-99% in 1% increments.
#00000000 is also black at 0% opacity.
Works for any hex code to quickly control transparency!
2 months ago
0
0
0
0
You can also use any 3 digit hex code followed by a 0, for 0 opacity, or any 6 digit code followed by 00.
#ccc0 or #cccccc00 would also work
2 months ago
5
0
1
0
I manually added it in dev tools:
2 months ago
0
0
0
0
Sure, I'm seeing this, but can't see corner shape.
Maybe the pen didn't update? Cause I can't see it in the pen's code either
2 months ago
0
0
1
0
I'm just realising how outdated my Safari is lol, so this might not be useful information
2 months ago
0
0
1
0
Doesn't seem to be working for me in Safari 18.3
2 months ago
1
0
1
0
path-to-shape.netlify.app Doubtful this was what youre looking for but I made a converter.
Pairs well with the best path editor I've seen: yqnn.github.io/svg-path-edi...
2 months ago
6
1
1
0
Advertisement
It's 2025, stop putting http-equiv="X-UA-Compatible" in your <head>
10 months ago
21
6
2
0
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
10 months ago
45
17
5
0
I’m working on a CSS course: The Layout Maestro.
👉 Sign up for updates: layoutmaestro.ishadeed.com
📓 Read the note: ishadeed.com/note/layout-...
10 months ago
122
14
2
3
I just tried again and it worked! Sorry to have bothered you with that! I did have an error at the time but must have been something wrong on my end.
10 months ago
0
0
0
0
*miss how concise the SVG version is
10 months ago
0
0
0
0
Yeah definitely, i wonder if it was just an easier path forward to make something new than wading into all the complexities off SVG. I slightly appreciate the increased readability but wish how concise the SVG version is
10 months ago
1
0
1
0
10 months ago
1
0
1
0
Advertisement
@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!
11 months ago
3
0
1
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
11 months ago
0
0
0
0
Don't think you need a label on a nav so they gotta be removing it. Amazing
11 months ago
1
0
0
0
clagnut.com/blog/2432
This has totally convinced me. No more max-inline-size: 60ch, long live max-inline-size: 30rem
1 year ago
3
0
0
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...
1 year ago
2
0
0
0
+1 to what ALA said, but also capitalise applies to every word, where as proper title case excludes things like 'of'/'or' etc
1 year ago
2
0
2
0
At the time of reading, this website is at 27% battery life, adding a dimension of anxiety that I didn't know could exist
1 year ago
73
13
5
1
Advertisement
Thank you!
1 year ago
1
0
0
0
A short post on working with possibly invalid #css custom properties and their weird fallback rules
frontendmasters.com/blog/custom-...
1 year ago
6
3
0
1
Ms Casey from Severence
your outie always uses semantic html
1 year ago
240
31
10
2
Sorry to pick this up weeks later but was just thinking about it. In this situation I think it's because it's an svg element being animated with svg animation (rather than an html element being animated with css). But good to know that works! Can probably revisit somethings with that in mind
1 year ago
3
0
1
0
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...
1 year ago
1
0
0
0
Safari doesn't apply SVG filters if any of the children are animated, which in practise is limiting that you basically can't use svg filters anywhere for anything 😭
codepen.io/matthewmoret...
1 year ago
1
0
2
0
I feel like there's a lot of people who have to write css, but dont want view it as part of their job or craft, it's just something they have to do. So I can see why they wish it was smaller and simpler. Cant relate cause CSS is my favourite bit, I hope they never stop adding more
1 year ago
8
0
0
0