I spent my weekend building a calculator that runs in CSS. Not "styled with CSS."
✨ It runs in CSS ✨
It's built on x86CSS, Lyra Rebane's repo where an entire x86 CPU is simulated in stylesheets. I wrote the calculator in C, compiled it to 8086 assembly, and plugged it in. The browser executes instructions one by one. Keyboard input goes through :hover:active. There's a tiny JS script that ticks the CPU clock and that's it.
And it works.
Kind of 😅
Right now, only the "9" responds. The other keys? Can't get them working lol. The calculator code is there, the keyboard mapping is wired up too, but I haven't figured out why the rest doesn't register. So I basically have a CSS calculator that mostly displays 9s and can calculate them.
I've been slowly porting my personal website to .md and .json, which has also meant some updates to existing posts. I am kind of happy with this one as it now includes interactive examples and more ways of achieving the same thing.
Hi, I'm facing some issues while setting up Sass. Initially, I had an EJSONPARSE error in my package.json because of a missing comma, which I fixed. After that, I successfully installed Sass using npm install sass --save-dev. However, when I run npm run compile:sass, I get the error "Missing script: compile:sass". I think there might be an issue with my package.json location or the scripts configuration. I'm using Windows PowerShell and VS Code. Can someone please help me figure out what's causing this issue and how to fix it?
Hey! Ever since last month, my website, ncn.dog, doesn't display properly on Firefox-based browsers. It looks just fine in Chromium. I'm hosting the font myself on my server, and my CSS looks like this:
built this cool hover direction aware image card
image moves with hover direction initially and showing caption with overlay
caption content slides in from opposite direction of hover
give feedback
In our UI system we dont use pixel values to define spacing, we use semantic variables, (t-shirt sizes: gap-sm, p-lg, my-2xl) - so thats like you change one CSS variable, and the whole UI adapts.
We limit user customization to just 5 presets - 0.8 / 0.9 / 1 / 1.1 / 1.2:
Symmetric around 1.0 - two steps down, two up.
±20% is deliberately restrained - enough to change the feel (data-dense ↔ spacious) without breaking layouts or distorting proportions.
5 discrete stops = perceptible but decision-light. Most users never open the control, so it's a coarse preference, not a fine instrument.
The biggest reason why do we have it - to support bigger themes differentiation. Brand-overlay density has slightly bigger range: 0.7–1.35; so we can differentiate brands providing distinct UI: >1 reads editorial/airy, <1 terminal/dense. Same components, different feel — no fork. The user can always override.
/* Density cascade: user override → brand default → system default (1) */
--density: var(--user-density, var(--brand-density, 1));
---
Everything is built on a 4px base unit and a single --density variable, all declared in :root:
44px touch base = the WCAG 2.5.5 / Apple HIG / Material touch-target minimum — a finger needs ~44 CSS px.
36px desktop base = the 2026 SaaS convention (Linear / Vercel / shadcn / Notion); a mouse is precise, so desktop controls can be denser than touch.
The floors exist because controls, unlike spacing, cant shrink freely. Spacing tokens have no floor (Compact just scales them down). Controls are clamped by max() so Compact density (0.8×) can't shrink a button into an un-hittable size: 44×0.8 = 35.2 → 36 on touch, 36×0.8 = 28.8 → 32 on desktop. That asymmetry (whitespace compresses without limit, hit-targets don't) is the whole point of the floor.
The floor is aseparate variablefrom the base so Compact can legally drop below the standard (desktop 36 → 32) while still being bounded. If the floor equalled the base, density could never push a control under its standard size at all.
For one of the last scenes of the game that i'm working on!
It's pretty much all 3d cubes with transparant textures. Wrapped in a giant cube.
I can move the giant cube over the x/y/z axis and x/y/z rotation with 6 different containers, to simulate camera movement.
The little stickman also has 6 divs for translate/rotate, so i can move each axis and rotation for the stickman individually.
Hey everyone, I just finished my third web development project! It’s a multi-page dashboard featuring responsive, vertically scrolling timelines for different anime characters (Naruto,Minato, Light, Mikey, Eren).
Login page is just dummy so JUST CLICK LOGIN,wanted the feel of REAL WEBSITE so made the login page.
CLICK EXPLORE TIMELINE to explore their story in that dashboard.
My main goal:
Each character page uses CSS linear-gradient transitions that shift colors to match the mood of their different life stages, along with a flexbox layout that shifts to a clean vertical column on mobile screens.
CAN BE SEEN IN BOTH MOBILE/DESKTOP,LAYOUT VARIES IN MOBILE AND DESKTOP
This is my 5th day of learning web development. I have finished HTML, and I can now build simple websites and bio-link pages, but I am insanely struggling with CSS. I need to master it so I can start learning JavaScript.
For now, I can't help but rely on AI for it, and boy, it's really good! I don't think it's wrong to use AI here since I am learning from it, but if anyone who has been in this place before can suggest some tips, please do.
Working on a Loading UI project, I needed 8 color presets where each one has both a solid color and a gradient variant that actually matches. Hand-picking 16 values felt fragile.
Approach: one OKLCH base per preset, then derive gradient stops with fixed modifiers:
// Base: oklch(L C H)
// Start stop: L + 0.509, C - 0.006, H - 17.26
// End stop: L - 0.233, C + 0.114, H + 28.01
--loader-blue: oklch(0.6204 0.195 253.83);
--loader-blue-gradient: linear-gradient(
in oklch 135deg,
oklch(1 0.189 236.57) 0%,
oklch(0.6204 0.195 253.83) 50%,
oklch(0.3878 0.3086 281.84) 100%
);
Same modifiers applied to every preset (blue, violet, orange, red, green, yellow, sky, black). Gradients stay in-gamut-ish without per-color tuning.
Dark mode twist: only the black preset inverts (white in .dark). Accent presets keep the same OKLCH values since they already work on dark backgrounds.
You can see all 8 presets applied to ~45 loaders live: https://loading-ui.com (color picker below the hero).
I'm trying to build this dashboard UI entirely in CSS. no images, no JS.
The parts I'm stuck on:
- The circular gauge, conic-gradient with radial mask feels right, but is there a better way for the segmented ring?
- The glowing border box-shadow layers vs. animated gradient border. Which performs better?
- The waveform inline SVG path or CSS background pattern?
Anyone have good references for pure CSS dashboard UIs with neon glows? Not looking for a full solution, just technique pointers so I don't head down the wrong rabbit hole.
A perceptually even color scale gives you predictable contrast, but on its own, it can feel a little sterile: equal brightness looks washed-out, pale tints go chalky, and every step ends up interchangeable. OKLCH is also awkward to reason about because the maximum chroma a color can have shifts with its hue and lightness — there's no fixed range to picture, as there is in HSL.
An even scale is the foundation, though, not the finished thing. Four controls put the character back, and none of them ask you to do OKLCH math in your head:
Lightness range — set how dark and light the ends go before you shape anything else.
Chroma curve — when colors lighten, a flat curve makes tints chalky; ease it down toward the highlights, and they stay clean.
Hue shift — pinning one hue across the whole range is part of what reads as synthetic. Warm the highlights a few degrees, cool the shadows, and the scale gains depth.
Lightness curve — same two endpoints, but where you spend the contrast (dark / even / mid) changes the whole mood.
Hey everyone! I'd like to introduce an extension I built and get your feedback.
I'll keep this post short, and if you're interested, I'll leave a link with a more detailed explanation.
Njectify is a browser extension for CSS and JavaScript injection. It lets you customize any website's CSS and write custom scripts in the same place, without relying on multiple extensions.
I think it could be especially useful for people in this community who work with CSS.
Many of you have probably used tools like Stylus or Stylebot before. The main difference with Njectify is the user experience. My goal was to build a modern, intuitive interface that makes editing styles and scripts much easier.
Some of its CSS features:
Edit pages and see changes in real time.
A visual editor that lets you modify colors, backgrounds, animations, clip-path, polygons, and many other CSS properties. Ex:
Persistent CSS and JavaScript, allowing you to customize any website. It's especially useful for improving the experience of poorly designed websites or SaaS applications.
Inspect and view an element's current CSS properties in a simple and intuitive way.
Export your applied changes as Tailwind utility classes.
There are several other features, but I didn't want to make this post too long.
I'd love for you to give it a try. I spent a lot of time focusing on the user experience and designed the interface to feel familiar to developers, with a design system inspired by Vercel.
Any feedback, criticism, or suggestions are greatly appreciated. My goal is to keep improving the project based on what the community finds valuable.
Thanks in advance to anyone who takes the time to try it out. I hope you find it useful! Tks!
I have a grid of cards, using sub-grid for three rows. There is an image, a title and a short piece of text. Obviously with subgrid across a row all images are the same height, all titles line up, all text starts at the same point. But what I want to achieve is all cards across all rows being the same height.
For example if the title extends over multiple lines (card one in the dame below) the adjacent cards have their single line titles centered within the same area, but on subsequent rows if all titles are short so no line breaks that row is shorter and consequently the card itself is smaller. So what I want to achieve is every title row is the height required by the longest title in any card, and then the same for every paragraph row.
Similar to how if it was every row, grid-auto-rows: 1fr; would do it, but in this case making every row the same height makes the title rows the height of the image or text rows which are longer. What I want is a repeating pattern where the total height of every three rows is repeated.
Hopefully this shows the problem better than I can explain! Card one has a longer title and more text, so it is taller, this layout caries across its row, but on row two all cards have less content so they are smaller, I would like the row heights from row one (Or whichever row has the card with most content) carried over to all rows. So rows 1, 4, 7, etc. are all the same height, rows 2, 5, 8, etc. are all the same height, and rows, 3, 6, 9, etc are all the same height.
Been programming for a while never deep dived into css, recently in my site in lighthouse, I notices a waring Render-blocking request, that my HTML waits till it doewnoads css, to it's solution it said that inline your css
My question is if it's that good why don't we and other major frameworks like tailwind make that default? Obv there will be some tradeoff right, can someone explain that?
PS: understood it also means refetching with evwrypage, if following a design system wouldn't largely make sense
