A CSS scroll version of the gooey island
📚 css
A CSS-Only Star Rating Component and More! (Part 1)
A Deep Dive into the Inline Background Overlap Problem
A tweet by Lucas Bonomi got me thinking about this problem: how to get a semitransparent background following some inline text with padding, but without the overlap problem that can be seen in the image below.
weeklyfoo #77 / 2025-03-24css
A formula for responsive font-size
A highly configurable switch component using modern CSS techniques
Learn how build a highly configurable switch component using modern CSS, such as :has(), container queries, Logical Properties and Custom Properties.
weeklyfoo #18 / 2024-02-05cssswitch
Anchoreum
Animate hero elements with scroll-driven CSS animations
Animated sign-in disclosure with only HTML and CSS using the Popover API
Apple style blow out text effect.
Apple Tab Pill Animation
ASCII Webcam
Balanced Slider with CSS
Balancing Text In CSS
Building a progress-indicating scroll-to-top button in HTML and CSS
Change scrollbar position
Creating a Fun CSS Party Popper Animation
Creating an Angled Slider
Let’s walk through how this slider with angled content and hover effect works.
weeklyfoo #71 / 2025-02-10cssslider
Creating Animated Accordions with the Details Element and Modern CSS
Accordions are everywhere these days. GitHub has them on their home page right now. Figma ships them, too. I’ve implemented so many custom accordions that I can’t count them.
weeklyfoo #77 / 2025-03-24css
CSS @property and the New Style
CSS Blurry Shimmer Effect
CSS Bursts with Conic Gradients
CSS display contents
CSS Kaleidoscopes
Gradients are so fun, so complex, so powerful. I just can’t get enough of messing with them.
weeklyfoo #75 / 2025-03-10css
CSS Scroll Snap
CSS scroll-triggered animations with style queries
CSS Surprise Manga Lines
When a manga or anime character is surprised, lines focus on and highlight their face. Is it possible to create a similar effect with HTML and CSS?
weeklyfoo #40 / 2024-07-08css
CSS view-timeline shine effect
Expanding scroll indicators
Explode on scroll effect
Fading content using transparent gradient in CSS
Frosted Glass from Games to the Web
Glowy Border Shimmer Button
Gooey effect
Grid by Example
Grid Garden
Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property.
weeklyfoo #36 / 2024-06-10cssgrid
How to center an element in CSS without adding a wrapper in HTML
Another article to solve the problem of centering elements in css
weeklyfoo #16 / 2024-01-22css
How to create rounded gradient borders with any background in CSS
How to Make a Scroll-to-Select Form Control
A scroll-to-select form control is a form control that allows users to scroll through a list of options and select one. This is a common pattern in mobile apps, but it can also be useful on the web.
weeklyfoo #53 / 2024-10-07cssforms
Infinite-Scrolling Logos In Flat HTML And Pure CSS
Make creative borders with background-clip border-area
How’d you like to use CSS to easily create a border from an image or gradient?
weeklyfoo #61 / 2024-12-02css
Making content-aware components using CSS :has(), grid, and quantity queries
The idea here is that you then preemptively provide sensible behavior and safeguards to keep things working well.
weeklyfoo #57 / 2024-11-04css
Midjourney-inspired gallery scroller with CSS scroll animation
New way to animate borders
Nice header effect
On-Scroll Sliced Text Animation
A scroll-triggered sliced text animation, where segmented elements reunite while scrolling.
weeklyfoo #10 / 2023-12-13css
Popovers Work Pretty Nicely as Slide-Out Drawers
Pure CSS Circular Text (without Requiring a Monospace Font)
There is no simple and obvious way to set text on a circle in CSS. Good news though! You can create a beautiful, colorful, and even rotating circular text with pure CSS. It just takes a bit of work and we’ll go over that here.
weeklyfoo #39 / 2024-07-01css
Pure CSS Halftone Effect in 3 Declarations
Quick Trick - Using border-image to Apply and Overlay Gradient.
Responsive app switcher or carousel UI with CSS view()
Scroll-driven animations and 3D perspective
The trick is driving the animation with list items that are smaller in height than the images
weeklyfoo #30 / 2024-04-29css
Siblings Fade
SVG Tutorial
Tab Controls with CSS
The Different (and Modern) Ways to Toggle Content
Trigger text highlights on scroll
Use CSS shape-outside to wrap text around shapes
View transitions - Demo
You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥
You can use custom properties to control motion rate in your transitions and animations
You can use mask-composite and some JavaScript to create this pointer proximity following glow border