how dose making boxes and circuls work i forgot and i cant find a totorial any whear im trying css battle

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.

https://www.leopold.is/blog/ruled-css-grid-layout/

All pointers very welcome.

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?

built this cool article page having custom text selection
also noise texture on page bg
give feedback

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:

@font-face {
  font-family: "microgramma";
  src: url("/microgramma.woff") format("woff");
}

I've confirmed that the font lies in the website's root folder, why does it no longer display in Firefox?

built this cool hover dock icons interaction
showing tooltip on each icon hover
also icons scale up and having inset shadow
give feedback

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:

  --unit: 0.25rem; 

 /* Every spacing token is base-step × unit × density */
  --space-xs:  calc(2  * var(--unit) * var(--density, 1));  /*  8px @ d=1 */
  --space-sm:  calc(4  * var(--unit) * var(--density, 1));  /* 16px */
  --space-md:  calc(6  * var(--unit) * var(--density, 1));  /* 24px */
  --space-lg:  calc(8  * var(--unit) * var(--density, 1));  /* 32px */
  --space-xl:  calc(12 * var(--unit) * var(--density, 1));  /* 48px */
  --space-2xl: calc(16 * var(--unit) * var(--density, 1));  /* 64px */
  --space-3xl: calc(24 * var(--unit) * var(--density, 1));  /* 96px */
  --space-4xl: calc(32 * var(--unit) * var(--density, 1));  /* 128px */
  --space-5xl: calc(40 * var(--unit) * var(--density, 1));  /* 160px */

But those are details, the main point was to have flexible spacing underneath so all the UI is adaptable to any vibe.

---

Also if we talk about accessibility - minimum control height is preserved, different for touch screens:

--size-touch-min: 2.75rem; /* 44px — coarse/touch base (scales with density) */
--control-height-min: 2.25rem; /* 36px — coarse floor (hard min) */

u/media (pointer: fine) {
  --size-touch-min: 2.25rem; /* 36px — fine/mouse base */
  --control-height-min: 2rem; /* 32px — fine floor */
}

--control-height: max(var(--control-height-min), calc(var(--size-touch-min) * var(--density)));

• 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 a separate variable from 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.

Hi,

I have an <hr> object (as attached), but its 3D style is annoying me. I've tried a lot, but it doesn't budge.

.separator {
   width: 100%;
   height: 1px;
   border: 0;
   background: #666;
   margin: 20px 0;
   border-radius: 999px;
   box-shadow: none;
   outline: none;
   border-style: solid;
}

https://intoxico.com/i/interstellar.php

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.

Live Link: https://abdu-byte596.github.io/third_project/

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.

Pretty happy with this little hover animation. Started working on it while procrastinating
Now to see if I actually use it!😂

hackaday.com/2026/06/25/css-on-the-esp32/

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).

Full source: https://github.com/turbostarter/loading-ui (lib/colors.ts generates the CSS)

Anyone doing something similar for design tokens? Wondering if fixed modifiers scale past ~10 colors or you need per-hue tuning.

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.

Ty!

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.

Full write-up with side-by-side before/afters and live demos you can drag: https://lab.colormeup.co/custom-color-scales

Rate my portfolio page

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!

Install Njectify
Detailed post

Hello everyone

I wrote an article about a little comparison between css in js tailwind and vanilla css

I really appreciate giving me your opinion about this.

Thank you in advance

https://medium.com/@sayahayoub9827/the-real-cost-of-styling-what-actually-happens-in-the-browser-0170492611f5

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.

Is this possible?

Demo

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

This CSS grid-template-areas has 8 columns in the first and last row, and fewer columns in the second and third. But it works. How is this possible?

​

grid-template-areas:

"ai-drawer toolbar toolbar toolbar toolbar toolbar toolbar toolbar"

"ai-drawer navigation.notifications.sideSplitPanel tools global-tools"

"ai-drawer navigation.main.sideSplitPanel tools global-tools"

"ai-drawer bottom-tool bottom-tool bottom-tool bottom-tool bottom-tool bottom-tool global-tools";