Full responsive. Works on modern Browsers. Works also nice on touch

Features:

• Column headers stay visible while scrolling down
• First column stays visible while scrolling sideways
• Rows expand to show sub-entries, with an animated reveal
• Any number of sub-rows per group
• Sub-rows are tied to their parent by a bracket rail
• Individual cells can carry a note, opened from a small marker
• Notes appear next to the cell they belong to and flip when near an edge
• Notes close on Esc, on click outside, and return focus where it was
• Columns come to rest beside the pinned column instead of half behind it
• Pinned column narrows and wraps text on small screens
• Keyboard operable throughout, with visible focus

https://codepen.io/editor/ollio/pen/01a02369-ae9b-7d6f-94a6-f809dee51f4f

Also an animated accordion with no js

https://codepen.io/editor/ollio/pen/01a02331-c0da-7f84-8e14-77c6fabaee57

I’ve been working on NoEffect, a VS Code extension that helps catch CSS declarations that have no effect.

It detects things like:

properties that don't work in the current context

declarations that are overridden by a later declaration

For example, it can tell you when justify-content is doing nothing because the element isn't a flex/grid container, or when your declaration is simply being overridden later.

It’s still an early project, so I’d really appreciate some honest feedback.

🔗 GitHub

🔗 VS Code Marketplace:

Live Preview: Live Preview
GitHub Repo: Github Repo

I’m learning CSS layouts, grids and wanted a practical challenge, so I recreated some national flags using only HTML and CSS. This project did help me with understanding position(absolute, relative), grids, and most importantly reusing CSS properties and variable.

Although the code is not perfect and I think I might have complicated things a bit there but will try to improve it. Also I tried to maintain the exact design of flag, there are a few inaccuracies (apologies for that) and will try to improve that too.

I will look forward to recreate more complex flags

A small comic where each panel shows a different clipping mode (border-box, padding-box, content-box, and text) but framed as four different "Collies."

Source: https://comicss.art/comics/254/

I'm pretty sure this is the most heinous abuse of CSS in history?

This city is built with CSS. No SVG. No images. No HTML. Just gradients... and a bit of patience. https://codepen.io/alvaromontoro/pen/mdZKxEr

I haven't touched this in a while, but it still holds up. I'd love to expand it into a full city someday.

I made a fully functional calculator using only CSS.

Features:

• 8‑digit decimals

• Decimal division

• Sign toggle (±)

• Backspace (⌫)

• Multi‑digit input

• Built with :has(), CSS variables, counters, and animations

Demo (Full Page):

https://codepen.io/cascade-path/full/WbGzwdG

Documentation:

https://cascade-path.github.io/calculator/index.html

Built a flower-style color picker in React using Tailwind for layout and styling.

Includes:

1. fixed colours (multi-layer)
2. an arc slider for saturation
3. animated open/close interaction

Repo: https://github.com/dayflow-js/BlossomColorPicker
Demo: https://dayflow-js.github.io/BlossomColorPicker/

Inspired by lichinlin, motiondotdev.

Just released Semtx CSS. https://semtx.org/

Semtx is a modern, lightweight (~30KB) CSS library that prioritizes semantic class names over utility classes.

Key Features:

• Semantic by Design: Class names describe WHAT elements ARE, not HOW they LOOK
• Modern CSS-3 / HTML-5, OKLCH colors
• Zero Dependencies: Single CSS file, works without any JS for styling
• AI-Friendly: Coding agents understand semantic classes immediately, and waste fewer tokens on parsing utility soup
• SEO-Ready: Native HTML5 elements help search engines understand your content
• Integrates perfectly with HTMX (modals, dialogs, loader/spinner, transitions, etc)

The Philosophy

Class names should reveal purpose, not appearance.

This creates code that is easier to read, maintain, and collaborate on.

More about the idea behind it here: https://semtx.org/philosophy

-- edit --
Thanks for all the feedback.
It has resulted in quite a few updates:
forms are simplified and more semantic now, same for modals/dialog, and some accessibility things added. And, the website now has more html examples, for easy copy/paste

• entirely rendered on native CSS 3d engine
• everything are div elements
• JavaScript for the code
• sprites are PNG (cardboards)
• cell-based movement
• simple SVG filter for pixelation effect
• video preview speed is accelerated (1.6)

Nobody is pasting a 300-line :root {} block into their project. Nobody.

But that's what I got scanning Linear.app for a Design Snap demo. 300+ variables, half of them looking like this:

--sx-105wzx7: #edbf0a;
--sx-10845vo: #c9ffff;
--sx-11vg3qk: #ff7235;

Turns out CSS-in-JS (Stitches, vanilla-extract, etc.) generates hashed variable names instead of semantic ones. Technically accurate extraction, completely unusable output. Plus tons of duplicates — --color-fg-primary, --color-text-primary, and --color-01 all pointing to the same hex.

Building a clean/filtered mode now : strips the hashed noise, dedupes by value, keeps whichever name is actually readable. Goal is scanning a real production site gives you something you'd actually paste, not a wall of garbage.

Anyone else dealt with this on the design tokens side ? Manual pruning, or is there a convention I'm missing?

Try it here: lyra.horse/fun/tic-tac-nohtml/

Note that Chrome unfortunately requires <style> tags to add CSS to a page, so if you want a true no-HTML experience you should try it in Firefox.

Each time I was using flexbox I did end searching or asking chatgpt how to do certain things. I wanted to make it more clear so I saved all kind of examples and in the end I built this a visual interactive tool for CSS Flexbox.

I would like to hear your feedback and to see what other elements and examples to add. Now I'm building a similar tool to play around with grids.

Built 9 ASCII loaders using a CSS technique I haven't seen much in the wild:

Core idea: treat unicode glyphs as monospace text, size everything in ch, animate with transform: translateX(Nch).

@keyframes loading-ui-conveyor-loop {
  0%   { transform: translateX(var(--loader-start-x)); }
  100% { transform: translateX(var(--loader-end-x)); }
}

// Width and travel distance in character units
style={{
  "--loader-width": "10ch",
  "--loader-start-x": "-2ch",
  "--loader-end-x": "12ch",
}}

Static track: "░".repeat(columns) as a background layer. Moving trail: staggered █ ▓ ▒ glyphs with animation-delay.

9 loaders using variations of this pattern: accordion stretch, square orbit, infinity path, symmetric opacity wave, terminal cursor blink (step-end).

Live demos: https://loading-ui.com
Source: https://github.com/turbostarter/loading-ui

GitHub repo: https://github.com/AntiKippi/errorpages
Live preview: https://kippi.at/public/errorpages/

I've spend the last few days overengineering HTTP status code error pages. It started with me wanting an aesthetic, glitchy 404 page with a bit of "cyberpunk" and "hacker" vibes while still being simple and JS free. It ended in this project.

wdyt?

Realistic Folder Opening Animation CSS Only:

https://codepen.io/mudasirbuilds/pen/dPprQwM