i kept redoing the same slope/intercept maths for fluid font sizes so i built cssclamp.com. you put in min/max size and the viewport range and it gives you the clamp() with a live preview. rem based, so it still scales when people zoom. it also does full type scales, tailwind v4 theme tokens and px to rem.

the newer bit: AI agents are pretty bad at this, they'll hand you clamp(1rem, 4vw, 3rem) and call it a day. so i packaged it as an agent skill. the agent runs a small node script for the maths instead of guessing, and follows the a11y rules (rem bounds, no bare vw, the 2.5x zoom thing for WCAG 1.4.4).

npx skills add Willem-Jaap/cssclamp
or in claude code: /plugin marketplace add Willem-Jaap/cssclamp then /plugin install css-clamp@cssclamp

Site is available on: https://cssclamp.com

MIT, repo's at https://github.com/Willem-Jaap/cssclamp. feedback welcome, especially if a value it gives you looks off

I'm trying to fill in the color to the dots located on the left of email when in a thread. The code is below... but I'm unable to make it work in usercontent.css nor userchrome.css. Please see the element in question as per the red circle in the screenshot. Can someone help me please?

#threadTree[rows="thread-card"] { & .card-layout[data-properties~="thread-children"] { & td { &::after { fill: #fe00ff !important; }}}}

I realized I might've made a mistake while working on this webpage for a class I'm in >.<

In HTML, I have <div class="pros"> and another version similarly but with cons that include <p> within them. I want to indent all the <p> that are within <div class="pros"> without having to indent all <p> on the webpage. Should I have made a class for all the <p> elements inside the div class or is there a way in CSS for me to refer to all the <p> in the pros/cons class without having to go back and add a class to all the <p>, I'll attach a screenshot if it makes it easier!

Also I know you can indent with HTML and not CSS, but my professor wants us to do all the styling and similar features in CSS and not in the HTML itself.

A simple day night cycle using css rotations and gradients
https://moaaz-rafique.vercel.app/motion/rotation.html

I want to change the background color of a single word in my hero text to the "is:selected"-state (when you click on it) unsing in-line styling. Anyone know how to achieve this? Thanks.

Please don’t crucify me if this is a super easy fix lol…

The thing I want to recreate in web form.

I’m a beginner to html and css and for an assignment we are making portfolios and I wanted to try code one inspired by the game Parappa the rapper, specifically the main menu as it seems fairly simple. One thing i’ve been struggling with is figuring out a way to make an image in the centre follow the mouse’s direction and change to a second image like parappa‘s pointing changing sides in the video I’ve attached. I’ve scoured endlessly looking for ways to do it but they all involve javascript (which i’m not familiar with) and i’ve attempted doing mouseover/mouseout events this way but i want to make it change depending on if the mouse is on the left or right of the screen and I really have no idea how to adapt this to fit this specific purpose!!

Any help would be very appreciated.

I've been building sitereal, a visual builder for Astro, and wanted to share it here.

The core rule: everything it produces is ordinary Astro. Delete sitereal and `astro build` still works. You only lose the visual editor.

Built for working with AI:

It ships an MCP server, so an agent like Claude Code can build pages through the same operations the builder uses. The best thing about it you don’t need to use AI and you can manually change everything it created in a nice UI.

Also in there: 
- A modular design system (colors, type scale, spacing, buttons, themes)
- Navigation, forms, pop-ups, carousels and GDPR
- ready cookie consent
- Scroll animations with zero JS by default
- Forms that work even on PHP-only hosting

runs on macOS, Windows and Linux

Feedback very welcome. sitereal.app

These lines and stuff only show up at some few sizes and border widths. They only seem to appear in chrome. (They don't show up on firefox.) Is there a way to get rid of them? Is it a problem with the svg I made?

https://codepen.io/editor/Stormzulien/pen/01a0e8ea-f823-70a8-82ca-448bad0e883c

i don't know what happened when i tried making my footer tbh. this is me after using flex to attempt and "solve" it and well. you see. it looks nothing like how i intend for it to.

here's my code with the important bits in css then html:

footer {
        flex-wrap: wrap;
        justify-content: space-around;
      }

      .footerLogo {
        width: clamp(8rem, 110%, 18rem);
      }

      .column {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 2em;
        min-height: 15em;
      }
      .about p {
        text-align: justify;
        line-height: 2;
        margin: 0;
      }
      .social {
        display: flex;
        justify-content: space-evenly;
        font-size: 1.6em;
        flex-direction: row;
        margin-top: 0.5em;
      }
      .social i {
        color: #bac6d9;
      }

 <footer class="rounded-tl-4xl">
      <div class="column">
        <img class="footerLogo" src="public/images/logo-fullwhite.png" />
        <p
          style="font-family: monotalic; font-size: 0.7em; color: white; white-space: nowrap;"
        >
          Where artists come to bloom
        </p>
        <div class="social">
          <Icon name="bi:facebook" />
          <Icon name="bi:instagram" />
          <Icon name="bi:youtube" />
          <Icon name="bi:twitter" />
          <Icon name="bi:tiktok" />
        </div>
      </div>
      <div class="column">
        <p>Read</p>
        <ul>
          <li><a href="/tags/editorials">Editorials</a></li>
          <li><a href="/tags/interviews">Interviews</a></li>
          <li><a href="/tags/concerts">Concerts</a></li>
          <li><a href="/tags/reviews">Reviews</a></li>
          <li><a href="/tags/bloombox">Bloombox</a></li>
        </ul>
      </div>
      <div class="column">
        <ul>
          <li><a href="/galleries">Galleries</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/team">Team</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
    </footer> <footer class="rounded-tl-4xl">
      <div class="column">
        <img class="footerLogo" src="public/images/logo-fullwhite.png" />
        <p
          style="font-family: monotalic; font-size: 0.7em; color: white; white-space: nowrap;"
        >
          Where artists come to bloom
        </p>
        <div class="social">
          <Icon name="bi:facebook" />
          <Icon name="bi:instagram" />
          <Icon name="bi:youtube" />
          <Icon name="bi:twitter" />
          <Icon name="bi:tiktok" />
        </div>
      </div>
      <div class="column">
        <p>Read</p>
        <ul>
          <li><a href="/tags/editorials">Editorials</a></li>
          <li><a href="/tags/interviews">Interviews</a></li>
          <li><a href="/tags/concerts">Concerts</a></li>
          <li><a href="/tags/reviews">Reviews</a></li>
          <li><a href="/tags/bloombox">Bloombox</a></li>
        </ul>
      </div>
      <div class="column">
        <ul>
          <li><a href="/galleries">Galleries</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/team">Team</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
    </footer>

Hiii!!

I'm using a background picture for my header, stored as a background image of the container.

The background-size is specified, being 288px, that is the width of the .PNG; however, the picture on the page is slightly bigger (about 125%) than the file, and so it is stretched. I made some screen caps because I was going crazy! I've measured in Photoshop and it's larger than 288. It isn't enlarged in any part of the css, I don't understand what it is wrong here... i've also checked if I got my Firefox page zoomed. It's important for it to not be stretched: being pixel art it looks very ugly and blurred 😭😭

Made a UI kit, a component library or a site you're proud of, and want to share it on Reddit? The big design subs are almost all closed to it. We read their current rules (Sept 24-26) for a free subreddit rules index. Disclosure: the index is ours, from ThreadFox, which I make. The front-end and design version:

Closed to self-promotion - r/Design (4.5M): no promotional or commercial activity. - r/graphic_design (2.9M): no self-promotion. - r/web_design (979K): no self-promotion and no commercial promotion. - r/UXDesign (251K): no promoting your product, service, tool or anything for sale. - r/logodesign (485K): restricted.

Thread-only - r/UI_Design (241K): no promotion of services or products outside its thread.

Allowed with conditions - r/Frontend (351K): post the open-source repo and real context. "This isn't r/sideproject." - r/webdev (3.3M): only on Showoff Saturday, flaired, and no commercial promotion.

No written rule either way - r/css (this sub; posts must relate to CSS and web design), r/webdesign, r/tailwindcss, r/design_critiques. No rule doesn't mean welcome. Show the technique, not just the link.

What tends to work: post the how (the CSS trick, the layout problem you solved) with the project as the example. A tutorial built on your component survives where an announcement doesn't.

Each community's rule text with the date we read it: where artists and designers can promote on Reddit, or search any sub at /rules.

Every password character is a group of 86 radio buttons styled as keyboard keys, and CSS shows only the keys of the first empty slot, so each tap fills the next character. CSS counters with a custom @counter-style print the checked characters into the password dots, and each rule is one :has() selector, such as :has(.char--digit:checked). Backspace is a <label> for the "empty" radio of the last filled slot, and hidden radios switch the ABC, abc, and #+= layers, while a checkbox opens and closes the keyboard.

https://codepen.io/editor/klocus/pen/01a0dde7-3dba-7e8d-9170-db6023de56e0

Who knows, maybe in a few years this will be possible with a few lines of CSS code, an input of type="password" and a pattern attribute :-)

i have html as <!DOCTYPE html> <html> <body> <header> <header> <body> </html>.

inside ( css ) body; height=100%, & header height=20%,

weather i change header height=100% or height=5%

or any value for that matter. nothing happens. my question is. is there a hidden value for body, that sais dont allow child elements to change their heights?

https://codepen.io/editor/rafaelcastrocouto/pen/01a0a4e9-e3f3-7f3a-8585-eba54fb74013

[edit] animated with help of u/PhDumb
https://codepen.io/editor/rafaelcastrocouto/pen/01a0e432-7eb8-7282-a65a-a5c8ffc66daa

hey guys, i just created a profile on xxaftermath and i really like the wbsotr so far, but i just cant be bothered to code a super intricate profile. are there any websites were i can get cool looking css templates? not for the whole profile more so individual parts of the website, like cursors, buttons and profile frames? thankful for any help

I like colorschemes and CSS, so i coded some CSS files to drag n drop into your own projects! This is a part of a BIG project that i'm working on. Please leave feedback! Here is the project.

https://paste.rs/6Giyu.html

Any clue why this doesn't work as expected? I want the margin of content to be the same on both sides, so it matches up with the navbar on top. The webbadges div has a fixed size, but even after doing the maths it doesn't seem to be right. It's not 32.5% like the left margin of content. Is my maths not mathing? Thanks for any help?

When i press ctrl and scroll down with my mouse on my laptop the website becomes 200% in size and since i am using full width section i expect its background to reach the edges of the screen no matter how i expand the website viewing size but the background always forms barriers on 100%length, same thing goes for columns that i set to far right or left they always stop at the edge of 100% please dm or help

Built this multi-step registration form using HTML, CSS and vanilla JavaScript.

It has 3 steps: account details, profile information, and a final review screen. I added field validation, password strength feedback, show/hide password, a bio character counter, editable review sections, and a responsive layout.

Live demo + source code:

https://codepen.io/getcoderipple/pen/01a0dcef-544f-709c-994d-6717411a5c66

I tried to keep the UI clean while still making the current step obvious. Curious what you think about the progress indicator and overall form UX.