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
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
Reposted by Luuk Tol
CSS Weekly #627
🚀 Animation Performance
🗺️ Generative CSS Worlds
🙆♂️ CSS stretch Value
👯 Animation with Sibling-* Functions
Featuring @mattgperry.bsky.social, @preethisam.bsky.social, @allthatmalarkey.bsky.social, @dxnny.fun, @bram.us, @kilianvalkhof.com, @cferdinandi.bsky.social. 🙏
cssw.io/issue-627
🚀 Animation Performance
🗺️ Generative CSS Worlds
🙆♂️ CSS stretch Value
👯 Animation with Sibling-* Functions
Featuring @mattgperry.bsky.social, @preethisam.bsky.social, @allthatmalarkey.bsky.social, @dxnny.fun, @bram.us, @kilianvalkhof.com, @cferdinandi.bsky.social. 🙏
cssw.io/issue-627
CSS Weekly Issue #627
Learn how to create performant animations, why you should start using stretch value, how to bring heightmaps to life using CSS, and more.
cssw.io
November 20, 2025 at 12:14 AM
CSS Weekly #627
🚀 Animation Performance
🗺️ Generative CSS Worlds
🙆♂️ CSS stretch Value
👯 Animation with Sibling-* Functions
Featuring @mattgperry.bsky.social, @preethisam.bsky.social, @allthatmalarkey.bsky.social, @dxnny.fun, @bram.us, @kilianvalkhof.com, @cferdinandi.bsky.social. 🙏
cssw.io/issue-627
🚀 Animation Performance
🗺️ Generative CSS Worlds
🙆♂️ CSS stretch Value
👯 Animation with Sibling-* Functions
Featuring @mattgperry.bsky.social, @preethisam.bsky.social, @allthatmalarkey.bsky.social, @dxnny.fun, @bram.us, @kilianvalkhof.com, @cferdinandi.bsky.social. 🙏
cssw.io/issue-627
Reposted by Luuk Tol
If you want the full breakdown of how this is done, here’s the write-up 👇
9elements.com/blog/buildin...
9elements.com/blog/buildin...
Building a multi stage timetable with modern CSS using grid, subgrid, round(), and mod(). - 9elements
Combining finest craftsmanship with elegant design to ship innovative digital experiences.
9elements.com
November 14, 2025 at 7:06 AM
If you want the full breakdown of how this is done, here’s the write-up 👇
9elements.com/blog/buildin...
9elements.com/blog/buildin...
Reposted by Luuk Tol
We’re super thrilled to have Spline master Maksim Borisov break down the new Timeline tool in Spline!
Learn how to push your 3D animations further with keyframes, curves, and precise motion control, and see how to take it all to the web.
A must-read for 3D creators: tympanus.net/codrops/?p=1...
Learn how to push your 3D animations further with keyframes, curves, and precise motion control, and see how to take it all to the web.
A must-read for 3D creators: tympanus.net/codrops/?p=1...
November 14, 2025 at 11:13 AM
We’re super thrilled to have Spline master Maksim Borisov break down the new Timeline tool in Spline!
Learn how to push your 3D animations further with keyframes, curves, and precise motion control, and see how to take it all to the web.
A must-read for 3D creators: tympanus.net/codrops/?p=1...
Learn how to push your 3D animations further with keyframes, curves, and precise motion control, and see how to take it all to the web.
A must-read for 3D creators: tympanus.net/codrops/?p=1...
Reposted by Luuk Tol
The Scope Creep
A chilling tale of deliverables, deadlines and doomed decisions
scope-creep.xyz
November 14, 2025 at 2:03 PM
Reposted by Luuk Tol
November 14, 2025 at 10:16 PM
Reposted by Luuk Tol
I think `animation-composition: accumulate` is gonna see more action with `random()`, as it's like "take what you already got as a value and augment it rather than replace it".
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
November 14, 2025 at 4:22 PM
I think `animation-composition: accumulate` is gonna see more action with `random()`, as it's like "take what you already got as a value and augment it rather than replace it".
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Reposted by Luuk Tol
Can a designer build a real game without coding?
Alex Pierce did — using AI, pixel art, and a lot of patience.
Read the full story: tympanus.net/codrops/2025...
Alex Pierce did — using AI, pixel art, and a lot of patience.
Read the full story: tympanus.net/codrops/2025...
November 12, 2025 at 2:33 PM
Can a designer build a real game without coding?
Alex Pierce did — using AI, pixel art, and a lot of patience.
Read the full story: tympanus.net/codrops/2025...
Alex Pierce did — using AI, pixel art, and a lot of patience.
Read the full story: tympanus.net/codrops/2025...
Reposted by Luuk Tol
Did you know: you might be able to change the style of the caret in CSS soon?
See caret-shape and caret-animation in action
(there's still some discussion & this is isn't shipped yet, but you can check it out w/the experimental-web-platform-features flag in Chrome 140+)
codepen.io/una/pen/MYKL...
See caret-shape and caret-animation in action
(there's still some discussion & this is isn't shipped yet, but you can check it out w/the experimental-web-platform-features flag in Chrome 140+)
codepen.io/una/pen/MYKL...
November 10, 2025 at 10:38 PM
Did you know: you might be able to change the style of the caret in CSS soon?
See caret-shape and caret-animation in action
(there's still some discussion & this is isn't shipped yet, but you can check it out w/the experimental-web-platform-features flag in Chrome 140+)
codepen.io/una/pen/MYKL...
See caret-shape and caret-animation in action
(there's still some discussion & this is isn't shipped yet, but you can check it out w/the experimental-web-platform-features flag in Chrome 140+)
codepen.io/una/pen/MYKL...
Reposted by Luuk Tol
gonna stream a little about css random() and having a play with an idea I found www.twitch.tv/chriscoyier
ChrisCoyier - Twitch
Can we make this background video with random() in CSS?
www.twitch.tv
November 12, 2025 at 6:39 PM
gonna stream a little about css random() and having a play with an idea I found www.twitch.tv/chriscoyier
Reposted by Luuk Tol
a new #CSS enters the ring
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
November 7, 2025 at 4:37 AM
a new #CSS enters the ring
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...
try it
codepen.io/argyleink/pe...
source
github.com/argyleink/cs...