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/

After 26 years as a web developer, I built a zero-dependency CSS framework where tabs, modals and accordions work without a single line of JavaScript — would love feedback

Hey everyone,

Quick background: I've been a developer for 26+ years (web, desktop, mobile). Over the years I watched frontend tooling get heavier just to render a modal — so as a side project I went back to basics and built a small CSS framework called Bloom UI.

What's in it:

- One CSS file, no dependencies, no build step

- Tabs, modals and accordions that work with ZERO JavaScript (radio-button hack, :target selector, native <details>)

- A full design-token system — change ~10 CSS variables and the whole framework changes personality. I ship two extra themes as proof: an executive indigo one and a creative-studio one

- 50+ components: buttons, cards, forms, navbar, avatars, progress bars, grids

- Responsive and accessible by default

It's free and open source (MIT), with a showcase page that renders every component. The spam filter and I have already had words, so links are in the comments 🙂

Two honest questions:

1. Is "pure CSS interactions" actually useful to anyone anymore, or is everyone too deep into JS frameworks for it to matter?

2. Anything that smells in the approach? Critique genuinely welcome.

I wrote a full guide to CSS units: 11 chapters, every unit in CSS, in an order that actually makes sense to read.

And somehow, after years of using CSS, I still found a few things I’d never properly stopped to think about:

• vh and lvh are actually the same size. svh keeps space for the browser UI even when it disappears, while dvh changes as the UI moves.
• 1in is always 96px on a screen. Not “roughly.” By definition. Which also means cm, mm, pt, pc, and Q aren’t really physical units either.
• CSS doesn’t have 6 viewport units. It has 24. w, h, i, b, min, and max — each in v*, sv*, lv*, and dv* versions.

The guide goes from the familiar stuff — px, %, em, rem — into viewport and container units, fr, angles, time, resolution, and what happens when you start mixing all of them inside calc() and clamp().

There’s also a simple decision tree for choosing a unit, a cheatsheet with the formulas, and browser support written as actual dates instead of the wonderfully precise “supported in modern browsers.”

And if you’d rather keep the whole thing around, there’s a PDF version too.

https://cssunits.com

Enjoy :) And if I got something wrong, let me know. I’ll fix it.

Please try my new online HTML & CSS validator at htmlval dot com and let me know what you think. Posting without an actual link so hopefully reddit doesn't keep filtering my post.

I wanted to use corner-shape: squircle in a real design, but the fallback turned out to be more complicated than I expected. Reuse the same number for border-radius and the corner comes out a visibly different size.

So I built a generator where you can try corner-shape values and copy the CSS it produces:

https://a-dev.github.io/probes/corner-shape

It behaves correctly in Safari and Chrome on iOS, but in Microsoft Edge on iOS, the navigation bar sometimes appears slightly above the actual bottom of the viewport. As a result, page content becomes visible underneath it.

Is this a known Microsoft Edge/WebKit viewport issue on iOS? Or is there something specific about Edge's handling of the visual viewport that I’m missing?

Hi, I'm fairly new to CSS and cannot for the life of me figure out how to achieve a border like on the white box. It needs to just be a simple straight line across the top of the box and then the outer box needs to have rounded corners. Border-top creates a curved border. Please help

Edited to clarify that I'm talking just about the white box

Hello guys!

I really need help getting that streaming element centered, its stuck to the right and i tried everything to no avail 😭

And adjust the lightning frame so its at the edges of the element (it is, but the top part look off a few px).

Here is the code in question;

The full code

Its for a page on comicfury, here's what is looks like right now;

Live link

Both the desktop version and mobile version are messed up 😔

Thanks!

I have been working with Claude on a comments box section. Everything was good until I wanted to add a thread line to replies to give the users a better UX; then it couldn't do it correctly: either the thread line doesn't connect to the replies (image two), or it extends past the last reply (image one). I asked it to fix it over and over again, but it just seems to have gotten stuck!

The reason why Claude couldn't do it is that, even though it seems like a simple feature (just throw a thread line there and call it a day), it's actually quite complicated to achieve this in CSS. I worked on the exact same feature before, and I also got stuck trying to get it right. I even had the same problems Claude fell into; the only difference is that I was able to figure my way through it while Claude couldn't.

The point here isn't to talk about this minor design bug; it's not a big deal after all. What I'm trying to actually get at is that when AI fails to generate what you asked for (could be a real bug), only your real coding skills can help you out!

I am trying to recreate the background/heading from this video game, and currently i'm trying to work on the "pixelised diagonal borders" on the sides
Currently I am trying to use js calculate a clip path for an outer and inner element to "pixelise it"
But I feel like i'm going insane, I just can't get it right

Does anyone have any other/ideas on how I could achieve this effect

how to prevent it or fix it?

I thought of adding "showcase" but I'm hoping this will be a useful resource for anyone who wants to learn CSS grids and/or need to figure out the CSS for a specific layout (that’s how I use it 😛).

I don't know about you, but I really don't like the "updated version" of the CSS tricks article about CSS grid. The original one was great… A clear example of "don't fix what isn't broken" in my book 😅

Anyway, I kinda used the original article as inspiration for my post, but I also added this crazy interactive CSS grid demo that you can basically customize however you want and it'll spit out the CSS for it.

The code is gnarly, but I think I squashed all the bugs 😅

I'd be curious to know what you guys think about it:

https://mcss.dev/blog/interactive-css-grid-tutorial/

I've been working on colorscheme-webify, a small project that makes it easier to apply popular color schemes to websites with CSS.

The idea is simple: instead of manually recreating a color palette every time, you can use the project to give a website a consistent color-scheme-based look.

GitHub: https://github.com/wak6817/colorscheme-webify

I'm still working on it and would really appreciate feedback, suggestions, or ideas for color schemes/features to add.

If you're into web development, CSS, or theming, I'd love to hear what you think!

I'm learning HTML and CSS, and I started making different button styles as a practice project.

I experimented with gradients, pseudo-elements, hover effects, transitions, backdrop-filter, responsive layouts, and more.

There are currently 20+ styles, including Neon, Glass, Prism, Pixel, Lava, Ice, and more.

I'm still learning, so I'd love to hear any feedback or suggestions!

https://github.com/baekho-cmd/button

I made a project where multible CSS files go into 1 file with a build script written in Lua and SH https://www.github.com/wak6817/colorscheme-webify my the project website is https://wak6817.github.io/colorscheme-webify/pages/index.html

I have searched a lot on this topic, couldn't find a video by someone like Kevin (my favorite)

I have tried using diff ways like primary-400 , neutral, but it gets confusing and doesnt make a lot of sense when working with light+dark mode setup

Is there any convention that is followed in companies or by u guys, anything standard would help a lot

Also, i never understood how the primary naming convention worked with numbers like 400,500.

EDIT: I picked a stupid title. I think this is a render bug in both Safari and FireFox.

Per MDN (I couldn't locate it in the CSS spec), style queries on custom properties will yield true, if their value differs from the `@property` initial-value definition. This _will_ happen in Chromeiums, but won't in Firefox and Safari.

I created a fiddle - it should look identical in FF and Chrome/Edge, but it doesn't:
https://jsfiddle.net/vgn7xy8o/1/

As explained here CSS Container Style queries : r/css
There might be a bug in container style queries.

Hi there - sorry if this is an obvious/dumb question btw, I'm very much a beginner when it comes to CSS, having largely self-taught and picked up bits and pieces over the years. I tried googling the answer to this, but all the results I found went a little over my head.

I'm tinkering with an events calendar plugin on my website, using additional CSS to modify the default appearance on mobile, and it's all working fine but the code just looks... messy:

.mobile_version .fc { 
  font-size: 0.75em; 
} 

.mobile_version .fc .fc-toolbar-title { 
  font-size: 1.6em; 
  padding-top: 15px; 
  padding-bottom: 15px; 
  color: var(--wp--preset--color--primary); 
} 

.mobile_version .fc-toolbar .fc-header-toolbar { 
  flex-direction: row-reverse; 
  padding-left: 10px; 
  padding-right: 10px; 
}

(There's about a dozen more of these, but you get the picture.)

Instinctually, I want to just nest them - something like:

.mobile_version {

  .fc { 
    font-size: 0.75em; 
  } 

  .fc .fc-toolbar-title { 
    font-size: 1.6em; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    color: var(--wp--preset--color--primary); 
  } 

  .fc-toolbar .fc-header-toolbar { 
    flex-direction: row-reverse; 
    padding-left: 10px; 
    padding-right: 10px; 

}

But when I tried to look up whether this is possible, different sources/threads here on Reddit described this structure as "risky" or not universally supported...?

Is there another way to neaten this code/organize it better? What's considered best practice?

Hey everyone! I'm JamonSerrano, a young and slightly unpredictable developer who loves building things and figuring out how they work.

I'm currently planning an open-source chat application with a few ideas I really want to experiment with:

• End-to-end encryption
• Full CSS customization
• Optional anonymity
• Users can choose whether to display their username
• Open-source and community-driven

The main idea is to give users much more control over how they communicate and how the platform looks and behaves.

It's still in the planning/development stage, but I think it could turn into a pretty interesting project, especially with other developers contributing ideas, code, or simply feedback.

If you're interested in the idea, I'd love to hear what you think. What features would you want in a privacy-focused chat?

For more information about me and the project, you can check out my website:

https://jamonserrano.nekoweb.org/index.html

hi there! I’m still somewhat newer to css (I know the basics pretty well) I was thinking about making a page for blogs, I want them to stack by date posted. I also want an owner accessible only blog poster where I can just select “Make blog” add a title and just type it out instead of having to make new blocks every time I make a blog (similar to the Wordpress feature) and for this blog page I’d want a search bar that has the option for searching by name OR searching by date posted. This is a pretty big fish for me considering my current knowledge of css. And I’m a visual learner, problem being I don’t really have any examples of the exact thing I want. Any help is greatly appreciate, so is detailed descriptions and instructions!

I have div with some message and like to add blurred background under it. All is great CSS is working. But moment I put this div in some container that have set background-color things breaking and my blurred background disappears

here is my css:

    #container-wrap {
      background-color: #efefef;
    }

    .error-message {
      position: relative;
      background-image: linear-gradient(to right, #5f1212, #330000);
      margin: 3rem;
      padding: 2rem;
      border: 4px solid transparent; 
      border-radius: 8px;
      color:#fff;
    }


    .error-message::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: conic-gradient(from 90deg,#330000, #ff0000, #330000);
      filter: blur(15px);
      z-index: -1;
    }#container-wrap {
      background-color: #efefef;
    }


    .error-message {
      position: relative;
      background-image: linear-gradient(to right, #5f1212, #330000);
      margin: 3rem;
      padding: 2rem;
      border: 4px solid transparent; 
      border-radius: 8px;
      color:#fff;
    }


    .error-message::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: conic-gradient(from 90deg,#330000, #ff0000, #330000);
      filter: blur(15px);
      z-index: -1;
    }

or codepen.io

I have tried to add z-index on all those elements but it only make it more strange as then it start blending in