Hi, Bluesky 🦋 can you help me out? If you can test in actual Safari, what does the selection background look like when selecting text? cdpn.io/pen/debug/xb... Is it white like I set it/ like Chrome/ Firefox? Or grey like I'm seeing in Epiphany? If you cannot test, reposts appreciated. Thx! #CSS

This is to collect research for HTML input pickers such as date, time, datetime and colour. "Please send us examples of good (or bad) ones. Even if they have extra functionality that doesn't exist yet (e.g. date ranges, perhaps we can add that in)." github.com/openui/open-...

"Invalid property value, expected type '<angle>'" Chrome DevTools, this IS an angle! By the way, the code works just fine. It's just that DevTools incorrectly displays that. cc @developer.chrome.com

The vertical misalignment of the arrows of the next/ previous @ko-fi.com gallery buttons bothers me deeply. And it could be fixed so easily... Add: ``` display: grid; place-content: center; ``` Remove: ``` vertical-align: middle; text-align: center; ``` #CSS

I have now added another item to the shop! Mono textured embossed + engraved text ko-fi.com/s/875f207bd5 #CSS #SVG #filter

Before you share your "cool" button code for AI to spread it further, maybe learn HTML basics to ensure the elements you crammed inside (which you don't need anyway, could easily ditch them & get the same result with a single pseudo) are permitted inside button developer.mozilla.org/en-US/docs/W...

How would you create such a sliding glow effect on :hover? Trivial with corner-shape, but what about making it work cross-browser now? Think about it, then check my solution on @codepen.io: codepen.io/thebabydino/... Detailed explanation of the Maths behind (with drawings) on Ko-fi/ Patreon. #CSS

Nestoration hardware at the Decorah North nest. #nature

#cssWish `padding` and `box-decoration-break` support on `::selection`. Generally, a way to control the `::selection` background area. With a lot of fonts, this is outrageously tall & especially narrow. Especially if you want to use a cursive font, the letters spill right out of the `::selection`.

I just got reminded of that rainy, yet suffocatingly hot night when I walked from Obertraubling to Regensburg. I wouldn't dare do that here, there are bears.

Me: *works making accessible components at a company* Also me: *leaves company* Company [months later]: We are replacing the old components with this new set of completely inaccessible components. Enjoy! Cheerio. 🙁

Mood www.youtube.com/watch?v=sqTh... What about your future? It's defective And you can shove it up your ass

Thick Billed Euphonia. A ray of sunshine. #birds

#cssWish `padding` and `box-decoration-break` support on `::selection`. Generally, a way to control the `::selection` background area. With a lot of fonts, this is outrageously tall & especially narrow. Especially if you want to use a cursive font, the letters spill right out of the `::selection`.

Cool concave rounding header component on @codepen.io: codepen.io/thebabydino/... #CSS

Live demo on @codepen.io: codepen.io/thebabydino/... Proposal by @bram.us: expose pointer position information on hovered elements github.com/w3c/csswg-dr...

💡 CSS Tip! Percentage heights are always a nightmare, but what if we can solve all of the problems with one line of code? css-tip.com/percentage-h... It may look strange and unreadable, but it will be a lifesaver and probably your new favorite CSS trick in the future!

Hire me for small projects ko-fi.com/anatudor/com...

Thoughts? Plain text, no duplication, selectable. The texture is code-generated. #teaser #CSS #SVG #filter

The Great Grey Owl - nature is perfection.

Catch me if you can!

A 🆒 no JS, no text duplication, no shadows #3D text effect I made on @codepen.io for the week's #CodePenChallenge codepen.io/thebabydino/... Just a bit of #SVG #filter magic!🪄 #Pug code generating the SVG filter is ~1KB and the CSS is half of that (20 declarations including prettifying and layout)

Just in case anyone is wondering how to do this in a better, cross-browser, responsive way... here is a demo on @codepen.io: codepen.io/thebabydino/... I've added an #SVG #filter enhacement for a torn edge look, but the rest is just one `p` element. With `:first-letter` for the drop-cap. #CSS

I've recently made a little animated #3D thing with minimal #CSS and it got featured on @codepen.io: codepen.io/thebabydino/...

Cards with concave rounding on irregular grid codepen.io/thebabydino/... All is responsive. Real transparency for the gaps between cards and buttons. No sharp corners, all rounded. Card shapes adapt to changes in button size and shape - try changing just the font-size of the button elements! #CSS

Love the cats, but please don't call them Cheetos. 😭 They're adorable, not disgusting processed garbage.

TutorialPedia dot org has come up in my searches often lately. It's AI-generated garbage with code examples that *don't even work*. DuckDuckGo have a Share feedback about this site option. Where I wrote exactly that - AI-generated garbage with code examples that *don't even work*.

Do you use zoom? OS level, browser level?

Back from hospital.

"AI AGEnTS wIll DO AlL The TEDIoUS WOrk FOR YOU LIKE booKING trIpS" Meanwhile, AI maps:

Hi Bluesky 🦋 can you help me out if you can test in actual Safari? codepen.io/thebabydino/... looks faded in Epiphany + spills out on the left and top in TP codepen.io/thebabydino/... has 1st row/ col half cropped in Epiphany TP in Editor View, but not in debug cdpn.io/pen/debug/az... continued 👇

"The website with the biggest CSS of all shipped a whopping 131 MB!" more insights (and nightmare full) in The CSS Selection from @projectwallace.com www.projectwallace.com/the-css-sele... #FrontEnd #CSS #WebDev #WebDesign

I've just typed `font` wrong three times in a row... 😩

Because someone hearted this old @codepen.io demo done with 2 radio buttons + their labels in a group and it made me notice the title still said "smooth transition Chromium only" - it's been working cross-browser since the summer of 2024! 🥳🎉🎇 codepen.io/thebabydino/... #CSS

This getting taken away from me again... I had a ticket for one of the final shows of their final tour in 2016 and I was so happy nitter.net/anatudor/sta... Then that whole festival day got cancelled. Now I thought I would finally get my chance...

Songs with lyrics that include the word "cinnamon" www.youtube.com/watch?v=0vqg...

You have cat to be kitten me right meow... all those divs with all those styles for the frame around the content?! The frame that could be done with two gradient layers?! Here you go codepen.io/thebabydino/...

You seem to like the no JS char by char on scroll reveal effect, so here's a gallery of various such effects on @codepen.io codepen.io/thebabydino/... Which is your fave? I oscillate between undissolve & wave.🤔 Also an entry for this week's #CodePenChallenge. cc @bram.us

Please stop splitting words into their constituent letters. GSAP SplitText is not as robust as you think. adrianroselli.com/2026/02/you-... #HTML #accessibility #a11y #ARIA

Hi, Bluesky 🦋 can you help me out? Could you test codepen.io/thebabydino/... in actual Safari? Do you get those ugly dashes around the `padding-box` too? Any idea what might cause them? I'm not hitting the problem in Epiphany. If you cannot test, reposts appreciated. Thanks! #CSS

Video fill text on @codepen.io codepen.io/thebabydino/... Wraps naturally, is selectable, easily stylable from the #CSS. May have anything around text: an interactive canvas, another vid. Gets play button for vid if browser blocks autoplay/ prefers-reduced-data/ motion. Paused if outside viewport.

💡 CSS Tip! Have you ever tried to use "auto" within clamp()? Unfortunately, it doesn't work, but it's now possible using the new calc-size()! css-tip.com/clamp-auto/ The same applies to all the sizing values (min-content, max-content, fit-content, etc.)

A little codepen that showcases how we approximate CSS corner-shape using cubic beziers in blink. codepen.io/noamr-the-se... Hopefully @fserb.com will explain to me at some point how he got to this. Gemini could only guess 😆 Full blog post about corner-shape weird stuff when I become less lazy.

Scientists found a jellyfish that can grow as big as a school bus off Argentina's coast! On a deep-sea expedition led by @SchmidtOcean, researchers saw a rare phantom jellyfish, which has arms that can be over 30 feet long. See more of their findings: https://bit.ly/46o1snR

I have no idea WTF I clicked for this to open.

Hire me for small projects ko-fi.com/anatudor/com...

Make that every damn waking moment, not sometimes.

@jakearchibald.com Do you know if there's a way of emulating prefers-reduced-motion from Firefox DevTools? Just like in Chrome DevTools 👇 Oh, and any idea about the status of prefers-reduced-data? (yeah, someone is losing her mind over the ramifications of serving an autoplaying video backdrop)

Is there still any point to most styles in visually hidden classes in '26? Any point to shrinking dimensions to `1px` and setting `overflow: hidden` when `clip-path` to nothing via `inset(50%)`/ `circle(0)` reduces clickable area to nothing? And then no `1px` dimensions = no need for `white-space`.