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

@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

#tinySVGtip Better gooey effect with no matrix filter!

Each particle can get its own CSS blur filter with a value that may be any unit (SVG doesn't support this).

The assembly containing them gets an SVG filter as below.

Heavily commented on @codepen: https://codepen.io/thebabydino/pen/NWVdKaG

#CSS #SVG #filter #cssFilter #svgFilter #goo #gooey #blob #blobby #blur #alpha #code #coding #frontend #webDev #web #dev #webDevelopment

A while ago, I posted about mono emojis with #CSS filters. https://mastodon.social/@anatudor/111617727010747501

It was... quite complicated, but there's a better way - with a simple #SVG #filter!

If you're a patron on Patreon, you may have already seen the interactive demo... now it's public for everyone https://codepen.io/thebabydino/pen/LYamwrz

(you can pick another value for the fill using the input[type=color] and copy the SVG filter to clipboard)

#CodePen #interactive #code #coding #svgFilter #frontend #webDev #webDevelopment