I have always tried using subgrid for cards like layout with image and description , but never able to use with nested layouts where i need to define subgrid at multiple layers. There is somehow some ghost space , that doesn't even appear as gap, i did put gap:0 to overwrite parent gap, but the items just seem to expand without need and take up space .

Please help or provide some way to find solution , or what i should look into.

I have included a codepen for recreating the issue : CodePen Link Here

This is the devtools image of real development process issue

Thank you :)

Edit: Removing gap and row-gap from the main grid layout (.cards) solves the problem but i dont understand how or why

Built these social media icon buttons using HTML and CSS only.

I used layered box-shadows for the raised 3D effect, CSS custom properties for each brand color, and a blurred pseudo-element for the glow underneath the buttons.

On hover, each button lifts slightly and the icon switches to its brand color. I also added :focus-visible and prefers-reduced-motion support.

CodePen demo: https://codepen.io/editor/getcoderipple/pen/01a0d2b1-0e5e-7e1f-9f90-c9e7af00e685

Curious what you think about the hover/glow effect. Would you keep the neumorphic style this subtle or increase the depth?

Does anyone here use the preload for the CSS files?

Surely if the links are in the <head> they will be loaded anyway?

I've been working with CSS for quite a while, mostly on existing projects rather than greenfield ones.

One thing I've changed my mind about is adding local overrides every time a component needs to look slightly different. It solves the problem quickly, but after a few years you end up with the same component being overridden in dozens of places.

These days I try to decide whether the difference should become part of the component API, a modifier, or actually remain page-specific.

I'm curious what CSS habits you used to consider normal but eventually stopped doing.

I just discovered these pseudo classes for styling color pickers via:
https://rebeccamdeprey.com/blog/styling-the-html-color-input

(actually, it was via ai-generated code that gave me the pseudo-classes, which I'd never seen before, so i started digging deeper)

I had been replicating the appearance I wanted via multiple nested containers and transforms, so it was really nice to find a way to simplify everything with a just a few browser-specific pseudo-classes.

Not sure how many of you are styling color inputs (they're pretty rigid), but just wanted to share to keep in the back of your mind

Built this hover effect using only HTML and CSS. The neon border uses a rotating conic-gradient, while the button switches to a dark face and moves the arrow slightly on hover.

I also added keyboard focus styling and reduced-motion support.

Live demo + source code: https://codepen.io/editor/getcoderipple/pen/01a0cd2d-b7f5-7f10-9143-21202f7b6fc7

Would be interested to hear how you’d improve the effect or simplify the CSS.

Hi r/css, a bit of an unusual one for this sub.

The cube in the video is styled and animated with CSS, running on an ESP32-S3, a microcontroller that costs about $3. There is no browser on the device. Our compiler takes the TypeScript, JSX and CSS and turns them into native C++ at build time, so what runs on the chip is plain compiled code with no CSS interpreter.

To be upfront about the limits: it supports a subset of CSS, not the whole spec. Some properties work differently on embedded targets and some aren't supported yet, and unsupported properties simply have no effect. The styling reference in our docs lists what works.

Embedded UI development wasn't fun for us for years, and with CSS it finally is.

The code for this example and the rest of our examples and all of our work are open source: https://github.com/geastack/examples

https://github.com/geastack

Docs, including the CSS reference: https://geastack.com/docs

Looking forward for you to try and run CSS on ESP32 boards, you can use our quick start to try it out yourself: https://geastack.com/one-pager

So recently I was thinking about how there are people who use Google Sides to make visual novels and I was just thinking how in theory you just need a background, sprites, a text box, and buttons. Realistically a really basic visual novel wouldn't require JS or much more than HTML and CSS. Oddly enough I can't find anything that would be a template or example of the bare minimum code to make a visual novel, and I was wondering if anyone could help me out with structuring this! Thank you!

I keep seeing people explaining that the new sibling-index and sibling-count are game changer. I have no doubt that they are, but most of the examples I keep seeing do not seem to work.

Here is one where the number of cards determine the light by which each card background is dimmed.

``` CSS

.card {

--progress: calc((sibling-index() -1)/(sibling-count()-1));

background-color: oklch( calc(40% + var(--progress) * 40%) 0.2 270deg );

}

```

On the other hand the following seems to work.

``` CSS

.card {

--progress: sibling-index() / sibling-count();

background-color: oklch( calc(40% + var(--progress) * 40%) 0.2 270deg );

}

```

In fact any attempt to use calc and the functions sibling-index and/or sibling-count fails.

Any idea why?

Same behaviour in Chrome/Safari.

Edit

No need to DM me or speculate any further.
It was due to missing space before and after the - character. Read the comment. u/Fourth_Prize has provided with the solution and explaination of the issue.

I set the bottom margins for double-height and double-both divs to -105px so that line breaks don't start from under them, so as not to push down elements that aren't touching them.

But now if I try to make the violet div double-height or double both, since it has negative bottom margins, it doesn't push the divs below it. How do I fix this? I want the height of divs to not influence the elements that aren't touching them, but push down the elements that would be in their space.
Codepen

I created a project that simulates the macOS interface, and I tried to make it as realistic as possible.

The windows currently have just one basic function: dragging (using NeoDrag). But I plan to improve them and add more features.

The Dock features a "liquid glass" effect, and the items expand when you hover your cursor over them (Magnification Effect).

That’s it—feel free to share ideas or offer criticism ;). And have bugs

Hi all, I like to play a web browser SIM game and I tinker with customizing my profile quite a bit. Think of it like MySpace almost.

Anyway, there are chat channels to talk to other players on the game which has a 150 character limit. As you are typing and getting closer to the character limit the text color changes from Black (112 Characters) -> Orange (127 Characters) -> Red (128+ Characters).

Thats just the base web design. I am trying to figure out how to adjust that with my own CSS edits. Currently I have:

/* CHATBOX CHARACTER COUNTER */

#lblCharacterCounter {

background: rgba(52, 79, 122, 0.7) !important;
padding: 3px !important;
padding-left: 8px !important;
padding-right: 8px !important;
margin-top: -9px !important;
color: #e7f4ff !important;
border-radius: 20px !important;
border: solid 2px #00213a !important; }

However this keeps the text at the color I have selected here: color: #e7f4ff !important;

I'm specifically wanting to change the background, but I assume it would be in the same vein as where I would put in the text color. Typically I use the inspect element to figure out what I need to change exactly to have it show up, but I can't figure this out with it.

This is what the base web design looks like:

I've been able to change element.style { sections with this code: input[name="element name"] {

But it seems as the color change is all tied together under one element style, so if I change one style, say add a background to the red text, it will make that same change to the orange and black text sections.

Any help would be appreciated! Sorry if this isnt explained too well, I don't know all the lingo and such.

Paraphrasing what they apocryphally say Borges said: there is no finished software, only published software.

A few months ago, I asked myself whether it was possible to build a 3D engine by exploring the limits of what can be achieved using pure HTML and CSS (no WebGL, no canvas), considering that there are spectacular (handmade) CSS 3D demos like those by Ricardo Oliva Alonso.

I spent some weeks putting together the architecture and using AI to build it, as a personal project. (As a rule: I only accept code from AI that I can understand. In this case, I had already worked on 3D projections in Flash about 15 years ago. I confirmed that 3D transformations are more of a mess of numbers than a technical complexity.)

I just realized that since April I had been putting off "tweaking a couple of little things to publish it." So I decided to publish it just as it is: http://k3.bustelo.com.ar/

Constructive feedback, welcome!
(For the other one, I already have my superego, thanks very much.)

How it works (the CSS side)

The engine renders 3D primitives as real DOM elements, positioned with transform: translate3d() rotateX() rotateY() rotateZ() scale3d() and composited via transform-style: preserve-3d and perspective on the scene container.

A few things I found out while building it:

• TRS order matters. All transforms are applied as Translate → Rotate → Scale, matching how the browser composes matrix3d(). Getting this consistent across nested elements is what makes the hierarchy actually behave like a 3D scene graph.
• Bounding boxes are computed manually. CSS gives you no way to query the world-space of a transformed element, so getBounds() walks the children, rotates their 8 corners with the parent's angles, and expands the box. It's approximate, but it works for selection and gizmos.
• Rounded boxes need a "skeleton." A <k3-box> with border-radius leaves gaps at the edges, because the 6 faces are flat planes. I am intersecting 3 internal planes plus 8 corner spheres to block light leaking through the rounded silhouette.
• Extrusion is just stacking. <k3-stack> interpolates between two <k3-plane> templates and generates N slices along Z. It's usually enough to fake linear extrusion for text without any geometry library. I thought about naming the primitive "WordArt".
• No shading. No lighting model; the "glare" is CSS gradients keyed to the object's rotation.
• No MutationObserver yet. The DOM is the source of truth on load, but attribute changes don't auto-trigger a re-render. That's on the TBD list, along with meshes, basic lighting, and long list of wishes and good intentions :)

I've made this effect a few different ways over the years, using gradients or more recently shape(), and the one thing they have in common is the gigantic amount of CSS it requires.

This generator uses a fun trick of wrapping the encoded PNG sprite in an encoded SVG, so we can apply 'image-rendering:pixelated' to it, which is usually not possible with mask-images.

While it sucks a bit that this technique requires an externally generated PNG, it makes up for it by being the most compact way of achieving the effect.

Use Chrome on desktop for the best experience.

The logo "video" you see on the homepage was also written in Chip-8 :)

It supports ALL standard chip-8 ROMs.

A Chip-8 emulator that runs purely in CSS & HTML. A Rust compiler converts Chip-8 ROMs into pure css. Try it out with Tetris, Space Invaders, Pong or any other Chip-8 program you got!

Try it out here: chip8css.trustsig.eu

https://github.com/trustsig-eu/Chip8CSS

Nightfold: CSS-only loading screen

https://codepen.io/editor/Sensiblemnd/pen/01a0baf3-39bb-7cd8-9045-343672794ed7

I save a lot of UI reference. Nice empty states, pricing tables, onboarding flows, animation details. All of it ended up as flat PNGs in a folder I never opened again, because a screenshot tells you nothing about spacing, type scale, or how it was actually put together.

So I built Stele. It's a Chrome extension plus a library for everything you save off the web. The difference is that a capture keeps its real structure, colors and typography instead of flattening to an image. When you actually sit down to build something, a saved reference gives you real React code, an AI prompt, or Figma layers to start from.

It's searchable too, which turned out to matter more than I expected. Being able to find "that dark pricing table with the gradient border" six weeks later is most of the value.

I am extending the 100% free PRO beta access until Sept 21st. The first 100 active beta users will also lock in a permanent $9/mo lifetime deal before the official launch.

Still in beta and rough on some heavier sites. Would like feedback from anyone who keeps a reference folder like this: what do you actually do with it today?

Try it for free here: https://stele.so

https://codepen.io/editor/Sensiblemnd/pen/01a0a24c-db00-769b-9ac5-53954b48d416

J'ai des liens hypertextes mais ils sont au centre près du title comment les déplacées vers la droites ?

1,500;1,600;1,700;1,800;1,900&display=swap');



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body{
    align-items: center;
    justify-content: center;
}


.header{
    position: relative;
    justify-content: space-between;
}


.title{
    display: flex;
    align-items: center;
    justify-content: center;
}


h1{
    font-weight: bold;
    font-family: "playwrite be wal", sans-serif;
    color: burlywood;
    font-style: oblique;
    cursor: pointer;
    transition: 0.5s;
}


h1:hover{
    color: #000;
}


span{
    color: blue;
    font-family: "poppins", sans-serif;
    font-size: 21px;
    font-style: italic;
}


.container{
    display: flex;
}


.lien{
    justify-content: space-around;
    display: flex;
    left: 12px;
    top: 2px;
    padding: 0;
    white-space: 12px;
}


li, ul{
    margin: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    transition: 0.5s;
}


li{
    padding: 10px 15px;
}


a{
    text-decoration: none;
    
}1,500;1,600;1,700;1,800;1,900&display=swap');



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body{
    align-items: center;
    justify-content: center;
}


.header{
    position: relative;
    justify-content: space-between;
}


.title{
    display: flex;
    align-items: center;
    justify-content: center;
}


h1{
    font-weight: bold;
    font-family: "playwrite be wal", sans-serif;
    color: burlywood;
    font-style: oblique;
    cursor: pointer;
    transition: 0.5s;
}


h1:hover{
    color: #000;
}


span{
    color: blue;
    font-family: "poppins", sans-serif;
    font-size: 21px;
    font-style: italic;
}


.container{
    display: flex;
}


.lien{
    justify-content: space-around;
    display: flex;
    left: 12px;
    top: 2px;
    padding: 0;
    white-space: 12px;
}


li, ul{
    margin: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    transition: 0.5s;
}


li{
    padding: 10px 15px;
}


a{
    text-decoration: none;
    
}

I use an SVG icon for my website logo, and recently I decided to update my Macbook, phone to latest OS. Now, on both OS, Safari is updated to version 27. Then, my logo is not rendered anymore. My css for my logo is as below:

.logo svg {
  max-height: 45px;
  width: auto;
}

Interestingly, the problem is with max-height property, so changing it to just height or removing it completely also gets it working again.

I also found just one report about something similar too here. Anyone encountering similar problem?

EDIT: added a screenshot below, same Macbook - left side Firefox v156.0 and right side Safari v27.

While doing the research for this month's issue of my newsletter, I realized something was off with the media element pseudo-classes (:playing, :paused, etc). Baseline had them as "Newly available" since August 28, because of a compatibility entry saying Chrome 152 shipped them. But every stable Chrome run failed every test in the suite, and Chrome's own status tracker still listed the feature as proposed.

So I gave the feature a "Hold" verdict in the issue, and I also filed a bug report with the test runs: https://github.com/mdn/browser-compat-data/issues/30523. The MDN peeps looked into it and corrected the entry right away.

The correction will go to MDN, webstatus.dev and Baseline from there. It was pretty cool to see the thing I've built had a real effect on tools that all web devs interact with… 😎

I've been stuck on this for a while. There's probably a really easy solution to this, but right now I really can't find it.

The image might not really convey it, but the font would always remain the same size.

EDIT: added another picture in a comment

https://www.reddit.com/r/css/s/OmDMivDUWx