The direction aware trick is so clever it could probably be its own article
12.02.2026 21:46
👍 0
🔁 0
💬 0
📌 0
The direction aware trick is so clever it could probably be its own article
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!
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
I manually added it in dev tools:
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
I'm just realising how outdated my Safari is lol, so this might not be useful information
Doesn't seem to be working for me in Safari 18.3
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...
It's 2025, stop putting http-equiv="X-UA-Compatible" in your <head>
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
I’m working on a CSS course: The Layout Maestro.
👉 Sign up for updates: layoutmaestro.ishadeed.com
📓 Read the note: ishadeed.com/note/layout-...
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.
*miss how concise the SVG version is
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
path-to-shape.netlify.app had the same thought so made this, pretty basic but does the job
@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
Don't think you need a label on a nav so they gotta be removing it. Amazing
clagnut.com/blog/2432
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...
+1 to what ALA said, but also capitalise applies to every word, where as proper title case excludes things like 'of'/'or' etc
At the time of reading, this website is at 27% battery life, adding a dimension of anxiety that I didn't know could exist
Thank you!
A short post on working with possibly invalid #css custom properties and their weird fallback rules
frontendmasters.com/blog/custom-...
Ms Casey from Severence
your outie always uses semantic html
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
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...
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...
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
