Luuk Tol
@luuk-tol.bsky.social
- Front-End Student at UOAS (University of Applied Sciences)
- Web Nerd
- I do music on the side (Hardstyle Artist)
- Web Nerd
- I do music on the side (Hardstyle Artist)
Reposted by Luuk Tol
January 19, 2026 at 4:32 PM
Reposted by Luuk Tol
fwiw this is huge for web components and avoidance of potentially expensive :has()
Also, this container query can query up beyond shadow boundaries 👀🤘
Also, this container query can query up beyond shadow boundaries 👀🤘
```#css
.container {
container-name: --example;
}
h1 {
color: red;
@container --example {
color: green;
}
}
```
Canary and Tech Preview both showing green text! Gettin there, excited for these to hit stable.
.container {
container-name: --example;
}
h1 {
color: red;
@container --example {
color: green;
}
}
```
Canary and Tech Preview both showing green text! Gettin there, excited for these to hit stable.
January 18, 2026 at 9:24 PM
fwiw this is huge for web components and avoidance of potentially expensive :has()
Also, this container query can query up beyond shadow boundaries 👀🤘
Also, this container query can query up beyond shadow boundaries 👀🤘
Reposted by Luuk Tol
How would you code this when you *don't know* the size of the buttons and therefore don't know how much you need to clip/ mask out of the cards?
Real transparency. No JS. No sharp scoop ends, they're all rounded.
(because somebody asked for help with such a layout www.reddit.com/r/css/commen...)
Real transparency. No JS. No sharp scoop ends, they're all rounded.
(because somebody asked for help with such a layout www.reddit.com/r/css/commen...)
January 19, 2026 at 8:15 AM
How would you code this when you *don't know* the size of the buttons and therefore don't know how much you need to clip/ mask out of the cards?
Real transparency. No JS. No sharp scoop ends, they're all rounded.
(because somebody asked for help with such a layout www.reddit.com/r/css/commen...)
Real transparency. No JS. No sharp scoop ends, they're all rounded.
(because somebody asked for help with such a layout www.reddit.com/r/css/commen...)
Reposted by Luuk Tol
January 12, 2026 at 10:16 PM
Reposted by Luuk Tol
⚙️ New CSS Generator
Create those fancy (random) wavy dividers using the new shape() function! 🤩
css-generators.com/wavy-divider/
Play with the settings and get the code in no time.
✅ One property
✅ Responsive
✅ Works with any element
Enjoy!
Create those fancy (random) wavy dividers using the new shape() function! 🤩
css-generators.com/wavy-divider/
Play with the settings and get the code in no time.
✅ One property
✅ Responsive
✅ Works with any element
Enjoy!
January 14, 2026 at 10:15 AM
⚙️ New CSS Generator
Create those fancy (random) wavy dividers using the new shape() function! 🤩
css-generators.com/wavy-divider/
Play with the settings and get the code in no time.
✅ One property
✅ Responsive
✅ Works with any element
Enjoy!
Create those fancy (random) wavy dividers using the new shape() function! 🤩
css-generators.com/wavy-divider/
Play with the settings and get the code in no time.
✅ One property
✅ Responsive
✅ Works with any element
Enjoy!
Reposted by Luuk Tol
A little 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
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
January 14, 2026 at 1:56 PM
A little 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
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
Reposted by Luuk Tol
This looks OK, but it would be so much more satisfying with more particles. Check out how nice it is with 70 particles instead:
December 9, 2025 at 9:39 PM
This looks OK, but it would be so much more satisfying with more particles. Check out how nice it is with 70 particles instead:
Reposted by Luuk Tol
And another cool property that I am sure will be underrated in the future is position-area that can simplify the code.
You won't need calc() and you can easily switch between the different positions
demo: codepen.io/t_afif/pen/r...
You won't need calc() and you can easily switch between the different positions
demo: codepen.io/t_afif/pen/r...
January 8, 2026 at 7:47 PM
And another cool property that I am sure will be underrated in the future is position-area that can simplify the code.
You won't need calc() and you can easily switch between the different positions
demo: codepen.io/t_afif/pen/r...
You won't need calc() and you can easily switch between the different positions
demo: codepen.io/t_afif/pen/r...
Reposted by Luuk Tol
3 noise demo variations on @codepen.io - which do you prefer?
1️⃣ codepen.io/thebabydino/...
2️⃣ codepen.io/thebabydino/...
3️⃣ codepen.io/thebabydino/...
#SVG #filter #CSS #gradient
1️⃣ codepen.io/thebabydino/...
2️⃣ codepen.io/thebabydino/...
3️⃣ codepen.io/thebabydino/...
#SVG #filter #CSS #gradient
January 10, 2026 at 4:55 PM
3 noise demo variations on @codepen.io - which do you prefer?
1️⃣ codepen.io/thebabydino/...
2️⃣ codepen.io/thebabydino/...
3️⃣ codepen.io/thebabydino/...
#SVG #filter #CSS #gradient
1️⃣ codepen.io/thebabydino/...
2️⃣ codepen.io/thebabydino/...
3️⃣ codepen.io/thebabydino/...
#SVG #filter #CSS #gradient
Reposted by Luuk Tol
January 11, 2026 at 6:06 AM
Reposted by Luuk Tol
Look, we get it, your boss wants everything to work the same in every browser. We're all about progressive enhancement here but we know a lot of organisations don’t like working like that, so Sunkanmi is here to help you navigate implementing view transitions with that in mind.
A view transitions fallback: DOMContentLoaded + requestAnimationFrame()
Look, we get it, your boss wants everything to work the same in every browser. We're all about progressive enhancement here but we know a lot of organisations don’t like working like that, so Sunkanmi...
piccalil.li
December 4, 2025 at 5:08 PM
Look, we get it, your boss wants everything to work the same in every browser. We're all about progressive enhancement here but we know a lot of organisations don’t like working like that, so Sunkanmi is here to help you navigate implementing view transitions with that in mind.
Reposted by Luuk Tol
💡 CSS Tip!
How many selectors do you know for the HTML element? Only two, right? There are more!
It's time to discover the hidden selectors of the HTML element.
css-tip.com/root-selecto...
Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss a cool selector?
How many selectors do you know for the HTML element? Only two, right? There are more!
It's time to discover the hidden selectors of the HTML element.
css-tip.com/root-selecto...
Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss a cool selector?
December 4, 2025 at 11:02 AM
💡 CSS Tip!
How many selectors do you know for the HTML element? Only two, right? There are more!
It's time to discover the hidden selectors of the HTML element.
css-tip.com/root-selecto...
Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss a cool selector?
How many selectors do you know for the HTML element? Only two, right? There are more!
It's time to discover the hidden selectors of the HTML element.
css-tip.com/root-selecto...
Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss a cool selector?
Reposted by Luuk Tol
December 4, 2025 at 4:32 PM
Reposted by Luuk Tol
We wrapped up November with 18 outstanding websites added to Webzibition 🙌
A fantastic snapshot of what was released last month!
We can’t wait to see what December brings 😍
If you’re looking for fresh inspiration, don’t forget to check by: tympanus.net/codrops/webz...
A fantastic snapshot of what was released last month!
We can’t wait to see what December brings 😍
If you’re looking for fresh inspiration, don’t forget to check by: tympanus.net/codrops/webz...
December 4, 2025 at 10:22 AM
We wrapped up November with 18 outstanding websites added to Webzibition 🙌
A fantastic snapshot of what was released last month!
We can’t wait to see what December brings 😍
If you’re looking for fresh inspiration, don’t forget to check by: tympanus.net/codrops/webz...
A fantastic snapshot of what was released last month!
We can’t wait to see what December brings 😍
If you’re looking for fresh inspiration, don’t forget to check by: tympanus.net/codrops/webz...
Reposted by Luuk Tol
Test it out and let us know if it solves your needs!
Use the experimental-web-platform-features flag in Chrome 142+
Open questions:
- Should the last line of a paragraph be scaled?
- Is the current line-height behavior as expected?
- Should it scale non-text parts such as inline images together?
Use the experimental-web-platform-features flag in Chrome 142+
Open questions:
- Should the last line of a paragraph be scaled?
- Is the current line-height behavior as expected?
- Should it scale non-text parts such as inline images together?
Fit width text in 1 line of CSS
`text-grow: per-line scale;`
nerdy.dev/css-text-grow
(prototype in Canary 165+)
`text-grow: per-line scale;`
nerdy.dev/css-text-grow
(prototype in Canary 165+)
December 5, 2025 at 5:37 PM
Test it out and let us know if it solves your needs!
Use the experimental-web-platform-features flag in Chrome 142+
Open questions:
- Should the last line of a paragraph be scaled?
- Is the current line-height behavior as expected?
- Should it scale non-text parts such as inline images together?
Use the experimental-web-platform-features flag in Chrome 142+
Open questions:
- Should the last line of a paragraph be scaled?
- Is the current line-height behavior as expected?
- Should it scale non-text parts such as inline images together?
Reposted by Luuk Tol
The what, how, and why of #CSS clamp() by @cassidoo.co
The what, how, and why of CSS clamp()
The CSS clamp() function is a clean way to make your apps and sites responsive. Here's how!
cassidoo.co
December 5, 2025 at 11:35 AM
The what, how, and why of #CSS clamp() by @cassidoo.co
Reposted by Luuk Tol
A brief guide outlining the difference between "overflow: hidden" and "overflow: clip", along with practical use cases when you’ll find "overflow: clip" invaluable.
December 5, 2025 at 10:37 PM
A brief guide outlining the difference between "overflow: hidden" and "overflow: clip", along with practical use cases when you’ll find "overflow: clip" invaluable.
Reposted by Luuk Tol
Watched this and it was with pure joy and ended with a big smile on my face. Thanks @nerdy.dev at @beyondtellerrand.com www.youtube.com/watch?v=PMx-...
Adam Argyle – Midi Meets CSS – beyond tellerrand Berlin 2025
YouTube video by beyond tellerrand
www.youtube.com
November 28, 2025 at 2:33 PM
Watched this and it was with pure joy and ended with a big smile on my face. Thanks @nerdy.dev at @beyondtellerrand.com www.youtube.com/watch?v=PMx-...
Reposted by Luuk Tol
Responsive Letter Spacing
Minimizing the readability impact of a typographic brand requirement.
cloudfour.com
November 28, 2025 at 7:02 PM
Reposted by Luuk Tol
🚨 PSA: CSS Anchor positioning
Translation on anchor elements is now respected by positioned elements in Chrome 144+
I know this was quite frustrating if you ran into it!
chromestatus.com/feature/5201...
Translation on anchor elements is now respected by positioned elements in Chrome 144+
I know this was quite frustrating if you ran into it!
chromestatus.com/feature/5201...
December 1, 2025 at 5:03 PM
🚨 PSA: CSS Anchor positioning
Translation on anchor elements is now respected by positioned elements in Chrome 144+
I know this was quite frustrating if you ran into it!
chromestatus.com/feature/5201...
Translation on anchor elements is now respected by positioned elements in Chrome 144+
I know this was quite frustrating if you ran into it!
chromestatus.com/feature/5201...
Reposted by Luuk Tol
November 18, 2025 at 10:16 PM
Reposted by Luuk Tol
Since a radius cannot be negative you can still simplify 👇
💡 CSS Tip!
A simple line of modern CSS to create a conditional Border Radius. The value will adjust based on either the container width or screen width.
css-tip.com/conditional-...
cc @ishadeed.com @una.im
A simple line of modern CSS to create a conditional Border Radius. The value will adjust based on either the container width or screen width.
css-tip.com/conditional-...
cc @ishadeed.com @una.im
November 20, 2025 at 7:30 AM
Since a radius cannot be negative you can still simplify 👇
Reposted by Luuk Tol
this is my favorite website on the entire internet css-loaders.com
CSS Loaders: A collection of more than 600 loading animations
The biggest collection of CSS-only loaders. More than 600 loading animations made by Temani Afif using a single element.
css-loaders.com
October 28, 2025 at 2:42 PM
this is my favorite website on the entire internet css-loaders.com
Reposted by Luuk Tol
color-mix() has now been supported in all major browsers for more than 2 years.
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
November 21, 2025 at 1:24 PM
color-mix() has now been supported in all major browsers for more than 2 years.
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
Reposted by Luuk Tol
HTMHell #5 - An introduction to the popover attribute
YouTube video by HTMHell
www.youtube.com
November 21, 2025 at 12:12 PM