Scroll-driven Animations

Link: scroll-driven-animations.style/

A bunch of demos and tools to show off Scroll-driven Animations

css animation design

12 Modern CSS One-Line Upgrades

Link: moderncss.dev/12-modern-css-one-line-upgrades/

Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.

Auf sowas wie scrollbar-gutter warte ich schon ewig.

css

A Single Div

Link: a.singlediv.com/

A CSS drawing experiment to see what’s possible with a single div.

css design

Getting started with View Transitions on multi-page apps

Link: daverupert.com/2023/05/getting-started-view-transitions/

Spurred by last week’s ShopTalk I rolled out View Transitions here on my static Jekyll site. I hadn’t realized View Transitions for multi-page apps (MPAs) and static sites are ready for testing behind a flag in Chrome 113+. View Transitions for MPAs are a feature that’s high on my CSS wishlist, so I got to it. It took less than an hour to do, requires zero JavaScript, and two lines of CSS. I’m pleased with the results.

css progressive-enhancement transition

Web Components Will Outlive Your JavaScript Framework | jakelazaroff.com

Link: jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/

If we're building things that we want to work in five or ten or even 20 years, we need to avoid dependencies and use the web with no layers in between.

web-components javascript css

Behavior wrappers | Adam Stoddard

Link: aaadaaam.com/notes/behavior-wrappers/

Something that’s been on my mind lately is the value of not encapsulating html, css, and javascript into singular components. Sometimes – if you value keepin...

web-components css javascript

Revealing 'back to top' button

Link: codepen.io/daviddarnes/pen/JjxmLpb?editors=0100

Button nach oben nur mit CSS.

css scroll-top

An Interactive Guide to CSS Grid

Link: www.joshwcomeau.com/css/interactive-guide-to-grid/

CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest ???? lightbulb moments I've had in my own learning journey.

css grid layout

169 CSS Background Patterns

Link: freefrontend.com/css-background-patterns/

Collection of hand-picked free HTML and CSS background pattern code examples from Codepen, GitHub and other resources. Update of May 2021 collection. 106 new items.

css wallpaper background