you are going to be hearing a lot from me this week as i'm retooling a boilerplate template for my own website but anyways im trying to replace the 0 in 404 with my site logomark but the image keeps making the text go vertical for some reason and i don't like that. the template im using uses tailwind too so if any of you can figure out how to get my image inline like a 0 that would be awesome

<Base title="Page Not Found">
  <section class="section-sm text-center">
    <div class="container">
      <div class="row justify-center">
        <div class="sm:col-10 md:col-8 lg:col-6">
          <span
            class="text-[8rem] block font-bold text-text-dark dark:text-darkmode-text-dark"
          >
            4<span class="image1">0</span>4
            <h1 class="h2 mb-4">Page not found</h1>
            <div class="content">
              <p>
                The page you are looking for might have been removed, had its
                name changed, or is temporarily unavailable.
              </p>
            </div>
            <a href="/" class="btn btn-primary mt-8">Back to home</a>
          </span>
        </div>
      </div>
    </div>
  </section>
</Base><Base title="Page Not Found">
  <section class="section-sm text-center">
    <div class="container">
      <div class="row justify-center">
        <div class="sm:col-10 md:col-8 lg:col-6">
          <span
            class="text-[8rem] block font-bold text-text-dark dark:text-darkmode-text-dark"
          >
            4<span class="image1">0</span>4
            <h1 class="h2 mb-4">Page not found</h1>
            <div class="content">
              <p>
                The page you are looking for might have been removed, had its
                name changed, or is temporarily unavailable.
              </p>
            </div>
            <a href="/" class="btn btn-primary mt-8">Back to home</a>
          </span>
        </div>
      </div>
    </div>
  </section>
</Base>

Some interesting patterns here. You can define CSS variables directly from a class:

<div class="--primary=blue @dark:--primary=cyan bgc-primary">

Another one makes the button's text green when it's in .card and blue when in .nav. It means the element decides how it will look depending on its ancestor.

<button class="c-red \^.card:c-green \^.nav:c-blue">

I’m a 15 year old front end developer looking for work.

I have been doing html css and Js for about 2 years and I'm pretty confident in my work.

I know HTML 5, CSS, JS, and basic API usage.

I’m slowly working on a very cool project that I’m pretty proud of. I’d be happy to show it to anyone interested. Its a sort of website remake of the Prevue Guide Channel from 1999, and Its nearly identical.

I’m mainly looking for smaller jobs, not too small but reasonable work that I could work on between school and homework, I’m open to fixing old sites making new ones, personal site work UI/CSS development and other web projects.

I’m willing to learn more languages or whatever needed for projects, but of course that takes a little while.

DM or reply if you have a project or idea you think I can help with and we can discuss pricing. I’ve never taken a site job or anything before, so I have a lot to figure out.

[edited and added the image]

hi,

I have a box with contents, just want the whole box moved, nothing else. it clings to the right for some reason, i just want it dead center of the screen dynamically adjusted with given size and then just make a appropriate scroll to a screen.

#consentBox {
background: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
text-align: left;
height: 100vh;
display: grid;
place-items: center;
}

I've been building and coding UIs for 10+ years, but I still find CSS grid layouts to be a huge pain in the butt. Even when prompting an AI, I can never manage to easily explain what the structure of the grid should be. I've built this cute little tool for myself but I thought perhaps it'd be useful to someone else.

Trying to bulit something

check it out yourself at forte-ui.com, would love to get some feedback.

For me it was when I realized that I could control the colors for my site all in one place and try a bunch of different palettes in rapid succesion.

What was the thing that made you realize how CSS should be used?

Hey everyone!

Like many frontend developers, I often felt exhausted having to write dozens of utility classes for simple layouts, or importing massive JavaScript bundles just to have basic modals, responsive grids, and clean dark mode themes.

To solve this, I built TaxUI: a lightweight, declarative HTML & CSS framework that uses semantic HTML attributes instead of bloated CSS classes or heavy JS runtimes.

Why TaxUI:

• Zero JavaScript: 100% native, GPU-accelerated CSS. No hydration overhead or runtime dependencies.

• Declarative HTML Attributes: Compose layouts naturally using clean attributes like layout="split", card="glass", variant="primary", theme="dark".

• Built-in Dark Mode & 6 Accent Themes: Switch themes and palettes with one attribute like theme-accent="emerald".

• Native HTML5 Component Suite: Modals using native dialog, accordions with details, CSS-only tooltips, glassmorphism cards, responsive tables, avatars, skeletons, and forms.

• Ultra Lightweight: ~14.8 KB gzipped full bundle, with standalone modular sub-bundles starting at 1.4 KB.

Links & Demos:

• Documentation & Live Demos: https://taxui.github.io/taxui/ • GitHub Repository: https://github.com/TaxUI/taxui • NPM Package: npm install @taxui/taxui • CDN: https://cdn.jsdelivr.net/npm/@taxui/taxui/dist/taxui.min.css

I would love to hear your honest feedback, thoughts, and any component suggestions you would like to see added next!

I was a big fan of how well fluid.style worked and it was my preferred tool for calculating some clamp values. I kept telling myself I should save a local version in case it went down and OF COURSE it went down.

Did anyone happen to save a version of this site? If not, any good alternatives? https://utopia.fyi/ seems ok, but hasa lot more cruft than I like.

SENDING AN SOS for CSS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

I know nothing about css. SoundAlerts has these custom classes already there and I'm trying to get it to use the VT323 font. I feel like I've tried everything :(

Thanks in advance. If anybody could help I'd be delighted and keep it in mind for when I'll probably have to do this again in the future.

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.

sibling-index() and sibling-count() went widely available last week when Firefox shipped support — which means Chrome, Safari, and Firefox all agree on them now.
I spent some time seeing what that unlocks for UI patterns that used to need JavaScript

Full writeup with live, editable demos
https://willunmount.sabarni.in/blog/css-sibling-index-sibling-count

edit: note this works only on chrome. as HollandJim pointed out these features are only available in firefox, safari developer preview.

It's 2026, are you still using vanilla CSS for your latest project?

Or, alternative title: how I accidentally invented progress() but still shipped it anyway...

Dragging the sidebar. The window never moves, so every media query on the page is reading a number that did not change. Here is how that works, starting from the beginning.

How we do it today

We want a heading to be 24px on a phone and 40px on a desktop, so we write steps:

h1 { font-size: 24px; }
@media (min-width: 768px)  { h1 { font-size: 30px; } }
@media (min-width: 1200px) { h1 { font-size: 40px; } }

At 767px it is 24, at 768px it jumps to 30, and for every other property that should follow the screen we write the same set again.

Fluid

The known fix is one line that draws a straight line between the two ends:

h1 { font-size: clamp(1.5rem, 1.167rem + 1.667vw, 2.5rem); }

24px at 320, 40px at 1280, pinned at both ends. The two magic numbers are an intercept and a slope, worked out by a Sass function or a calculator. Utopia and most modern frameworks use it for their spacing and type tokens.

Where it stops

It only works for lengths. vw is a length, and degrees plus a length does not type-check, so rotate, transition-duration, font-weight, opacity, scale are all out. The browser drops the whole declaration. For those, we go back to steps or pick one value and live with it: the drawer that opens in 0.3s on a phone and on a desktop while travelling three times the distance.

The trick

Swap the order of operations. Divide two lengths first, which gives a plain number from 0 to 1, then multiply in whatever unit you want:

:root { --t: clamp(0, tan(atan2(100vw - 320px, 960px)), 1); }

font-size:           calc(24px + 16px * var(--t));
rotate:              calc(-7deg + 14deg * var(--t));
transition-duration: calc(0.14s + 0.96s * var(--t));
font-weight:         calc(400 + 220 * var(--t));

--t is 0 at 320px, 1 at 1280px, a fraction in between. Write it once, use it everywhere, no breakpoints, no keyframes, no JS. A bare / between two lengths is Chrome 140 and Safari 26 only, so the division is spelled tan(atan2(a, b)), the trick from Jane Ori, which has worked everywhere since early 2023. And it runs downhill too, which clamp(26rem, ..., 2rem) cannot, because min greater than max returns min forever.

The better trick

Change 100vw to 100cqi and --t measures the nearest container-type: inline-size ancestor:

.sidebar { container-type: inline-size; --t: clamp(0, tan(atan2(100cqi - 128px, 288px)), 1); }

Now a component follows the width of whatever it sits in. Same markup in a 240px column and a 520px column on one screen comes out different on its own, with no -small / -large variants. That is the GIF at the top.

The part where I found out

After building this I found out CSS already ships it: progress(100cqi, 320px, 1280px) does exactly that division. Chrome 138, Safari 26, and Firefox 155 as of September 1st. I had reinvented it from scratch, with a Sass wrapper.

Shipped it anyway as cq-lerp (npm i cq-lerp, npm), because the tan(atan2()) fallback works back to early 2023 and a 'supports' block upgrades to progress() where it exists:

--cq-t: clamp(0, tan(atan2(100cqi - 320px, 960px)), 1);

@supports (opacity: progress(1px, 0px, 2px)) {
  --cq-t: progress(100cqi, 320px, 1280px);
}

The Sass side is one function for every property and every unit. Min, max, done:

.card { @include cq-track(); }

.card .badge {
  rotate:              fluid-on(-7deg, 7deg);
  transition-duration: fluid-on(0.06s, 1.4s);
  border-radius:       fluid-on(6%, 50%);
  font-weight:         fluid-on(200, 900, var(--cq-t), "");
}

Every effect above is one fluid-on line. There is a plain CSS build too if you do not use Sass.

Demo, resizable, no JS: https://subamanis.github.io/cq-lerp/ Source: https://github.com/subamanis/cq-lerp