Nostr notes by Ana Tudor 🐯

Hey, found another fraud taking @npub1sf7…gl68 demos, ...

2026-05-12T01:45:45Z

Hey, found another fraud taking CodePen (npub1sf7…gl68) demos, copy-pasting the screenshot and code with no mention it's someone else's work.

Oh, bonus, there's a script detecting ad blockers. Yeah, fuck off!

My original from years before https://codepen.io/thebabydino/pen/bGwYVOm

With a *real* explanation linked. #CSS

#tinyCSStip I like shorthands, I find them immensely useful. But ...

2026-04-30T09:17:19Z

#tinyCSStip

I like shorthands, I find them immensely useful. But it doesn't always make sense to drop it all in the shorthand and to have repetitions. Yeah, you can store that `.2s` in a #CSS variable. But is it really worth it if you're not even using it elsewhere in addition to not being dynamic?

Why do most pages take so damn long to load these days? I'm ...

2026-04-30T05:24:46Z

Why do most pages take so damn long to load these days?

I'm in Romania. My internet connection is excellent. Yet most websites got so damn slow. Including websites that weren't slow in the past.

I sometimes stare at pre-load rectangles or just empty space for over half a minute.

As far as I can tell, it seems to work on the actual video pages, ...

2026-04-24T19:29:59Z

In reply to nevent1q…t8lg
_________________________

As far as I can tell, it seems to work on the actual video pages, though not on search page results, which still have titles & descriptions translated.

Seriously, is there any way to prevent YouTube from automatically ...

2026-04-24T08:25:45Z

Seriously, is there any way to prevent YouTube from automatically translating the titles of the videos I'm seeing into the interface language? Same goes for auto-dubbing.

I just saw a video with a title that didn't make any sense at all because YT royally fucked up the translation.

Hi, Mastodon 🦣 - could you help me out? If you can test in ...

2026-02-17T09:03:48Z

Hi, Mastodon 🦣 - could you help me out?

If you can test in actual Safari, is this on-scroll demo glitchy there too like it is for me in Epiphany?

https://cdpn.io/pen/debug/JoKqRjZ

If you cannot test in actual Safari, boosts appreciated.

Thank you! 🙏

PS - Yes, I know it doesn't work in Firefox, it's because of this bug some rando filed a couple of years ago... https://bugzilla.mozilla.org/show_bug.cgi?id=1927325

#CSS #cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #frontend #cssAnimation #cssTransforms

A thing I've been working on to add to my shop ...

2026-02-15T18:39:46Z

A thing I've been working on to add to my shop https://ko-fi.com/anatudor/shop

You may have seen sliced & offset text before, but this also has its selection not only inverting the text, punching a hole through to the backdrop, but the selection is also sliced & offset. This you won't find elsewhere.

#CSS #SVG #filter #svgFilter

A little toggle on @npub1sf7…gl68 ...

2026-01-23T09:47:50Z

A little toggle on CodePen (npub1sf7…gl68) https://codepen.io/thebabydino/pen/VwzJjow

#CSS

Pure #CSS #3D demo on @npub1sf7…gl68: polyhedra morphing ...

2025-12-26T09:22:31Z

Pure #CSS #3D demo on CodePen (npub1sf7…gl68): polyhedra morphing sequence https://codepen.io/thebabydino/pen/abmNveW

Absolutely no magic numbers, everything computed.

See Pen description for the how behind 😼

#transform #cssTransform #polyhedron #cssTransforms #polyhedra #octahedron #tetrahedron #cube #Maths #geometry #cssVariables #code #coding #frontend #web #dev #webDev #webDevelopment

Concave rounded shape (real transparency, no covers) on ...

2025-12-22T13:39:02Z

Concave rounded shape (real transparency, no covers) on CodePen (npub1sf7…gl68) https://codepen.io/thebabydino/pen/KwMPrMM

`clip-path`/ `mask` on the image have no idea 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.

No magic numbers and no media/ container queries. Instead, we use #subgrid to add the cutout areas to a frame and on #SVG filters to round the shaped frame & to extract just the shaped image.

#CSS #filter #frontend

Exploding triakis octahedron (short pyramids added on top of the ...

2025-12-20T17:02:04Z

Exploding triakis octahedron (short pyramids added on top of the faces) turning into an excavated octahedron (short pyramids dug into the faces) with pure #CSS #3D - live on CodePen (npub1sf7…gl68): https://codepen.io/thebabydino/pen/DyrNrL

#Maths #geometry #polyhedra #css3D #cssTransform #cssTransforms #coding #code #transform #frontend #cssMaths #Sass #web #dev #webDevelopment #webDev #trigonometry #polyhedron #octahedron

Yeah, now that it got mentioned, I have seen that too, but what I ...

2025-12-17T18:29:03Z

In reply to nevent1q…aux5
_________________________

Yeah, now that it got mentioned, I have seen that too, but what I had in mind was original image (before) and altered image (after). Which is precisely what my example shows.

I don't consider the before and after to be *different ...

2025-12-17T18:18:34Z

In reply to nevent1q…7277
_________________________

I don't consider the before and after to be *different pictures*. Just *different versions* of the *same picture*.

Different? Or same image before and after having some kind of ...

2025-12-17T18:15:49Z

In reply to nevent1q…v9gl
_________________________

Different? Or same image before and after having some kind of effect applied?

I mean, I'm comparing the original image with the same image desaturated or whatever. I'm not going to compare an image of a basket of applies with an image of a pile of bananas.

Single element, minimal #CSS (20 declarations and only that many ...

2025-12-17T17:58:54Z

Single element, minimal #CSS (20 declarations and only that many to even out browser inconsistencies), minimal #JS (just updates a custom property value), comparison slider (original image vs. desaturated one) on CodePen (npub1sf7…gl68) https://codepen.io/thebabydino/pen/MWMvxxX

#code #coding #frontend #blending
#web #dev #webDev #webDevelopment
#blendMode

To access the free WiFi at the Munich airport, you can use ...

2025-12-04T06:53:18Z

To access the free WiFi at the Munich airport, you can use scooby@doo.com.

Also some of my compatridiots on this flight really need to be told a Hell lot more often to STFU and stop polluting silence with their stupid crap.

RE: https://mastodon.social/@anatudor/110688811266535252 ...

2025-11-22T15:23:34Z

RE: https://mastodon.social/@anatudor/110688811266535252

Nowadays, we can do better:

```
box-shadow: 0 1px 2px
rgb(from currentcolor r g b/ .65)
```

Cross-browser since September 2024.

#tinyCSStip #CSS #code #coding #frontend #web #dev #webDev #webDevelopment
nostr:note1r0x5w50e90p44s3wqxhul4mjt3fy5znneh2s4lppj0c5ghvh48fsdja7lf

I am begging you, please don't split your heading into two ...

2025-11-18T15:28:30Z

I am begging you, please don't split your heading into two separate `h2` elements with an `img` in between just to have the image in between your heading words.

This is what subgrid was made for!

#CSS #layout #cssLayout #code #coding #web #dev #webDev #webDevelopment

Grainy abstract #SVG backgrounds. A little @npub1sf7…gl68 demo: ...

2025-11-03T14:12:00Z

Grainy abstract #SVG backgrounds.

A little CodePen (npub1sf7…gl68) demo:
https://codepen.io/thebabydino/pen/azONXNb

Enjoy!

(created for my grainy gradients article https://frontendmasters.com/blog/grainy-gradients/)

#svgFilter #svgGradient #code #coding #web #dv #webDev #webDevelopment #frontend

I have a new article out! Super Simple Full-Bleed & Breakout ...

2025-10-31T18:46:48Z

I have a new article out!

Super Simple Full-Bleed & Breakout Styles
https://frontendmasters.com/blog/super-simple-full-bleed-breakout-styles/ - my take on an old problem using modern CSS solutions.

Using a spooky made up Halloween recipe to illustrate concepts.

PS Chris Coyier (npub1t0w…zgs2) told me to be proud of it 😛

#CSS #cssLayout #cssGrid #cssVariables #containerQueries #containerQuery #code #web #webDev #webDevelopment #dev #coding #frontend #Halloween

Nostr event nevent1qqsyqxp46cqnf4738ve4xj3p0dsmnuhjnvvclhpvnzh6c38v5l9qk0qzyrk7vz3f0c6rdys8k9vlz4yyyv2ndtxjpz5fxp8ma8qkd2wx2szr24ycm09

2025-09-24T18:33:33Z

😹

#cssChallenge2025 How would you code this with: ✨ 1 HTML ...

2025-08-29T05:42:19Z

#cssChallenge2025 How would you code this with:

✨ 1 HTML element, no JS, no SVG
✨ inner border interrupted by text box shape
✨ responsive
✨ text wraps depending on space
✨ contenteditable
✨ 1 image = the background one

(if you're Cheetah+ on Ko-fi/ Patreon, you know where to find the answer)

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

opacity: .5em Took me forever to figure out why this wasn't ...

2025-08-11T15:16:49Z

opacity: .5em

Took me forever to figure out why this wasn't working.

#CSS

2️⃣ `feColorMatrix`: swap channels ☆ interactive demo, ...

2025-07-01T11:29:22Z

In reply to nevent1q…636p
_________________________

2️⃣ `feColorMatrix`: swap channels ☆ interactive demo, adaptive layout - check it out on CodePen (npub1sf7…gl68) https://codepen.io/thebabydino/full/QWopRMK

An interactive, responsive demo illustrating how `feColorMatrix` can be used to swap channels. Another very special one.

#SVG #filter #svgFilter #JS #interactive #javascript #code #coding #frontend #CSS #web #dev #webDevelopment #webDev #cssGrid #cssLayout

Behind the demo https://mastodon.social/@anatudor/112242678457752295

I wrote a new article for Frontend Masters: Step Gradients with a ...

2025-06-30T18:05:26Z

I wrote a new article for Frontend Masters: Step Gradients with a Given Number of Steps!

Consider this problem: you are given 2 hex codes + a number of steps. How would you code a step gradient? Think about it, then see my solution https://frontendmasters.com/blog/step-gradients-with-a-given-number-of-steps/

Hope you enjoy, a lot of work went into it.

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

Hi, mastodon 🦣 can you help me out? Does this demo work for ...

2025-06-30T06:50:49Z

Hi, mastodon 🦣 can you help me out?

Does this demo work for you on actual Safari the same way it does for me in Chrome (SVG filter making the linear gradient stepped)?

https://codepen.io/thebabydino/pen/vEOPPQJ?editors=1101

Boosts appreciated if you cannot test yourself.

Thank you!

Stupid #a11y question: is it okay to have this structure? I need ...

2025-06-29T17:15:40Z

Stupid #a11y question: is it okay to have this structure?

I need a filter on the img, but not on the figcaption too, so I can't apply it on the figure.

Also can't apply it on the img because the img has a mask, which applies *after* filter, but I need it applied *before* https://bsky.app/profile/anatudor.bsky.social/post/3lmgrfcnbsc2k

#accessibility #html #code #coding #frontend #web #dev #webDevelopment #webDev #CSS

If a grid has `n` columns, it has `n - 1` gaps in between them. ...

2025-06-26T19:13:45Z

If a grid has `n` columns, it has `n - 1` gaps in between them. Enjoy this interactive CodePen (npub1sf7…gl68) demo illustrating the concept: https://codepen.io/thebabydino/pen/LEVqOpZ

#CSS #cssGrid #cssLayout #code #coding #web #dev #webDev #webDevelopment #frontend

I turn 13 on @npub1sf7…gl68 today, so after my most hearted ...

2025-06-25T20:41:37Z

I turn 13 on CodePen (npub1sf7…gl68) today, so after my most hearted demos (https://mastodon.social/@anatudor/114499264888606204)... here are 13 of MY personal faves!

1️⃣ Pure CSS music toy - this one's a really special one for me https://codepen.io/thebabydino/pen/WNGPjLx
#CSS transforms for the #3D, CSS variables for the dynamic shading.

The how 😼 https://www.youtube.com/watch?v=_CV364uqP3U

#css3d #transform #cssTransform #filter #cssFilter #frontend #code #coding #web #dev #webDev #webDevelopment

5️⃣ 850 ♥️ No SVG, no image fluid slider ...

2025-05-23T16:37:46Z

In reply to nevent1q…ty08
_________________________

5️⃣ 850 ♥️ No SVG, no image fluid slider https://codepen.io/thebabydino/pen/qByGqOm

#JS used only for
a) feature support detection
b) updating slider value in --val

Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler

One of my best sliders on CodePen (npub1sf7…gl68).

#CSS #slider #rangeInput #coding #web #dev #webDevelopment #webDev #code #frontend #cssGrid #cssMask #cssGradient

4️⃣ 909 ♥️ neon hex ...

2025-05-21T14:58:30Z

In reply to nevent1q…s9q7
_________________________

4️⃣ 909 ♥️ neon hex https://codepen.io/thebabydino/pen/zGmdep

Most people know my CSS stuff, but this was my most hearted CodePen (npub1sf7…gl68) demo for some three quarters of a decade... and it's a #canvas one! The #JS feels dated nowadays, but oh, well... still got a soft spot for this one.

#code #coding #frontend #hexGrid #web #dev #webDev #webDevelopment #geometry

I wrote something about #AI... something with a long title! ...

2025-05-20T16:38:33Z

I wrote something about #AI... something with a long title!

ChatGPT and the proliferation of obsolete and broken solutions to problems we hadn’t had for over half a decade before its launch https://frontendmasters.com/blog/chatgpt-and-old-and-broken-code/

It takes the #ChatGPT answer to a particular question, dissects it and goes through a bit of web history to explain what ChatGPT gets wrong and why.

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

Here's a little image gallery demo I made on @npub1sf7…gl68 ...

2025-05-20T16:17:53Z

Here's a little image gallery demo I made on CodePen (npub1sf7…gl68)
https://codepen.io/thebabydino/pen/LEYrVaE

Almost pure #CSS. Minimal #JS for changing the index of the current image on click.

For the how ensuring the #3D rotated side images have a given 2D projection on the screen, see https://stackoverflow.com/a/75063640/1397351

#cssTransforms #cssTransform #coding #web #dev #webDev #webDevelopment #code #frontend #Maths #geometry

3️⃣ 1044 ♥️ Pure #CSS gravity button ...

2025-05-20T15:31:02Z

In reply to nevent1q…lelu
_________________________

3️⃣ 1044 ♥️ Pure #CSS gravity button https://codepen.io/thebabydino/pen/bGzeQrv - a bit mixed about it, it was just an exercise in getting a certain result - don't use it in the wild!

My first ever CodePen (npub1sf7…gl68) demo to get to 1K ♥️. And it got copied left and right.
¯\_(ツ)_/¯

#cssTransforms #cssTransform #coding #web #dev #webDev #webDevelopment #code #frontend

Said it before I was posting here, saying it again: fuck your ...

2025-05-20T10:19:08Z

Said it before I was posting here, saying it again: fuck your "legitimate interest" https://www.theregister.com/2025/05/14/metas_still_violating_gdpr_rules/

2️⃣ 1076 ♥️ Simplest inner glow card animation ...

2025-05-20T07:04:57Z

In reply to nevent1q…20hu
_________________________

2️⃣ 1076 ♥️ Simplest inner glow card animation https://codepen.io/thebabydino/pen/WNVPdJg - a super simple pure #CSS demo I made in a few minutes to answer a reddit question and never expected would even get noticed much. It was my only 2024 demo to make into the most hearted 100 Pens of the year on CodePen (npub1sf7…gl68).

#cssFilter #borderImage #glow #code #cssGradient #conicGradient #coding #web #dev #webDevelopment #webDev #frontend

Because somebody hearted this demo I made 7 years ago on ...

2025-05-13T16:35:38Z

Because somebody hearted this demo I made 7 years ago on CodePen (npub1sf7…gl68) and it hit me I've never shared it here: pure #CSS 1 div animated 🌈 ∞ logo

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

#code #coding #frontend #cssGradient #web #dev #webDev #webDevelopment #cssVariables #oneDiv #singleDiv #rainbow #infinity

I turn 13 on @npub1sf7…gl68 in June, so here are my 13 most ...

2025-05-13T07:08:50Z

I turn 13 on CodePen (npub1sf7…gl68) in June, so here are my 13 most hearted demos:

1️⃣ 1092 ♥️ #CSS infinite #scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb - my only demo to ever get to 1K ♥️ without being in most hearted of the year first

mostly CSS scroll-driven animations + tiniest bit of JS (~200 bytes for infinity part)

#cssVariables #cssTransforms #coding #code #frontend #cssTransform #3D #web #webDev #webDevelopment #dev #maths #mathematics #geometry #filter

Haven't had it in me to do anything for the past week's ...

2025-04-28T12:51:55Z

Haven't had it in me to do anything for the past week's #CodePenChallenge, so here's a demo from earlier this year that fits: #CSS infinite scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb

One of my most hearted demos ever & my only one to get over 1000 ❤️ without being in the most hearted of previous year.

#SVG #cssGrid #scrollAnimation #filter #svgFilter #cssFilter #cssLayout #3D #cssTransforms #code #coding #frontend #web #dev #webDev #webDevelopment

Maybe don't rely on AI to answer your CSS questions. ...

2025-04-28T05:44:37Z

Maybe don't rely on AI to answer your CSS questions. Actually... without the maybe. Don't rely on AI to answer your CSS questions.

#CSS #AI #aiCode #code #coding #frontend #web #dev #webDev #webDevelopment #cssGradient

Yes, that's precisely the problem. And if I add a max-width ...

2025-04-23T19:04:48Z

In reply to nevent1q…fyqd
_________________________

Yes, that's precisely the problem.

And if I add a max-width on the main, then the small ones always go below, even if there is room for one on the side.

Help an idiot who is useless with layout? How can I get this ...

2025-04-23T18:31:40Z

Help an idiot who is useless with layout? How can I get this result with flexbox and no media queries? If viewport wide enough, those small articles are on the side, one under the other. Otherwise, they're below, next to one another.

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

Thanks!

#CSS #flexbox #layout #code #coding #frontend

Web dev fail: just got an error message with no message. Just a ...

2025-04-23T11:06:10Z

Web dev fail: just got an error message with no message. Just a pink popup with a red ❌ icon...

¯\_(ツ)_/¯

Vibe coding, huh?

Guy asks online how to fix something about something he had ...

2025-04-22T13:40:23Z

In reply to nevent1q…h40v
_________________________

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... 🤦‍♀️

There is a flag for container style queries in Firefox! I repeat, ...

2025-04-11T11:39:54Z

There is a flag for container style queries in Firefox!

I repeat, there is a flag 🏁 in Firefox! 🦊

You just need to switch it to true!

Thanks, Nicolas Chevobbe (npub1w23…cr86)!

#CSS

Mastodon 🦣 - can you help me out? If you can test on actual ...

2025-04-07T07:15:08Z

Mastodon 🦣 - can you help me out?

If you can test on actual Safari (not another browser), does https://codepen.io/thebabydino/pen/EaxJmwJ?editors=1100 look the same for you as it does in my Epiphany screen? Or does the `conic-gradient()` cover the entire area?

Reposts appreciated if you cannot test. Thanks!

PS: Yes, I know it does NOT work Firefox or Chromium browsers https://github.com/web-platform-tests/interop/issues/717

#CSS #SVG #filter #svgFilter #cssFilter #web #dev #webDev #webDevelopment #code #coding #frontend

What's going on here? We have particles moving around inside ...

2025-04-01T07:19:55Z

In reply to nevent1q…2e9e
_________________________

What's going on here?

We have particles moving around inside a `.goo` assembly. How we do that (layout, animation) doesn't matter.

We blur these particles with a #CSS #filter (same blur radius or not). CSS allows us to use whatever unit we need for the blur radius. rem, cqi, lh.

#cssFilter #code #coding #frontend #web #dev #webDev #webDevelopment

Here's a neat little effect with no text duplication. Uses ...

2025-03-31T05:59:38Z

Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.

Live on CodePen (npub1sf7…gl68) https://codepen.io/thebabydino/pen/XJWxLWV

cc Bramus (on vacation 🏝️) (npub159n…rz7e)

#CSS #scroll #scrollAnimation #coding #cssAnimation #gradientText #frontend #web #dev #webDev #webDevelopment #code

#tinyCSStip Revert animated parent transform (like a scale or ...

2025-03-23T18:58:33Z

#tinyCSStip
Revert animated parent transform (like a scale or skew) on child without an extra animation using registered custom properties.

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

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

#cssWish That we could have a zero count for the number of ...

2025-03-23T16:40:27Z

#cssWish That we could have a zero count for the number of columns in `repeat()`.

That repeat count is often computed. Let's say I want double the width for selected column k out of n columns:

```
repeat(var(--k), var(--w))
calc(2*var(--w)
repeat(calc(var(--n) - var(--k) - 1), var(--w))
```

#CSS #code #coding #cssGrid #frontend #web #dev #webDev #webDevelopment #cssLayout

Changing the phone is not an option now either. The block they ...

2025-03-22T06:44:10Z

In reply to nevent1q…zjq8
_________________________

Changing the phone is not an option now either. The block they live in is being repainted and they've spent a fortune on it.

Even if he were to change his phone, I know my parents, ~$50-$60 is the most expensive they'll pay for a phone and they won't get something great for that price and they'll still have problems with it and come screaming at my door again.

Even though I'm clueless, I've never had a smartphone in my life, but somehow I must help, otherwise I'm a shit person.

Help because I'm being yelled at by everyone in the family ...

2025-03-22T06:37:27Z

Help because I'm being yelled at by everyone in the family over this and called names.

My dad's phone is his former work phone, a well-over 10+ years old iPhone. He wants me to help him update WhatsApp because he got a message that it's going to stop working in 2 days, but when he tries to to, he can't because not compatible with OS. What are the options?

Moving away from WA is not an option. Every-fucking-body uses it. All his work contacts, he's now freelancing and no WA means losing work.

Hello? Do you use #CSS grid? Ever wanted to have separators in ...

2025-03-21T15:53:31Z

Hello?

Do you use #CSS grid? Ever wanted to have separators in between grid areas?

Have you resorted to weird background gradient, box-shadow & more hackarounds to solve this?

Then check out this gap decorations proposal https://blogs.windows.com/msedgedev/2025/03/19/minding-the-gaps-a-new-way-to-draw-separators-in-css/

I forgot grid-area even accepts named areas. I never use those. ...

2025-03-21T07:15:21Z

In reply to nevent1q…nf45
_________________________

I forgot grid-area even accepts named areas. I never use those. If I use grid, I do it for stacking or for child positioning (both of which generally involve a single grid cell) or for moving around things depending on viewport size/ aspect ratio/ other options selected (both the grid-template and the grid-area numbers change based on what is ON 1/ OFF 0 currently, so changing layout means either toggling some control that adds/ removes/ shrinks/ expands items or changing viewport).

For everyone who has told me the #CSS + #SVG stuff I've been ...

2025-03-19T07:44:13Z

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

Ever wanted to get the number of auto-fit columns in CSS? ``` ...

2025-03-18T08:26:29Z

Ever wanted to get the number of auto-fit columns in CSS?

```
--u: 5em;
grid-template-columns: repeat(auto-fit, minmax(var(--u), 1fr))
```

It's now possible! Using registered #CSS vars, the tan division hack and container query units! Here's a little test on CodePen (npub1sf7…gl68):
https://codepen.io/thebabydino/pen/JojpBJr

#cssGrid #cssLayout #code #coding #web #dev #webDev #webDevelopment #layout #frontend

Because I saw a @npub1sf7…gl68 demo creating a hex grid using ...

2025-03-17T22:14:59Z

Because I saw a CodePen (npub1sf7…gl68) demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...

Here's a super simple modern #CSS grid + clip-path + mathematical functions responsive version with no breakpoints https://codepen.io/thebabydino/pen/QwWQqeR

#cssLayout #cssGrid #clipPath #hexagon #cssMaths #containerQueryUnits #code #cssVariables #coding #frontend #webDev #web #dev #webDevelopment

Made this a couple of years ago on @npub1sf7…gl68 but for some ...

2025-03-17T14:32:51Z

Made this a couple of years ago on CodePen (npub1sf7…gl68) but for some reason never shared it: a hopefully accessible base for a smooth elastic dropdown https://codepen.io/thebabydino/pen/qBJENKM

Based on a thing at a now dead link which did something of the kind with a huge div soup.

#css #js #a11y #dropdown #coding #code #web #dev #webDev #webDevelopment #frontend

Someone hearted this button ripple effect demo on ...

2025-03-17T14:00:05Z

Someone hearted this button ripple effect demo on CodePen (npub1sf7…gl68) (coded about half a decade ago) and made me notice it still said "only works in Chromium" - as of last summer, it's cross-browser! 🥳🎉

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

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

Know how border-image & border-radius don't play nice ...

2025-03-17T08:21:34Z

Know how border-image & border-radius don't play nice together?

(interactive https://codepen.io/thebabydino/pen/jxZyed)

#tinyCSStip there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!

clip-path: inset(0 round $r)

CodePen (npub1sf7…gl68) demo: https://codepen.io/thebabydino/pen/qBELJGY?editors=1100

(and yes, this is a tip I first shared on twitter over half a decade ago https://x.com/anatudor/status/1219916121341644807 )

#CSS #clipPath #cssClipPath #coding #web #dev #webDev #webDevelopment #code #frontend #borderImage #borderRadius

Because someone just hearted a 5 year old @npub1sf7…gl68 demo ...

2025-03-11T08:44:00Z

Because someone just hearted a 5 year old CodePen (npub1sf7…gl68) demo https://codepen.io/thebabydino/pen/GRooBJm?editors=0100 I made using a #Sass function + looping to generate a #CSS 🌈: we don't need *any* Sass for this anymore! 🎉

We can now do it with

background:
linear-gradient(in hsl longer hue 90deg,
hsl(0, 95%, 65%) 0 0)

#SCSS #loop #looping #newCSS #rainbow #cssGradient #coding #code #frontend #web #dev #webDev #webDevelopment #hueInterpolation

Wishing Osky a speedy recovery! 🐺

2025-03-06T14:02:43Z

In reply to nevent1q…wmsr
_________________________

Wishing Osky a speedy recovery! 🐺

Made a gallery of such #SVG gradient + #filter effects blobs on ...

2025-02-28T20:15:01Z

In reply to nevent1q…xkkl
_________________________

Made a gallery of such #SVG gradient + #filter effects blobs on CodePen (npub1sf7…gl68)
https://codepen.io/thebabydino/full/YPzNWoR

Also includes an explanation of the how behind and interaction: the focal point of the `radialGradient` the blabs start from follows the cursor on hover.

Different blobs for light/ dark mode. 😼

#svgGradient #cssGradient #blob #grainy #radialGradient #svgFilter #grain #code #coding #frontend #distortion #web #dev #webDev #webDevelopment #filterEffect

Grainy distorted gradient blob: 1 #SVG `radialGradient` (setting ...

2025-02-28T14:42:54Z

Grainy distorted gradient blob: 1 #SVG `radialGradient` (setting a focal point `fx,fy`) vs. multiple #CSS `radial-gradient()` layers (no option to control focal point).

Using filters for distortion & grain effect.

A bit more detail on this https://www.reddit.com/r/css/comments/1j03iyv/comment/mf89ri9/

#svgGradient #cssGradient #blob #grainy #radialGradient #svgFilter #filter #grain #code #coding #frontend #distortion #web #dev #webDev #webDevelopment

Someone asked how to get such an offset grid for any number of ...

2025-02-25T09:42:11Z

Someone asked how to get such an offset grid for any number of items, so here's my take on it https://www.reddit.com/r/css/comments/1ixnjjr/comment/menz0yk/ - define a 2 col grid via grid-template-columns, make all items span 3 rows, then offset down the 2nd item (placed on the second column) by one row to start from the 2nd.

#CSS #cssGrid #cssLayout #code #coding #web #dev #webDev #webDevelopment #frontend

A button inside a button. As you can probably tell, it's ...

2025-02-23T11:40:29Z

A button inside a button. As you can probably tell, it's twitter doing this.

#a11y #facepalm

More trustworthy (and cuter) alarm system: 🐺

2025-02-22T11:21:36Z

In reply to nevent1q…apqf
_________________________

More trustworthy (and cuter) alarm system: 🐺

#tinyCodingTip Easily comment/ uncomment parts of code by ...

2025-01-26T18:56:37Z

#tinyCodingTip

Easily comment/ uncomment parts of code by removing/ adding a slash.

#code #coding #dev

Know the animated 🌈 border + glow effect that's all the ...

2025-01-18T09:47:53Z

Know the animated 🌈 border + glow effect that's all the rage? It's normally done by adding an opaque cover on top of two 🌈 layers.

But what if we wanted a (semi)transparent background within the border? It's possible with pure #CSS!

Heavily commented on CodePen (npub1sf7…gl68) https://codepen.io/thebabydino/pen/KwPBvzo

#cssGradient #conicGradient #code #web #dev #webDev #webDevlopment #frontend #coding #cssAnimation #rainbow

I made a thing: scroll-driven, almost pure #CSS infinite circular ...

2025-01-17T21:22:40Z

I made a thing: scroll-driven, almost pure #CSS infinite circular gallery rotation - check it out on CodePen (npub1sf7…gl68)
https://codepen.io/thebabydino/pen/XJrYqGb

Using scroll-driven animations and the tiniest bit of JS for the infinity part of it.

Made with 🖤 for this week's #CodePenChallenge.

cc Bramus (on vacation 🏝️) (npub159n…rz7e)

#SVG #cssGrid #scrollAnimation #filter #svgFilter #cssFilter #cssLayout #3D #cssTransforms #code #coding #frontend #web #dev #webDev #webDevelopment

The Ko-fi promote your page is ugly and the #CSS for it is ...

2025-01-17T16:21:23Z

The Ko-fi promote your page is ugly and the #CSS for it is inefficient (radial gradient covers with jagged edges 😿 https://bsky.app/profile/anatudor.bsky.social/post/3ktzrzon4sd2a).

So I made 2 better versions in this CodePen (npub1sf7…gl68) demo https://codepen.io/thebabydino/pen/PwYBNKx

Using a technique I first wrote about in 2015 https://css-tricks.com/the-backgound-clip-property-and-use-cases/

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

That's an anti-creep thing, I'm afraid. It's there ...

2025-01-09T09:06:54Z

In reply to nevent1q…skkh
_________________________

That's an anti-creep thing, I'm afraid. It's there precisely to make it look like an automatic account, even though it isn't.

It has always been very much searchable. You have no idea how ...

2025-01-09T08:56:57Z

In reply to nevent1q…eh2h
_________________________

It has always been very much searchable. You have no idea how much of a maniac I am when it comes to that 😭

... until it comes out of their skull the other way, through the ...

2025-01-09T08:38:44Z

In reply to nevent1q…6eex
_________________________

... until it comes out of their skull the other way, through the back. I hate it *that* much. Which is why I won't do it. Screw the algorithm, demo links are golden.

Anyway, if you were hoping for conclusions, I'm afraid I don't have any. I only have question marks.

So to some extent, I am trying to do what I've read it's ...

2025-01-09T08:35:20Z

In reply to nevent1q…efqm
_________________________

So to some extent, I am trying to do what I've read it's best to do on each.

Is that helping? LOL, no idea 🤷‍♀️

Cramming a ton of hashtags at the end on mastodon does mean some boosts from automated bot accounts, but I'm not sure that helps much.

Ditching all hashtags but a single one on twitter may help, but I refuse not to include CodePen links just for the sake of reach.

Whenever I see people do the avoid including links for the sake of reach, I want to smash a brick in their face repeatedly

Given I've been here for a while & on twitter even ...

2025-01-09T08:18:37Z

In reply to nevent1q…4rv5
_________________________

Given I've been here for a while & on twitter even longer, some of the accounts following are likely inactive. Realistically, that number is likely lower for both. Especially twitter.

+not paying for twitter is severely limiting reach (below 5% of what it would be otherwise).

Due to platform culture (no idea what else to call it), number of reposts is bound to be higher here than on others.

As you can probably tell, the posts are custom made manually for every platform (huge pain in the ass).

One of those useless engagement comparison posts. 🦋 bluesky @ ...

2025-01-09T07:58:28Z

One of those useless engagement comparison posts.

🦋 bluesky @ 4.3K followers (joined: Jul '23)
➕: 6
❤️: 27
🔖/📌: -
💬: 2

🦣 mastodon @ 1.7K followers (joined: Apr '17)
➕: 5
❤️: 12
🔖: ¯\_(ツ)_/¯
💬: -

🐦 twitter @ 15.3K followers (joined: Nov '09)
➕: 9
❤️: 104
🔖: 48
💬: 2

Yeah, okay, numbers out of context.

#tinyCSSsnippet I've been shocked 🙀 to learn has been ...

2025-01-05T08:23:18Z

#tinyCSSsnippet I've been shocked 🙀 to learn has been slept on:

```
.container { display: grid }
.stacked-item { grid-area: 1/ 1 }
```

I use it all the time to stack elements.

Stack faces of polyhedra before positioning them in 3D. Stack images. Stack 🥧 slices https://codepen.io/thebabydino/pen/XWvKjJJ

#CSS #code #coding #frontend #cssGrid #cssLayout #web #webDevelopment #dev #webDev #3D #geometry

Saw https://www.youtube.com/watch?v=An3QMWg3m1c linked last ...

2025-01-03T14:44:54Z

Saw https://www.youtube.com/watch?v=An3QMWg3m1c linked last evening & gave the challenge a quick go myself.

My approach was a mostly #CSS one, with minimal HTML (no extra wrappers) and JS (used only to update top item index, ~200 bytes minified).

While it was working, it wasn't pretty, so today I polished the demo & heavily commented the CSS - check it out on CodePen (npub1sf7…gl68): https://codepen.io/thebabydino/pen/jENaPjd

#cssGrid #cssSubgrid #cssMaths #Maths #code #coding #frontend #web #dev #webDev #webDevelopment #cssLayout #cssVariables

Some people might know these miniatures are one of my favourite ...

2024-12-27T14:25:00Z

Some people might know these miniatures are one of my favourite things at train stations in Germany.

A little pure #CSS 🌟🎄 #animation I made on @npub1sf7…gl68 ...

2024-12-25T18:11:47Z

A little pure #CSS 🌟🎄 #animation I made on CodePen (npub1sf7…gl68) a few years ago https://codepen.io/thebabydino/pen/bGwYVOm

#3D #transform #cssTransforms #code #cssAnimation #coding #frontend #xmas #web #dev #webDevlopment #webDev #tree #stars

By the way, this is my second article for Frontend Masters. My ...

2024-12-06T11:15:36Z

In reply to nevent1q…ne56
_________________________

By the way, this is my second article for Frontend Masters.

My first was a few months ago and it was about creating dynamic split effects (image, text, page) without any content duplication whatsoever https://frontendmasters.com/blog/split-effects-with-no-content-duplication/

#CSS #SVG #filter #blending #code #web #webDev #frontend #coding #dev #webDevelopment #blendMode #svgFilter #cssGradient

I have a new article out: 🎇 Pure CSS Halftone Effect in Only 3 ...

2024-12-04T11:09:07Z

I have a new article out: 🎇 Pure CSS Halftone Effect in Only 3 Declarations 🎇 https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/

This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns.

#CSS #pattern #gradient #halftone #cssPattern #cssGradient #filter #blending #blendMode #code #coding #frontend #web #dev #webDev #webDevelopment

I think this is the first and only time one of my posts on ...

2024-12-03T08:44:07Z

I think this is the first and only time one of my posts on Mastodon got boosted over 50 times and it wasn't a cat video. Even though I've never checked how many of those 58 boosts were for real and how many were bots boosting all on a certain hashtag. Because even with the ones that get barely a few boosts and faves, half of those usually come from bots here...

Completely unrelated, but that looks like a fun distorted ...

2024-11-25T20:14:55Z

In reply to nevent1q…w50e
_________________________

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

Someone hearted a Pen I made over a year ago, a no library, ...

2024-11-18T18:56:47Z

Someone hearted a Pen I made over a year ago, a no library, minimal JS version of another I found on CodePen (npub1sf7…gl68).

At the time, it didn't work in Firefox as it was transitioning custom properties and support for :has() there was spotty.

Now it's cross-browser codepen.io/thebabydino/pen/gOqYdJd

#CSS #cssTransition #mask #cssMask #revealEffect #textEffects #textEffect #code #coding #frontend #webDevelopment #web #dev #webDev

This little thing made this week's @npub1sf7…gl68 Spark! ...

2024-11-18T18:11:27Z

In reply to nevent1q…44v6
_________________________

This little thing made this week's CodePen (npub1sf7…gl68) Spark!

https://codepen.io/spark/415

#CSS #code #coding #frontend #web #dev #cssGradient #webDevelopment #webDev #glow #cssAnimation #rainbow

Someone asked how to get such a card with text content, ...

2024-11-13T06:57:34Z

Someone asked how to get such a card with text content, transparent background, rounded corners and a rotating inner edge rainbow gradient glow, so here's my take on it https://www.reddit.com/r/css/comments/1gpzzgu/comment/lwvj967/

Live demo on CodePen (npub1sf7…gl68)
https://codepen.io/thebabydino/pen/WNVPdJg (single div, heavily commented)

#CSS #gradient #gradients #cssGradient #glow #gradientGlow #code #coding #web #dev #webDev #webDevelopment #frontend

Here's a fun #3D layered text effect on @npub1sf7…gl68 ...

2024-11-11T07:31:52Z

Here's a fun #3D layered text effect on CodePen (npub1sf7…gl68) https://codepen.io/thebabydino/pen/vYMdzVy

No text duplication whatsoever, no text-shadow, no JS, no images save for CSS gradients.

All done with #CSS gradients, transforms & #SVG #filter magic! 🪄

Also an entry for this week's
#CodePenChallenge.

#svgFilter #textEffects #code #textEffect #web #dev #webDev #webDevelopment #coding #frontend

Come as you are¹ on @npub1sf7…gl68 ...

2024-11-08T18:23:30Z

Come as you are¹ on CodePen (npub1sf7…gl68) https://codepen.io/thebabydino/pen/yLwaNQr

No text duplication whatsoever, no text-shadow, no images save for #CSS gradients, no JS, just #SVG #filter magic.

Also an entry for this week's #CodePenChallenge.

¹but fully clothed

#svgFilter #textEffects #code #textEffect #web #dev #webDev #webDevelopment #coding #frontened

Not fully happy with it, original Dribbble shot inspiring it uses ...

2024-11-05T19:25:06Z

In reply to nevent1q…kvta
_________________________

Not fully happy with it, original Dribbble shot inspiring it uses a cursive font with letters connected, which I feel looks much better, but I'm relying on text-stroke for the double outline & text-stroke is unusable with such fonts without changing paint-order, which I can't do here because the whole idea behind two strokes is a semi-transparent stroke, half in (on top of the fill) half out. Inner half produces the white stroke, outer half produces the blue stroke.

Another #3D text demo for this week's #CodePenChallenge ...

2024-11-05T18:58:39Z

Another #3D text demo for this week's #CodePenChallenge https://codepen.io/thebabydino/pen/pomoEzQ

No JS, no text duplication whatsoever, no text-shadow. #SVG #filter magic 🪄 creates the 3D effect, the letter face pattern (in combination with with CSS gradients), the double outline (combined with text-stroke).

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

Ah, so much better! https://codepen.io/thebabydino/pen/yLmxePV ...

2024-11-05T18:03:32Z

In reply to nevent1q…jcfj
_________________________

Ah, so much better!
https://codepen.io/thebabydino/pen/yLmxePV

Thanks to Sara Joy :happy_pepper: (npub1jpy…yfwv) for finding the font for me!

(the font is The Blacklist by Thomas Boucherie)

The one thing I'm not happy with is the font. If you have any ...

2024-11-05T10:32:21Z

In reply to nevent1q…jcfj
_________________________

The one thing I'm not happy with is the font. If you have any free font suggestions that are nicer/ closer to the original Dribbble shot https://dribbble.com/shots/21687965-3D-Editable-Text-Effect - let me know! Picking fonts is not something I'm good at.

#typography

A 🆒 no JS, no text duplication, no shadows #3D text effect I ...

2024-11-05T10:14:58Z

A 🆒 no JS, no text duplication, no shadows #3D text effect I made on CodePen (npub1sf7…gl68) for the week's #CodePenChallenge https://codepen.io/thebabydino/pen/yLmxePV

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).

Also: did anyone else have trouble with uploading videos here? This is just a 5 second 500KB vid... 😿

#svgFilter #code #coding #frontend #web #dev #webDev #webDevelopment #noJS #textEffects #textEffect

#tinyCSStip Want to create a triangle with all edges equal in 4 ...

2024-10-31T09:28:49Z

#tinyCSStip Want to create a triangle with all edges equal in 4 simple #CSS declarations?

Such a triangle also has all vertex angles equal = (sum of angles in a triangle)/3 = 180°/3 = 60°

👉 https://en.wikipedia.org/wiki/Sum_of_angles_of_a_triangle

Knowing its edge length a, its height is a·sin(60°).

Aspect ratio of the box
a/(a·sin(60°)) = 1/sin(60°)

#cssMaths #Maths #Mahematics #code #trigonometry #triangle #coding #webDev #frontend #web #webDevelopment #dev

#cssGotcha `:has()` cannot be nested! From the spec: `:has()` is ...

2024-10-24T15:37:24Z

#cssGotcha `:has()` cannot be nested!

From the spec: `:has()` is not valid within `:has()`.

#CSS #gotcha #code #coding #frontend #webDev #dev #web #webDevelopment #cssSelector

If you're going to use #SVG icons/ illustrations, some basic ...

2024-10-24T06:12:24Z

If you're going to use #SVG icons/ illustrations, some basic knowledge about basic shapes & the `viewBox` can help. A lot.

Tools like SVGOMG can do *a lot*, but can't identify when you're better off using another basic shape.

Here's a little case study ✨
https://reddit.com/r/css/comments/1ga62jo/comment/ltbrdlw/

#svgShapes #code #coding #frontend #web #dev #webDev #webDevelopment

The ninth is a realistic image grainy shadow effect: ...

2024-10-23T18:26:26Z

In reply to nevent1q…k569
_________________________

The ninth is a realistic image grainy shadow effect:

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

Using a single img element for each. No image duplication in the markup or CSS.

The magic 🪄 is all in a pretty simple #SVG #filter.

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

#tinyCSStip `:is()` is such a great new-ish #CSS feature that ...

2024-10-23T09:04:24Z

#tinyCSStip

`:is()` is such a great new-ish #CSS feature that helps eliminate repetition in selectors ✨

#code #coding #frontend #cssSelector #web #dev #webDev #webDevelopment