@joellesenne.dev

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

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

sibling-index and -count are going to be my whole personality now 💅

My portfolio won Site of the Day today on Awwwards! 🥳

you can just <select> things 🧑‍🍳

custom select with CSS (progressively enhanced)

select {
&,
&::picker(select) { appearance: base-select; }
}

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

"MorphSVG dragon to dove" by Chris Smith

codepen.io/BlogFire/pen...

Web designer's desktop in 2002

Web designer's desktop in 2002

#WebDesignHistory

Another shape made easy using the new shape() function.

css-tip.com/heart/

I think I just found my new favorite CSS feature. 😍

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.

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

random blob shapes

Blob in progress! Stay tuned 👀

They are finally possible using only CSS (no SVG and no Canvas)

How? The new shape() function!

SVG texture variations I have no idea what I'm doing. No, really. I [don't understand Perlin Noise](https://x.com/anatudor/status/1180459850372923393), I don't understand li...

Here's a little collection of #SVG #filter generated textures
codepen.io/thebabydino/...

STOP DOING website footers websites do not have a beginning and an end years of copyright 2001 yet no real world use found for displaying a year on your website Wanted to arbitrarily protect your content? We had a tool for that. It was called putting your name on it/ Yes please give me copyright copyright copyright of something. Please give me this year of it. Statements dream up by evil wizards. Look at what no one ever has been demanding your respect for all this time, with all the JavaScript and Date() we built for them. This is real code, done by real developers. Ambersand copy semicolon Copyright open squiggle new Date open bracket close bracker dot get full year close bracket close squiggly. MANY QUESTION MARKS Hello I would like copyright 2001 apples please. They have played us for absolute fools.

reposting this banger, good day to you

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.

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

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

okLCH explosions

codepen.io/argyleink/pe...

Snub dodecahedron with a part of the CSS on the left - the `grid-area: 1/ 1` line is highlighted.

Stack of slightly rotated big cat images.

A pie chart made up of 7 different size slices. Slice 4 is hovered and slides out. On the left, there's a bit of the code, with the `grid-area: 1/ 1` line highlighted for `.slice` elements.

Fancy animated cube. On the left,there's a bit of the CSS used to create it, with the `grid-area: 1/ 1` line highlighted for `.face` elements.

#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

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

Screenshot showing various row and column separator options.

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

You can also use my online generator to get the code for the different variations!

css-generators.com/custom-borde...

"pointer position controls timeline progress" by Tom Miller

codepen.io/creativeocea...

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.

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

#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

CSS Relative Colors An interactive guide to learn CSS Relative Colors.

ishadeed.com/article/css-...

📝 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!

Overview of the CSS code from the linked post

A random image with a transparent inner border

💡 CSS Tip!

One property and two gradients to add a transparent inner border to image elements.

css-tip.com/inner-border/

example of perspective in a view transition

https://codepen.io/argyleink/pen/qEWeYzd

Overview of the CSS code from the link in the post

💡 CSS Tip!

Save this code for the future! A CSS-only way to read the value of an input range without the need for JavaScript. Powered by modern features (scroll-driven animations, attr(), @​​​property)

More detail & Examples: css-tip.com/value-input/

#CSS

Sample shot of one posted ad on a post on the website.

Why I 🧡 the web.

postthebills.com is a website that displays images of flyers posted around San Francisco, CA. That's really it.

#SanFrancisco #Gallery

Next.js 15.2 Next.js 15.2 introduces an improved error experience, streaming metadata, Turbopack performance improvements, and more.

Next.js 15.2

• Redesigned Error UI & Improved Stack Traces
• Streaming Metadata
• Turbopack Performance Improvements
• View Transitions (experimental)
• Node.js Middleware (experimental)

nextjs.org/blog/next-15-2

"Mountains landscape" by Korotaev Alexander

https://buff.ly/43cEu2c