Also from Stockholm: I've never been this close to an owl 🦉 before... 🤯 And in case anyone is wondering how the checking out Scandinavian animals went, here's what I notably missed out on: ❌ brown bears (hibernating) ❌ Arctic foxes ¯\_(ツ)_/¯ ❌ reindeer (change of address) #Stockholm #owl #bird

I got to see this pictogram in real life 😂 a couple of minutes after amusingly snapping this photo. Saw someone approach them, then having to retreat after they made it clear they weren't having it. Angry geese 🪿 1 Foolish hooman 0 😈

Who did this? loops.video/v/cE5ykU_u1g

Wow, I need to prep more pottery for the holidays 😅 I wasn't expecting to nearly sell out! Just a few things left - if you order over the weekend, I'll get it shipped on Monday. There's a couple mugs, coffee pour-overs, and a few odds and ends art.miriamsuzanne.com

Help an idiot who cannot understand these things? I have a bunch of .otf files of the same font at different weights, uploaded them as assets on CodePen, so I basically have 6 links to .otf files now. How can I use them? Been looking at developer.mozilla.org/en-US/docs/W... but cannot understand...

Old albums I somehow never listened to before 👀 www.youtube.com/watch?v=cUf5...

👀 Our scientists used Gaia's data to craft the most accurate 3D map of star-forming regions in the Milky Way! 🌌 🧪🔭 🔗 esa.int/Science_Exploration/Space_Science/Gaia/Fly_through_Gaia_s_3D_map_of_stellar_nurseries

Concave rounded shape (real transparency) on @codepen.io codepen.io/thebabydino/... `clip-path`/ `mask` on the image don't know about the dimensions of corner elems. We need another way to create the shape taking into account how those elements are resized by text reflow. #CSS #subgrid #SVG #filter

No text duplication. A single image used. All with clever #CSS and #SVG #filter magic! 🪄✨ Uses `text-orientation: upright` for vertical text. Matrix filter extracts just the red areas of the image. These get intersected/ subtracted from the text. Live on @codepen.io: codepen.io/thebabydino/...

Another text effect on @codepen.io: codepen.io/thebabydino/... No text duplication whatsoever, no part of the effect baked into the font, no images save for the CSS gradient backdrop, no JS. All done with #SVG #filter magic 🪄✨ - can you figure out how before checking the code?

Outer + inner border for hue ring - 3 methods with a single div, no pseudos, all described in this public @ko-fi.com post: ko-fi.com/post/Outer--... Live demo on @codepen.io: codepen.io/thebabydino/... Best part? In practice, you'll need to use more than one because none works cross-browser. #CSS

Pure #CSS #3D demo on @codepen.io: polyhedra morphing sequence codepen.io/thebabydino/... Absolutely no magic numbers, everything computed. See Pen description for the how behind 😼 #Maths #geometry

#3D patterned text with stroke and inner shadow on @codepen.io codepen.io/thebabydino/... No text duplication whatsoever, no images other than CSS gradients and the page backdrop, no effects baked into the font, no JS. Just some clever #CSS and #SVG #filter magic! 🪄✨ Can you figure out how?

What I've been coding this morning: exploded #RGB #cube stuff. #CSS #3D

Midnight tunes www.youtube.com/watch?v=JFYV...

Another little text effect on @codepen.io: codepen.io/thebabydino/... No splitting text into spans - each line has a different look through `lh` magic. No text duplications, no images other than CSS gradients, no JS. Other clever #CSS tricks + #SVG #filter magic give the offset stroke look. ✨

Seriously, my spirit animal right there...

A #contenteditable #3D text effect on @codepen.io: codepen.io/thebabydino/... No text duplication, no images save for CSS gradients, no part of the effect baked into the font, no JS. It's all clever #CSS and #SVG #filter magic! 🪄✨ PS re: "trashed panda" 🦝🍾🥂🤪 www.bbc.com/news/article...

Lemmy's 50th birthday www.youtube.com/watch?v=sIUc...

Because codepen.io/thebabydino/... got picked on @codepen.io, here's a bit of context: it was made to answer a question on reddit and you can read through the thought process here www.reddit.com/r/css/commen... #CSS #filter

My take codepen.io/thebabydino/... Changes: ✨ `grid` + `position: sticky` instead of `position: absolute` to position lateral sideways links ✨ `writing-mode` instead of `transform` for these links to simplify positioning ✨ `clamp()` values instead of MQs ⇒ smooth changes instead of abrupt #CSS

Fit an integer number of columns of a certain minimum width within parent, overflow the rest - live on @codepen.io codepen.io/thebabydino/... Details on technique in this public @ko-fi.com post ko-fi.com/Post/Fit-an-... - if this helps you in any way, please consider supporting my work. #CSS #grid

Offset & blended layers effect on @codepen.io codepen.io/thebabydino/... No text duplication, no images, no effects baked into the font and no JS whatsoever. All done with some clever #CSS and #SVG #filter magic! 🪄✨

Cool text effect on @codepen.io codepen.io/thebabydino/... No text duplication whatsoever. No images save for CSS gradients. No JS. No effects baked into the font already. Only clever #CSS tricks and #SVG #filter magic! 🪄✨

Split text with blended half shadow on @codepen.io: codepen.io/thebabydino/... No text duplication whatsoever, no images other than CSS gradients, no funky fonts* - all done with #SVG #filter magic! 🪄✨ *font used here is fonts.google.com/specimen/Rub... - you can see the effect isn't baked into it

No text duplication letter peel effect! No images other than CSS gradients. Using #SVG filter magic 🪄✨ - see it live on @codepen.io codepen.io/thebabydino/... Doesn't work for you? Check Pen description/ comments.

A fun little text layers fanning out when hovering demo on @codepen.io: codepen.io/thebabydino/... No text duplication whatsoever, no JS, no images save for CSS gradients. A bit of #SVG #filter magic 🪄 creates the #3D text peeling effect. An entry for this week's #CodePenChallenge.

(OK)LCH makes no sense. 🤬 pure 100% RGB channels not equidistant on hue wheel 🤬 100% chroma doesn't max out the RGB channels, you must go above, fuck knows by how much 🤬 creating sufficient contrast text may fail for LCH 🤬 0%/ 100% lightness doesn't give black/ white without altering chroma

So I make a demo on @codepen.io and save it, then I make some more changes hit the save button again thinking I'm saving the changes and so on, but... then I discover the same thing multiple times? Those aren't forks and I've never meant to have the same thing multiple times...

🌖 This image shows the South pole of the Moon taken by the NASA's Lunar Reconnaissance Orbiter (LRO). It is the main candidate landing site for Artemis III. 🧪🔭 🔗 esa.int/Science_Exploration/Human_and_Robotic_Exploration/Orion/Artemis_III

"He didn't show up to the trial. Now, in all honesty, I wouldn't have shown up either if I had been in his shoes... but he actually had a good excuse! He had died the year before."

"Something went wrong" - yeah, I can see that much, but what?! #uselessErrorMessages

Retro dotted shadow text on @codepen.io codepen.io/thebabydino/... Contenteditable, no JS, no text duplication whatsoever, no images save for code-generated ones. More #SVG #filter magic! 🪄✨

🌪️ Our ExoMars TGO spacecraft captured these images of whirlwinds of dust on the Mars surface. 🔗 www.esa.int/Science_Expl...

#canvas blurry hoppers on @codepen.io: codepen.io/thebabydino/... #JS

😿 www.youtube.com/watch?v=GCQ0...

If you're a a patron on Patreon, you may have already seen this (plus an explanation of the Maths behind). I came across a #3D wave demo & forked it to make a version using #CSS mathematical functions depending on index custom properties instead of setting transform on each item.

Retro 3D 🍫🦋 effect on @codepen.io: codepen.io/thebabydino/... No text duplication whatsoever, no long shadow list, no funky fonts, no JS, no images other than CSS gradients. Extrusion is all #SVG #filter magic 🪄✨ - as illustrated by the recording below including the DevTools panel.

Concave rounded shape (real transparency) on @codepen.io codepen.io/thebabydino/... `clip-path`/ `mask` on the image don't know about the dimensions of corner elems. We need another way to create the shape taking into account how those elements are resized by text reflow. #CSS #subgrid #SVG #filter

Well, that wasn't me, not until now anyway... but I hate being accused for nothing, so let's make sure it's me too from now on.

Shortest day of the year, shortest hair of the year...

Sunday snowday.

Today is the December solstice at 15:03 GMT/16:03 CET. This @eumetsat.int MTG‑I1 image from 19 December 2025, 06:00 GMT, shows Earth’s day–night terminator tilted near its annual maximum of about 23.5°.

Options for fading an element's background image: a - if the backdrop behind the element is solid b - if the backdrop behind the element is another image Another 2 in 1 #CSS demo on @codepen.io: codepen.io/thebabydino/...

A cool thing I made on #CodePen: interactive demo illustrating how to use #SVG `feColorMatrix` to swap 2 channels of its input. codepen.io/thebabydino/... Viewport adaptive. Heavily commented code if you want to check how the demo works in the back. Makes use of modern #CSS features. Made with ❤️.

Because someone asked for this on reddit: an image that shows when hovering a nav item, under that nav item, but above all others and follows the pointer motion www.reddit.com/r/css/commen... Uses a tiny bit of #JS until we can get the pointer position in pure #CSS.

A little something on @codepen.io: pure #CSS icosphere of spheres codepen.io/thebabydino/... Very little code and I should be able to make the algorithm even more efficient. #CodePenChallenge

Basic #CSS snippets: double border options. Multiple no extra element, no extra pseudo techniques to get a double border, depending on what you want from it. Live on @codepen.io: codepen.io/thebabydino/... Nothing but the basics. Contenteditable code, updates visual result as you make changes. 😼

Because this quick @codepen.io thing I made is getting hearted for some reason... corner grid item with inner corner rounding and text wrapping around the corner codepen.io/thebabydino/... Some grid + shape-outside + container query units #CSS magic + #SVG filter magic. ¯\_(ツ)_/¯

Avatar border effect. Single `img` element (so no pseudos), minimal #CSS. Real transparency between actual image and border. Live on @codepen.io: codepen.io/thebabydino/...