Replace JS animations with View Transitions
Use the View Transitions API to create smooth animations between DOM states with minimal CSS and JavaScript, replacing heavy animation libraries.
SuperGeekery: A blog probably of interest only to nerds by John F Morton.
Welcome to my link library. These are not links to content I have created unless you see that mentioned in the link’s description. These are links I found interesting enough to want to keep track of. If you read Craft Link List, the Craft CMS newsletter I used to write, this page is a replacement of sorts for that exercise. Enough talk. Let’s hit the links.
Use the View Transitions API to create smooth animations between DOM states with minimal CSS and JavaScript, replacing heavy animation libraries.
Generate and customize CSS easing functions with ease and magical precision using Easing Wizard 🧙
CSS library based on Counter Strike 1.6 UI.
Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to create the most realistic lush frosted glass anywhere on the internet.
Semantic custom properties with @property just reached Baseline newly available.
A deep dive into the performance implications of using Google Fonts (good and bad) and whether self-hosting is better.
Learn how to use three CSS properties to override font metrics and minimize layout shifts during font load.
matcha.css is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents.
A dive into making beautiful gray color palettes with CSS.
Unlock the full potential of Tailwind CSS for your Rails-based SaaS apps with our guide on hidden features. From changing checkbox colors to leveraging peer modifiers and custom variants, enhance your web UIs effortlessly.
A little fix for Safari.
Learn how to use CSS container queries today.
text-wrap: balance elevates responsive design by auto-balancing text lines. Learn its limitations, browser support, and meet its new sibling, text-wrap: pretty.
Velvette is a library that allows you to specify in a declarative way how your transitions should behave, in isolation or as a response to a navigation, and then apply the declaration to a particular ViewTransition, NavigateEvent, or use it to handle cross-document (“MPA”) navigations.
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.
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.
With :has() landing in Chromium 105. Let’s take a look at some of the awesome opportunities it brings to our CSS!
CSS is undergoing a “quiet renaissance,” incorporating many significant features that previously required external tools into the native parts of the language.
Opt-in optimized text wrapping, for beauty over speed.
Set the numbers and units of your columns and rows, and generate a CSS grid. Drag within the boxes to create divs placed within the grid.
A few interesting CSS findings from the threads app by Meta.
A Tailwind CSS plugin to generate utility classes for interpolated fluid type and space scales based off utopia.fyi — cwsdigital/tailwind-utopia: A Tailwind CSS plugin to generate utility classes for interpolated fluid type and space scales based off utopia.fyi
Encode SVGs easily to more easily style them with CSS and JS.
Fluid responsive design. Utopia is not a product, a plugin, or a framework. It’s a set of free tools to support your next Utopian project.
Learn how to migrate a frontend app from Webpack to Vite, including why you should do it, and how to install Vite and update plugins.
A few interesting CSS findings from the threads app by Meta.
What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! Join me as I continue exploring the experimental implementations of the latest specs.
CSS mix blend modes provide an easy, yet powerful way to create visually interesting designs.
Applying a shadow to a sticky page header when scrolling using the Intersection Observer API.
To learn more about the behaviors of container query units, we’ll explore three fluid typography techniques applied via a “mixin” using custom properties. These upgraded methods will produce truly responsive typography, regardless of context.