Lightnews — Scholar-powered news

Ana Tudor @anatudor.bsky.social · 1h

Yes. And yes, that's the obvious one, which I wanted to avoid due to accessibility issues with `display: contents`.

Ana Tudor @anatudor.bsky.social · 5h

You can find my solution here www.reddit.com/r/css/commen...

but try to see if you can figure it out yourself before checking

#CSS

How to approach this simple responsively layout in pure, modern CSS ?

www.reddit.com

2

Ana Tudor @anatudor.bsky.social · 6h

#cssChallenge2025

How would you get this result?The sections have unknown heights, impossible to predict how tall each will be and on narrow screens, we first have the top ones one under another and then the bottom ones one under another.

#CSS

2 3

Ana Tudor @anatudor.bsky.social · 6h

Other than undoing the effects of setting `display: flex` on the `html`, which is also not a smart thing to do, no idea. But I see this quite often.

1

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · 1d

Please stop setting `width: 100vw` on the `body`.

It's unnecessary. By default, the `body` stretches horizontally as much as necessary.

It's problematic. Setting `width: 100vw` on it can cause overflow even if you remove the default `margin`... because the page may have a scrollbar.

#CSS

6 11 63

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · Nov 1

Was meant to become a CSS-Tricks post, but never happened, so here's the demo codepen.io/thebabydino/...

A star is made up of n rhombic arms with an acute angle computed as `360°/n`, rotated around their common vertex point. Each arm is initially a square with a diagonal split gradient.

#svg #pug

Illustration of the stars with 5 arms, each arm highlighted in a different colour.

- let l = 90;

svg(width='0' height='0')
//- diagonal split gradient
linearGradient#g(x2='1' y1='1')
stop(offset='.5' stop-color='#e78f4c')
stop(offset='.5' stop-color='#845d81')
//- arm is initially a square
rect#a(width=l height=l fill='url(#g)')

<!-- compiled code -->
<svg width='0' height='0'>
<!-- diagonal split gradient -->
<linearGradient id='g' x2='1' y1='1'>
<stop offset='.5' stop-color='#e78f4c'/>
<stop offset='.5' stop-color='#845d81'/>
</linearGradient>
<!-- arm is initially a square -->
<rect id='a' width='90' height='90' fill='url(#g)'/>
</svg>

1 5

Ana Tudor @anatudor.bsky.social · 21h

Really? That's what I use most of the time. I find not needing that is the edge case.

Placing things on circles, cylinders(codepen.io/thebabydino/...), spirals (2D codepen.io/thebabydino/... or 3D codepen.io/thebabydino/...), 3D shapes (codepen.io/thebabydino/... or codepen.io/thebabydino/...).

CSS infinite scroll gallery

Loosely inspired by [this Dribbble shot](https://dribbble.com/shots/24920850-Community-Gallery) and [this portfolio](https://icantcontrolmyego.net/). ...

codepen.io

2

Ana Tudor @anatudor.bsky.social · 1d

The time of year to remember this absolute gem... 😈

www.youtube.com/watch?v=a8u1...

Pretty Songs with Death Metal Lyrics!

YouTube video by Steve Terreberry

www.youtube.com

2

Ana Tudor @anatudor.bsky.social · 1d

Forgive me for I have sinned and asked Gemini for dummy text for CodePen demos...

Partial screenshot of me asking Gemini for "an unreal Halloween recipe featuring things that are bound to sound disgusting like spider webs, human limbs, roaches, mud, snake venom?" and getting back a "gloriously grotesque" recipe for "Grave Dirt and Viper's Brew".

4

Ana Tudor @anatudor.bsky.social · 1d

They don't factor in scrollbars. Not per spec & last I checked, not in practice in browsers either.

www.smashingmagazine.com/2023/12/new-...

`dvh` helps if the keyboard pops up or smth. But `dvw` & `svw` include the vertical scrollbar.

Container query units are the answer bsky.app/profile/anat...

1 2

Ana Tudor @anatudor.bsky.social · 1d

As for the `margin`, I'd either zero it on all elements (poor man's reset):

```
* { margin: 0 }
```

Or specifically on the `body`.

```
body { margin: 0 }
```

The `html` doesn't have a `margin` by default. And neither do `div` elements, which I'm assuming `#app` is.

5

Ana Tudor @anatudor.bsky.social · 1d

Why?

Assuming `#app` is the one visible child of the `body`, you can have it cover all available viewport space minus any scrollbars with:

```
html, body { display: grid }
html { min-height: 100% }
```

Then you can set any styles you want on the `#app`, including a flex layout if that works best.

2 6

Ana Tudor @anatudor.bsky.social · 1d

Even if it wasn't problematic, setting `width: 100vw` on the `body` would still be unnecessary.

And now we have container query units. Make the `html` a container, use `100cqw`. Like here codepen.io/thebabydino/...

If other containers are needed, we can do this frontendmasters.com/blog/using-c...

Super simple full-bleed + breakout tactic

[My take on a question asked on reddit](https://www.reddit.com/r/css/comments/1o3j0cl/comment/niwx1pj/). --- If the work I've been putting out since ...

codepen.io

1 6

Ana Tudor @anatudor.bsky.social · 1d

Please stop setting `width: 100vw` on the `body`.

It's unnecessary. By default, the `body` stretches horizontally as much as necessary.

It's problematic. Setting `width: 100vw` on it can cause overflow even if you remove the default `margin`... because the page may have a scrollbar.

#CSS

6 11 63

Reposted by Ana Tudor

Camil Stoenescu @camilstoenescu.bsky.social · 1d

Stray beauty #cat #Bucharest

1 16

Ana Tudor @anatudor.bsky.social · 2d

This uses JS and a circle for each dot. However, it can be done with pure CSS and one element using this technique frontendmasters.com/blog/pure-cs...

7 33

Ana Tudor @anatudor.bsky.social · 2d

Old code in general is a thing with LLMs frontendmasters.com/blog/chatgpt...

ChatGPT and the proliferation of obsolete and broken solutions to problems we hadn’t had for over half a decade before its launch

It was a lovely day on the internet when someone asked how to CSS animated gradient text like ChatGPT’s “Searching the web” and promptly got an answer saying “Have you tried asking ChatGPT? Here’s wha...

frontendmasters.com

2 10

Ana Tudor @anatudor.bsky.social · 3d

I know that, but from a practical standpoint, `curve` doesn't work in Firefox at this point even with the flag enabled (`arc` does). At the same time, if you do have the flag enabled, the `@supports` test with a `curve` in it passes, so in addition to `shape()` failing, the fallback fails too.

1

Ana Tudor @anatudor.bsky.social · 3d

Also in theses cases, it's really useful to either min the height to twice the rounding size or max the rounding to half the height.

Ana Tudor @anatudor.bsky.social · 3d

Did something similar with `arc` instead of `curve`
codepen.io/thebabydino/...

`arc` is already supported in Firefox behind a flag. While `curve` isn't, but the `@supports` test with a `curve` path still passes, so then it doesn't even use the fallback.

Cool concave rounding header component

Mentioned in my [Obsessing Over Smooth `radial-gradient()` Disc Edges](https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edge...

codepen.io

3 3

Ana Tudor @anatudor.bsky.social · 3d

Don't miss your flight. I once heard my name called because I was so lost in CSS, it didn't register with me people were boarding.

1 2

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · Jul 20

#tinyCSStip: sphere volume distribution with polar coordinates!

u = rand(0, 1)
v = rand(0, 1)
w = rand(0, 1)

θ = 2·π·u
φ = acos(2·v - 1) - π/2

❌ DON'T (middle cluster)
r = R·w

✅ DO
r = R·∛w

➞ x,y,z
x = r·cos(φ)·sin(θ)
y = r·sin(φ)
z = r·cos(φ)·cos(θ)

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

Uniform distribution of dots within the volume of a sphere.

1 1

Ana Tudor @anatudor.bsky.social · 4d

For over a decade, by far my most popular Stack Overflow answer codepen.io/thebabydino/...

#CSS

Arched menu (no JS, no SVG)

2015 version of [a menu I created back in 2012](http://dabblet.com/gist/3979221/cb69c5e8ccf0745fff2c94b47b27b108931f1a15) to answer [this SO question](...

codepen.io

10

Ana Tudor @anatudor.bsky.social · 4d

Little seasonal thing: candy 🍬 ghost 👻 buttons, 3 techniques in one @codepen.io demo
codepen.io/thebabydino/...

Detailed explanation of the how behind in this @css-tricks.bsky.social post css-tricks.com/css-ing-cand...

Bonus: a hover animated, Chrome-only version codepen.io/thebabydino/...

#CSS

Same buttons in various stages of hover, when the filling content-box get XOR-ed with the text.

2 4

Ana Tudor @anatudor.bsky.social · 4d

An older little #canvas demo on @codepen.io: codepen.io/thebabydino/...

mouseover the 🔺🔻 - your eyes see what your mind wants to see 😼

#JS

Screenshot of the linked CodePen demo. A grid of randomly oriented, randomly smaller or bigger equilateral triangles. This grid of triangles is painted using a rainbow radial gradient at the mouse cursor position, with triangles further away from the cursor also fading a little.

1