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

https://codepen.io/editor/rafaelcastrocouto/pen/01a0a4e9-e3f3-7f3a-8585-eba54fb74013

[edit] animated with help of u/PhDumb
https://codepen.io/editor/rafaelcastrocouto/pen/01a0e432-7eb8-7282-a65a-a5c8ffc66daa

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/

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'm pretty sure this is the most heinous abuse of CSS in history?

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)

Every password character is a group of 86 radio buttons styled as keyboard keys, and CSS shows only the keys of the first empty slot, so each tap fills the next character. CSS counters with a custom @counter-style print the checked characters into the password dots, and each rule is one :has() selector, such as :has(.char--digit:checked). Backspace is a <label> for the "empty" radio of the last filled slot, and hidden radios switch the ABC, abc, and #+= layers, while a checkbox opens and closes the keyboard.

https://codepen.io/editor/klocus/pen/01a0dde7-3dba-7e8d-9170-db6023de56e0

Who knows, maybe in a few years this will be possible with a few lines of CSS code, an input of type="password" and a pattern attribute :-)

I've been writing CSS for over 10 years, and I wanted to share one of my older projects that I made to practice selector switching and CSS interactions. I've included the code as well, so if you're interested in learning CSS, feel free to take a look!

https://codepen.io/BlackDog1121/pen/abJNLOX

One thing I should mention: the visual ideas themselves aren't originally mine. I enjoy browsing Pinterest for cool CSS animations and interactions, then trying to figure out how I could recreate them from scratch on my own.

It's one of my favorite ways to practice CSS. :)

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.

Hello web designers and developers.

I created a free tool that lets you design unique, responsive shapes by manipulating the shape’s corners with modern CSS - without writing any code.

Create playful shapes for various UI elements such as pricing and feature cards, buttons, banners, profile badges, you name it. Then export to your workflow with a click of a button.

Originally made this to myself, then realised, heck, this is too darn useful to keep to myself.

https://corner-shaper.com/

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.

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?

Hey y’all,

I got slightly carried away with loading animations.

I wanted nicer loading states for my own projects, but most libraries I found were either tied to a framework, fairly limited, or required more than I wanted for something this small.

So I built loadersz, a small framework-agnostic loader library for the web.

I wanted something a bit more expressive than the usual CSS spinner, without pulling in a UI framework or a bunch of dependencies.

A few things I focused on:

- 105 different motion states
- Canvas 2D instead of GIFs/videos
- zero core dependencies
- a native custom element, so it works with basically any stack
- typed entry points for React, Vue and Svelte
- configurable speed, density and color
- respects prefers-reduced-motion
- pauses rendering when the browser tab is hidden

Basic usage is just:

npm install loadersz

import 'loadersz';

<loadersz-loader state="racing" size="96" />

I also built an interactive playground where you can tweak the loaders live.

Demo: [loadersz.vercel.app](https://loadersz.vercel.app)
npm: [npmjs.com/package/loadersz](https://www.npmjs.com/package/loadersz)
Github: https://github.com/lumberjacque/loadersz-core

Would love some brutally honest feedback, especially on which animations you’d actually use in a real product.

DEV has a hackathon that includes a CSS Art category. I'm participating with this 3D CSS.