Delicious

Parallax is a pattern in which different elements of a webpage move at varying speeds as the user scrolls, creating a three-dimensional, layered appearance. It once required JavaScript. Now we have scroll-driven animations in CSS, which is free from the main-thread blocking that can plague JavaScript animations.

Using modern CSS units and math functions

Hyvector - Your friendly vector editor

scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.

Create harmonious color patterns with Oklchroma, a powerful OKLCH-based color scale generator for designers and developers.

I went on to figure out how make masonry work today with other browsers. I'm happy to report I've found a way — and, bonus! — that support can be provided with only 66 lines of JavaScript.

A plain-language guide to WCAG accessibility standards. Friendly explanations that make accessibility easier to understand, one criterion at a time.

How to serve high-quality, vertical and horizontal video variants and break free from platforms like YouTube

Apply lo-fi effects to your images and videos: dithering, halftone, gradients, patterns and more. Free, no sign-up required.

Focus trapping is about managing focus within an element, such that focus always stays within it. The whole process sounds simple in theory, but it can quite difficult to build in practice, mostly because of the numerous parts to you got to manage.

Accessibility and boldness are the key focus in Olivia King’s customised typeface for the publishing giant.

Defining terms for design tokens.

A look at what happens when you add a whole list of transforms to an element, and how that interacts with `animation-composition`.

Generate beautiful color palettes for your design system.

The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.

A deep dive into producing an interpolated

This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.

URL to Any provides various URL conversion tools to transform web content into Markdown, PDF, images, and more formats.

Convert CSS gradients to Tailwind CSS classes instantly. Paste your CSS gradient and get production-ready Tailwind code. Free, fast, no login needed.

Two celebrated frameworks get together to make your life easier. Here’s a first look at full-stack JavaScript development with Astro and Alpine.

Beautiful UI components and templates to make your landing page look stunning.

Anchors for Tailwind CSS provides a simple API for working with CSS anchor positioning, enabling flexible, declarative positioning relative to custom anchors. - toolwind/anchors

A fast and versatile JavaScript animation library

A syntax-highlight web component that uses the CSS Custom Highlight API.

Utility package for managing Dark Mode on the web

In this tutorial, Blake Lundquist walks us through two methods of creating the “moving-highlight” navigation pattern using only plain JavaScript and CSS. The first technique uses the `getBoundingClientRect` method to explicitly animate the border between navigation bar items when they are clicked. The second approach achieves the same functionality using the new View Transition API.

📺 Demo video on YouTube 💡 Features: Manipulate an image with many different color adjustments and filtersSave and load your own presetsPlugin takes and keeps the original resolution of the image.Changes tracking 🎨 Color adjustments: BrightnessContrastHueChannelsExposureGammaVibranceTintCurvesSof...