@joellesenne.dev
@joellesenne.bsky.social
I'm a frontend developer, passionate about code, design process UI/UX, an amateur photographer, and diligent continuous learning.
▫️- joellesenne.dev
▫️- mastodon.social/@joellesenne
▫️- github.com/joellese
▫️- codepen.io/joellesenne
▫️- joellesenne.dev
▫️- mastodon.social/@joellesenne
▫️- github.com/joellese
▫️- codepen.io/joellesenne
Reposted by @joellesenne.dev
I wrote an article to celebrate scroll-driven animations finally landing in Safari 26, here are some things you probably want to know before using them:
cydstumpel.nl/start-using-...
cydstumpel.nl/start-using-...
Start using Scroll-driven animations today! | Blog Cyd Stumpel
To celebrate scroll-driven animations finally landing in Safari 26, here are some things you probably want to know before using them. Link to: The anatomy of a scroll driven animation We don’t need th...
cydstumpel.nl
September 17, 2025 at 12:03 PM
I wrote an article to celebrate scroll-driven animations finally landing in Safari 26, here are some things you probably want to know before using them:
cydstumpel.nl/start-using-...
cydstumpel.nl/start-using-...
Reposted by @joellesenne.dev
sibling-index and -count are going to be my whole personality now 💅
September 17, 2025 at 2:28 PM
sibling-index and -count are going to be my whole personality now 💅
Reposted by @joellesenne.dev
My portfolio won Site of the Day today on Awwwards! 🥳
March 9, 2025 at 6:16 PM
My portfolio won Site of the Day today on Awwwards! 🥳
Reposted by @joellesenne.dev
you can just <select> things 🧑🍳
custom select with CSS (progressively enhanced)
select {
&,
&::picker(select) { appearance: base-select; }
}
custom select with CSS (progressively enhanced)
select {
&,
&::picker(select) { appearance: base-select; }
}
July 8, 2025 at 6:12 PM
you can just <select> things 🧑🍳
custom select with CSS (progressively enhanced)
select {
&,
&::picker(select) { appearance: base-select; }
}
custom select with CSS (progressively enhanced)
select {
&,
&::picker(select) { appearance: base-select; }
}
Reposted by @joellesenne.dev
SVG filters provide a basic lighting system you can sync with a little JavaScript and use in your web apps 💡
... not as powerful as MacOS implementation but pretty cool
... not as powerful as MacOS implementation but pretty cool
July 8, 2025 at 8:46 PM
SVG filters provide a basic lighting system you can sync with a little JavaScript and use in your web apps 💡
... not as powerful as MacOS implementation but pretty cool
... not as powerful as MacOS implementation but pretty cool
Reposted by @joellesenne.dev
July 9, 2025 at 9:16 PM
Reposted by @joellesenne.dev
July 8, 2025 at 4:46 PM
Reposted by @joellesenne.dev
Another shape made easy using the new shape() function.
css-tip.com/heart/
I think I just found my new favorite CSS feature. 😍
css-tip.com/heart/
I think I just found my new favorite CSS feature. 😍
April 23, 2025 at 11:09 AM
Another shape made easy using the new shape() function.
css-tip.com/heart/
I think I just found my new favorite CSS feature. 😍
css-tip.com/heart/
I think I just found my new favorite CSS feature. 😍
Reposted by @joellesenne.dev
Here’s @blackle.bsky.social showing a few of the CSS hacks from Cohost.org before the community shut down for good. Use these if you dare, lest you too get labelled a #CSS criminal.
css-tricks.com/the-lost-css...
css-tricks.com/the-lost-css...
The Lost CSS Tricks of Cohost.org | CSS-Tricks
In this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.
css-tricks.com
April 24, 2025 at 12:53 PM
Here’s @blackle.bsky.social showing a few of the CSS hacks from Cohost.org before the community shut down for good. Use these if you dare, lest you too get labelled a #CSS criminal.
css-tricks.com/the-lost-css...
css-tricks.com/the-lost-css...
Reposted by @joellesenne.dev
Blob in progress! Stay tuned 👀
They are finally possible using only CSS (no SVG and no Canvas)
How? The new shape() function!
They are finally possible using only CSS (no SVG and no Canvas)
How? The new shape() function!
April 24, 2025 at 2:23 PM
Blob in progress! Stay tuned 👀
They are finally possible using only CSS (no SVG and no Canvas)
How? The new shape() function!
They are finally possible using only CSS (no SVG and no Canvas)
How? The new shape() function!
Reposted by @joellesenne.dev
Reposted by @joellesenne.dev
reposting this banger, good day to you
November 14, 2024 at 4:53 PM
reposting this banger, good day to you
Reposted by @joellesenne.dev
Masonry in CSS: There’s a new, third option in the debate that combines Flexbox and CSS Grid features into a new system of “Item Flow” properties. The WebKit blog has all the gory details.
webkit.org/blog/16587/i...
webkit.org/blog/16587/i...
Item Flow, Part 1: A new unified concept for layout
CSS Grid and Flexbox brought incredible layout tools to the web, but they don’t yet do everything a designer might want.
webkit.org
March 29, 2025 at 2:15 PM
Masonry in CSS: There’s a new, third option in the debate that combines Flexbox and CSS Grid features into a new system of “Item Flow” properties. The WebKit blog has all the gory details.
webkit.org/blog/16587/i...
webkit.org/blog/16587/i...
Reposted by @joellesenne.dev
Another pure #CSS & #SVG thing I made on @codepen.io: codepen.io/thebabydino/...
Idea from codepen.io/gabrielcojea... but:
✨ no JS for scroll-triggered transitions, just a scroll-driven animations trick 🪄
✨ no text duplication for the dynamic headline-image intersection, just a simple #SVG filter
Idea from codepen.io/gabrielcojea... but:
✨ no JS for scroll-triggered transitions, just a scroll-driven animations trick 🪄
✨ no text duplication for the dynamic headline-image intersection, just a simple #SVG filter
November 19, 2024 at 7:22 AM
Another pure #CSS & #SVG thing I made on @codepen.io: codepen.io/thebabydino/...
Idea from codepen.io/gabrielcojea... but:
✨ no JS for scroll-triggered transitions, just a scroll-driven animations trick 🪄
✨ no text duplication for the dynamic headline-image intersection, just a simple #SVG filter
Idea from codepen.io/gabrielcojea... but:
✨ no JS for scroll-triggered transitions, just a scroll-driven animations trick 🪄
✨ no text duplication for the dynamic headline-image intersection, just a simple #SVG filter
Reposted by @joellesenne.dev
March 31, 2025 at 3:34 AM
Reposted by @joellesenne.dev
#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 codepen.io/thebabydino/...
#CSS
```
.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 codepen.io/thebabydino/...
#CSS
January 5, 2025 at 8:08 AM
#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 codepen.io/thebabydino/...
#CSS
```
.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 codepen.io/thebabydino/...
#CSS
Reposted by @joellesenne.dev
🎨 The BKMN Collection Day 5: Swipe actions
We've saved the most complex for last. This example combines animate, motion values, useSpring and useTransform to create this slide-to-reveal actions UI.
Full source and tutorial: examples.motion.dev/react/swipe-...
We've saved the most complex for last. This example combines animate, motion values, useSpring and useTransform to create this slide-to-reveal actions UI.
Full source and tutorial: examples.motion.dev/react/swipe-...
March 21, 2025 at 12:10 PM
🎨 The BKMN Collection Day 5: Swipe actions
We've saved the most complex for last. This example combines animate, motion values, useSpring and useTransform to create this slide-to-reveal actions UI.
Full source and tutorial: examples.motion.dev/react/swipe-...
We've saved the most complex for last. This example combines animate, motion values, useSpring and useTransform to create this slide-to-reveal actions UI.
Full source and tutorial: examples.motion.dev/react/swipe-...
Reposted by @joellesenne.dev
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 blogs.windows.com/msedgedev/20...
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 blogs.windows.com/msedgedev/20...
March 21, 2025 at 3:48 PM
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 blogs.windows.com/msedgedev/20...
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 blogs.windows.com/msedgedev/20...
Reposted by @joellesenne.dev
You can also use my online generator to get the code for the different variations!
css-generators.com/custom-borde...
css-generators.com/custom-borde...
March 20, 2025 at 8:00 PM
You can also use my online generator to get the code for the different variations!
css-generators.com/custom-borde...
css-generators.com/custom-borde...
Reposted by @joellesenne.dev
March 21, 2025 at 9:16 PM
Reposted by @joellesenne.dev
CSS Weekly #606
🔥 How function and if() work in CSS
🍞 Navigating breadcrumbs in VS Code
🤔 The difference between :has(:not) & :not(:has)
🦄 Reimagining Fluid Typography
Featuring @bram.us, @mattzeunert.com, @kilianvalkhof.com, @miriam.codes, @ryantrimble.com, @lea.verou.me.
cssw.io/issue-606
🔥 How function and if() work in CSS
🍞 Navigating breadcrumbs in VS Code
🤔 The difference between :has(:not) & :not(:has)
🦄 Reimagining Fluid Typography
Featuring @bram.us, @mattzeunert.com, @kilianvalkhof.com, @miriam.codes, @ryantrimble.com, @lea.verou.me.
cssw.io/issue-606
CSS Weekly Issue #606
Find out how @function and if() in CSS work, how to use breadcrumbs in VS Code, what is the difference between :has(:not) and :not(:has), and more.
cssw.io
March 10, 2025 at 10:40 PM
CSS Weekly #606
🔥 How function and if() work in CSS
🍞 Navigating breadcrumbs in VS Code
🤔 The difference between :has(:not) & :not(:has)
🦄 Reimagining Fluid Typography
Featuring @bram.us, @mattzeunert.com, @kilianvalkhof.com, @miriam.codes, @ryantrimble.com, @lea.verou.me.
cssw.io/issue-606
🔥 How function and if() work in CSS
🍞 Navigating breadcrumbs in VS Code
🤔 The difference between :has(:not) & :not(:has)
🦄 Reimagining Fluid Typography
Featuring @bram.us, @mattzeunert.com, @kilianvalkhof.com, @miriam.codes, @ryantrimble.com, @lea.verou.me.
cssw.io/issue-606
Reposted by @joellesenne.dev
#css sibling-index() and sibling-count()
available Chrome Canary with experiments enabled!
`transition-delay: calc(sibling-index() * .1s);`
or
```css
--hue: calc(sibling-index() * 50);
color: oklch(70% 70% var(--hue));
```
more info and a Codepen to fork
⤷ https://nerdy.dev/sibling-index
available Chrome Canary with experiments enabled!
`transition-delay: calc(sibling-index() * .1s);`
or
```css
--hue: calc(sibling-index() * 50);
color: oklch(70% 70% var(--hue));
```
more info and a Codepen to fork
⤷ https://nerdy.dev/sibling-index
March 11, 2025 at 12:50 AM
#css sibling-index() and sibling-count()
available Chrome Canary with experiments enabled!
`transition-delay: calc(sibling-index() * .1s);`
or
```css
--hue: calc(sibling-index() * 50);
color: oklch(70% 70% var(--hue));
```
more info and a Codepen to fork
⤷ https://nerdy.dev/sibling-index
available Chrome Canary with experiments enabled!
`transition-delay: calc(sibling-index() * .1s);`
or
```css
--hue: calc(sibling-index() * 50);
color: oklch(70% 70% var(--hue));
```
more info and a Codepen to fork
⤷ https://nerdy.dev/sibling-index
Reposted by @joellesenne.dev
📝 The second part is live!
This time, I am using scroll-driven animation to create the star rating component! It's a good exercise to discover some modern features.
css-tricks.com/a-css-only-s... via @css-tricks.com
Single element and 100% CSS magic!
This time, I am using scroll-driven animation to create the star rating component! It's a good exercise to discover some modern features.
css-tricks.com/a-css-only-s... via @css-tricks.com
Single element and 100% CSS magic!
March 7, 2025 at 7:24 PM
📝 The second part is live!
This time, I am using scroll-driven animation to create the star rating component! It's a good exercise to discover some modern features.
css-tricks.com/a-css-only-s... via @css-tricks.com
Single element and 100% CSS magic!
This time, I am using scroll-driven animation to create the star rating component! It's a good exercise to discover some modern features.
css-tricks.com/a-css-only-s... via @css-tricks.com
Single element and 100% CSS magic!
Reposted by @joellesenne.dev
💡 CSS Tip!
One property and two gradients to add a transparent inner border to image elements.
css-tip.com/inner-border/
One property and two gradients to add a transparent inner border to image elements.
css-tip.com/inner-border/
March 6, 2025 at 12:30 PM
💡 CSS Tip!
One property and two gradients to add a transparent inner border to image elements.
css-tip.com/inner-border/
One property and two gradients to add a transparent inner border to image elements.
css-tip.com/inner-border/