Notices by Ana Tudor 🐯 (anatudor@mastodon.social)

For everyone who has told me the #CSS + #SVG stuff I've been sharing is cool, remember that praise doesn't pay for all this work..

but you can https://ko-fi.com/anatudor

@sortius @aral Guy asks online how to fix something about something he had generated with ChatGPT. I code just the broken part from scratch and give him the link to the working CodePen demo. He tells me it's not working for him. I'm all WTF, you just had to replace *that* part. Turns out he had asked ChatGPT how to use my code (is copy paste that difficult, my dude?) and for some reason I cannot comprehend... ChatGPT had moved a function call outside the if block it was supposed to be in... 🤦♀️

@aral Wishing Osky a speedy recovery! 🐺

When you finally get that this person you've never met before in your life hasn't just told you "I enjoy cocaine" - it was "cooking", what is wrong with your brain, Ana?

@aral More trustworthy (and cuter) alarm system: 🐺

Re https://mastodon.social/@slightlyoff@toot.cafe/113802946213687635

I bought my phone in 2005. It was barely launched worldwide a couple of months earlier & probably one of the first handful sold in 🇷🇴 . Was horrendously expensive for me (still below that $250 line), but I really wanted it. Well, never wanted another since and it still works, so to date, almost 20 years later, I've never had a smartphone. And I don't think I will until this phone dies on me.

But if you have a Linux phone, feel free to share your experience with it. 😼

Also, let me show you something: search result for "mask-clip mdn" vs. when actually going to the MDN page.

And no, `margin-box` doesn't work.

#css #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

#tinyCSStip

Ever want to mask something out of an element, but not cut out blur or box-shadow or a pseudo outside the element's border box?

Well, subtract whatever you want masked out from a fully opaque layer with `mask-clip` set to `no-clip`!

mask:
conic-gradient(red 0 0) no-clip subtract,
var(--masked-area)

@codepen demo: https://codepen.io/thebabydino/pen/MYggKre

#CSS #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

@aral Completely unrelated, but that looks like a fun distorted conic-gradient().

@lanodan See https://www.tpgi.com/should-form-labels-be-wrapped-or-separate/

Please, use the `for` attribute on labels so input value can be changed by clicking on label as well: https://codepen.io/thebabydino/pen/XejRbo/

#html #a11y #accessibility

@Mr_Teatime @michael_stuhr @aral CSS & JS got better over the past 10+ years, SVG got left behind. I'm hitting bugs in all browsers with SVG filters & hacking my way around them doesn't help with perf.

Opened an interop issue https://github.com/web-platform-tests/interop/issues/756

Not getting my hopes up. Some bugs have been open for 5+ years. At this point, SVG is so far behind it's going to take a huge effort to fix things. And there's no interest as long as ppl don't use it. And ppl don't use it because it's broken. 🤷♀️

The third is something I quickly made to answer a question I saw on reddit https://reddit.com/r/css/comments/1fwm87i/comment/lqg11fl/

It's similar to something you can find on a lot of websites with a couple extra constraints:
✨ no extra elements, no pseudos
✨ working fine on top of image background

#CSS #cssGradient #mask #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

The second is a quick little thing I live-coded in Professor Mode on @codepen in under 15 minutes a little while back.

Just like the first, it has absolutely no text duplication, not in the markup and not in pseudo content.

A little #SVG #filter magic 🪄 slices and offsets it https://codepen.io/thebabydino/pen/RwmPZVR

#CSS #cssGradient #svgFilter #code #coding #frontend #web #dev #webDev #webDevelopment

The first one is this text effect that uses absolutely no images whatsoever save for #CSS gradients.

Some #SVG filter magic 🪄 is responsible for the background texture and also for the 3D look of the text and its grainy gradients.

https://codepen.io/thebabydino/pen/gONbppb

#filter #svgFilter #texture #textEffect #textEffects #noise #cssGradient #code #coding #3D #3dText #frontend #web #dev #webDev #webDevelopment

11! of my demos throughout the first @codepen trending pages!

#SVG #CSS #filter #3D #svgFilter #graphicEffect #textEffects #texture #css3D #transform #code #coding #web #dev #webDev #webDevelopment #frontend

#tinyCSStip Simplest circle sector in 4 CSS declarations!

1⃣ set width to desired diameter
2⃣ square element with aspect-ratio
3⃣ turn square into disc
4⃣ conic-gradient() magic! 🪄

The start angle and sector angle can also be animated for fun results.

Because someone asked https://www.reddit.com/r/css/comments/1fvo5dl/comment/lq9mtjj/

#CSS #gradient #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment

The internet is for fun things, so...

Hail Lucipurr 😼https://codepen.io/thebabydino/pen/MWzXWLP

Stepping away from CSS and SVG at the moment, here's a #canvas demo: dottifying an image.

#JS #JavaScript #code #coding #frontend #web #dev #webDevelopment #webDev

@aral @codepen I'm an idiot. I pasted the wrong link for the demo. Fixed now.

Thanks. Both for checking and for letting me know.

What in Beelzebub's name's going on? My Slice! demo is in the
@codepen Spark and... it looks broken in the screenshot included with it!

Been told it looks broken in Chrome before https://x.com/rolandfranke/status/1803383982798540987 but I can't reproduce it in any Chromium version on Linux. Can you? What OS?

The live demo https://x.com/rolandfranke/status/1803383982798540987

#bug