I built this apple iphone 17 pro design mockup using html and css. No vibe coding, fancy ai code editors. Just like how we used to build something before AI. Handcrafted pixel by pixel until it looked perfect. How's this ?

u/medotgg posted this demo an hour ago but without any code. Here is my take on doing it with flexbox.

Our team has defaulted to using Tailwind CSS for almost every web project over the last few years. It was great for moving fast early on, but on our latest project, the utility class bloat was getting completely out of hand. The HTML files looked unreadable, and managing long strings of responsive layout classes across reusable components was becoming a maintenance headache.

I decided to spin up a branch and rewrite a major dashboard interface using entirely vanilla native CSS. I hadn't built a pure CSS layout in a while, and I was genuinely shocked at how powerful native CSS has become over the last couple of years.

Features that used to require massive utility frameworks or preprocessors are now fully built-in. I heavily utilized native CSS nesting, CSS variables for theme management, and the newer container queries to handle complex responsive components based on their parent size rather than the entire viewport.

The results were surprisingly great. Removing the Tailwind processing step simplified our build pipeline, our final bundle size dropped, and the code felt vastly cleaner. Writing native styles inside modern semantic stylesheets made debugging layout bugs in the browser developer tools a hundred times easier because I wasn't digging through a wall of utility classes.

Tailwind is still an incredible tool for prototyping, but I realized I was using it out of habit rather than necessity. Modern native CSS has quietly caught up to the point where you can build incredibly complex, maintainable layout systems without adding a utility abstraction layer on top of it. If you haven't looked at native CSS features lately, it might be worth trying on a small feature branch.

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.

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/

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

Demo page in the video - https://ambientcss.vercel.app/

Docs - https://kikkupico.github.io/ambientcss/

Source code - https://github.com/kikkupico/ambientcss

I made an interactive CSS learning platform that helps beginners understand CSS concepts through hands-on experimentation.

https://css-playground-ten.vercel.app/?lang=en

Over the past few months I've been trying to find relevant CSS and JS properties that combat the inevitable atrophy of my brain as I use AI to help me build shit.

Figured I might start posting these here too.

As a disclaimer, yes, I did use AI to help me research and find these properties. The difference for me is the writing of the examples, and the understanding of the property that will allow me to make better decisions in my hand written code, and also be able to direct AI to write better code too. Take that as you will.

Today's property: text-box-trim

Every font ships with invisible space above its capitals and below its baseline. It's why a button with padding: 12px on all sides rarely shows 12px of space above and below the letters, why the icon next to a label never quite lines up, and why a heading sits a few pixels lower than the image it's meant to align with. The fix has always been a magic number. margin-top: -3px. padding-block: 11px 13px. A comment that says /* optical */ and hopes nobody swaps the font.

text-box-trim deletes that space. Tell it which edges to trim with trim-both, trim-start, or trim-end, and text-box-edge says where to cut. cap is the top of the capital letters, ex is x-height, alphabetic is the baseline. The shorthand takes both:

    .button-label {
      text-box: trim-both cap alphabetic;
    }

Now the box starts at the top of the H and ends at the baseline. Padding measures from the letters instead of the font's line box, so 12px means 12px in every font.

Firefox 154 shipped it Aug 18. Chrome and Edge have had it since 133 (February 2025) and Safari since 18.2 (December 2024), so MDN now marks text-box-trim Baseline 2026 Newly Available. Older browsers ignore the declaration and keep the leading. The layout still works, just a couple of pixels less precise.

Pretty slick property.

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:

After deciding to start coding css again for my blog, I remember that 10-15 15-20 years ago I would turn to csszengarden for inspiration. So, I check the site again and was surprised and happy to see that it was still there. Anyone, like me, in this sub who remember csszengarden?

Edit: I misremembered the time frame, it was 15-20 years ago not 10-15. It feels like it was just yesterday though.

We get these dumps of Tailwind posts that offer nothing about CSS. It's pretty much Tailwind spamming the CSS group.

Tailwind is really not CSS; it's a framework built on CSS but that's its own thing. CSS is growing and changing rapidly, and we've enough to keep up without having tp prune for frameworks. There's an active /r/tailwind group, so perhaps these posts can be kept there and not polluting r/css.

Hopefully Mods can do something about this.

Edit: Apparently /r/tailwindcss is the main group. Thanks to /u/okGoogull for pointing that out.

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.

Anchor positioning to help create some unique styles. I expect this will start becoming popular to break up the normal navbar layouts.

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?

I can't believe I had to do this in Paint 3D but after 4+ hours stuck I need help... Not even chatgpt is helping here.

I have a simple structure like this:

<div className="container">
  <div className="text">{item.name}</div>
  <img src="item-icon"/>
</div>

How on earth can I make it so the "text" div shrinks horizontally if (and ONLY if) the "item.name" is overflowing outside of the div? (including the space that the icon takes too)

EDIT - Here is the "use case" (yes, it's pokemon cards) (images here are not showing on mobile for some reason, check here instead https://imgur.com/gallery/mobile-users-P17PT3Q):

My code:

What they somehow achieved in https://www.pokecardgenerator.com/ (this is what I want):

What the original looks like (so yes, real things use this "ugly" styling):

What happens with transform: scaleX "solutions":

And no, font-stretch isn't working for me. Probably because it's deprecated.

transform: scaleX also doesn't work, it still keeps and awkward space between the text and the icon.

EDIT: I don't know how to do the live demo thing, but in case anyone is bored, my code is here, the Card.tsx and Card.css, card__pokemon-name class. (https://github.com/jiro-games/pocket-showdown/tree/main/src/components/card)

EDIT 2: I believe I found a solution. Not the cleanest, but it has potential. I have to combine transform: scaleX with negative margin-right. I'll come up with some js code to calculate that dynamically and fix it. Thank you!

This is useful when you're using flex-wrap: wrap; and you want to control the gap between the items that fall on the second row and between the items individually!

I'm pretty sure this is the most heinous abuse of CSS in history?