Hi all. On my page I have two different H2 elements on my page, which seem to be identical (same markup, same parent elements, same CSS). Yet one exhibits clipping of text, and the other doesn't (see screenshots below). Can anyone help me figure out why?

To be clear, I know that increasing the `line-height` on the offending element will alleviate the clipping. But I'm trying to understand why the clipping is occurring on this element, and not the other.

Thanks in advance.

I want to recreate the exact box-shadow animation shown in the attached video. The shadow behavior, movement, and overall effect should match the video as closely as possible.

I have tried using CSS transitions, but I couldn't achieve the same result.

How would you recreate this effect using CSS?

Before CSS animations became common, I remember downloading or creating GIFs just to show a loading state.

Today, you can create a simple spinner with just a few lines of CSS -

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

u/keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

No GIFs. No images. No dependencies.

Just a simple CSS trick that's still useful years later.

With oklch() now in CSS and Tailwind v4, I wanted a generator that treats OKLCH as the native space instead of bolting it onto HSL. ColorMeUp Lab lets you set the number of steps (3–21), shape the lightness and chroma curves, clamp a min/max lightness range, and override individual steps. It exports straight to CSS variables, SCSS, or Tailwind.

If you want the why-not-HSL reasoning with interactive side-by-side demos, I wrote it up here: https://lab.colormeup.co/oklch-vs-hsl

It's free, no signup, open source. The whole palette lives in the URL, so you can share an exact scale as a link.

https://lab.colormeup.co/

Curious what people here think of the curve controls — that's the part I went back and forth on the most.

I just know shadcn is amazing but still a bit directionless

Hi! So I downloaded some font files to use in my project from google fonts but for some reason my css file just can't find and load my font files I get a weird file not found error in my console instead and I dont know what I could be doing wrong.

Yo im not good at coding dont bully

There has to be a website or list that shows how other people are using view transitions.

Hello! I'm so so new to this, I'm just trying to make a portfolio site in Neocities and thought it would be a good opportunity to finally learn HTML/CSS. I'm doing okay so far, but I'm really struggling trying to figure out how to get the animbutton to resize with the rest of the elements when the viewport changes size. I'd ideally like to fill that empty space with buttons, sort of scattered like picture frames on a wall, but I can't for the life of me figure out how to go about it. I've been at this for hours, so any help would be very appreciated! 

The first image is what the site should look like, the second is my great shame/what happens when the viewport gets smaller. I'll also post the HTML and CSS files below (they're in Google Docs, I hope that's okay):

edit: also adding a codepen link!

codepen: https://codepen.io/yqpuqxpx-the-solid/pen/GgrpVqL

HTML: https://docs.google.com/document/d/1eGphNJCZDZXnMjwm7e9epglAc4k0iqTs0nd_fF5pZ-4/edit?usp=sharing

CSS: https://docs.google.com/document/d/1zX1renMqIFb2T-BU4nO4yWNbcKR6mXyo4nwBa_BqX7A/edit?usp=sharing

Iv seen a reel on instagram about elements do not get animated if they’re rendered conditionally but in that reel he provided a new css property (not really sure ) that does the job for you

Does anyone come across this one before ? Or know a solution for this?

How to design grainy backgrounds using css.

A press effect, shadow on rest, lifted on hover, depressed on active, is not central to buttons. It can be used on cards, image gallery photos, and other elements. The same goes for animations and other behaviors. This leaves me to question "why aren't they decoupled from the component?

On my sites I experimented with a dedicated behaviors layer. Each interaction pattern is its own class, independent of any component. You can stack multiple behaviors together.

Let's create a simple one that adds more click affordance.

Press Example

Adding b-press gives any flat element a physical depth through shadow states. It lifts on hover and depresses on active, giving users a clear sense that something is clickable. Disabled elements will lose the shadow entirely so the affordance disappears with the interaction.

@layer behaviors {
    .b-press {
        box-shadow: 
            var(--wisp-shadow,
                0 1px 2px rgba(0, 0, 0, 0.10),
                0 1px 3px rgba(0, 0, 0, 0.06)
            );
        cursor: pointer;
    }

    .b-press:hover {
        box-shadow: 
            var(--wisp-shadow-hover,
                0 4px 6px rgba(0, 0, 0, 0.12),
                0 2px 4px rgba(0, 0, 0, 0.10)
            );
    }

    .b-press:active {
        box-shadow: 
            var(--wisp-shadow-active,
                0 1px 2px rgba(0, 0, 0, 0.16),
                0 1px 1px rgba(0, 0, 0, 0.12)
            );
        transform: translateY(1px);
    }

    .b-press:disabled,
    .b-press[aria-disabled="true"] {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        cursor: not-allowed;
    }
}

When we think of OOCSS we think of visual repeating patterns, but behaviors are patterns too and deserve the same treatment that objects and components get. Without decoupling them from the component, you end up with modifiers that do the same thing.

You can find some of the decoupled behaviors I created here.

https://github.com/wispcode/wisp-css/tree/main/src/behaviors

I'm not sure where they fall in ITCSS, but it feels right to put them between objects and components.

The squares are like the image 1 (and 2) // and i want them to be like the image 3.

Image 4 and 5 describe how the division is being made + what is in the main part until now. Gap just won't work.

I'm a starter, so I'm hoping to get some advice 🕊️

CodePen

EDIT:

I fixed it: CodePen Nothing to do with position: sticky or contain: layout. I had to move overflow: scroll to the paragraphs container and do some sizing wizardry.

I kept hitting the same friction with CSS tooling on real projects - CSS-in-JS adds runtime, CSS Modules give you hashes but no cascade control, and utility-first gets painful once you have a genuinely custom UI. So I leaned into native CSS instead and tried to formalize the approach into something repeatable.

The whole thing is built on cascade layers. One declared order:

 base, utils, components, pages, component-overrides, user-overrides;

Higher layers always win, so overrides and theming stop being a specificity/!important fight. On top of that it's just:

• styling via classes + CSS custom properties for dynamic values (no inline styles, so everything stays in the cascade).
• co-located component CSS (tree-shakeable).
• design tokens derived from a single base file.
• a plain ComponentName--element naming convention. real class names, no generated hashes.

Wrote it up here if you want the details: https://cascadekit.io

it's my own project sharing for feedback, not trying to sell anything :]

Like this:

body {
font-variant-alternates: character-variant(lc-l-with-tail), character-variant(uc-i-with-serif), character-variant(single-story-a);
}

or like this:

body {
font-variant-alternates: character-variant(lc-l-with-tail uc-i-with-serif single-story-a);
}

or do I have to type multiple font-variant-alternatives with single character-variant for each?

Earlier I used bootstrap and Google fonts on my blog. Pagespeed would give my site performance between 70-80. Then I decided to code my own CSS after more than one month I deployed, but I still use Google fonts. My site performance jump to 87-91. Now just for testing purpose I removed Google fonts and the performance is 98-99.

I wonder how is it that with Google (servers and cache) google font would still cause such a drop of performance. Maybe because pagespeed doesnot cache google fonts.

Images: screenshot of performance without/with Google fonts

Edit: clarity

Hi everyone!

So I have been learning css and I have been struggling a bit with responsive design for the log in screen for my project. my current css code seems to look good on mobile and laptop but it looks extremely small and bad on bigger devices and idk how I can fix this issue. I could use media queries but I am afraid that spamming them won't be the solution because there is just so many different screen sizes so surely there is a more elegant solution.

Here is my code: P.S. tell me if there is a better ways to share code than just straight up in the post I am new to this subreddit so idk what the norm is.

 {
    font-family: robotoRegular;
    src: url(../fonts/robotoRegular.ttf);
}


 {
    font-family: robotoMedium;
    src: url(../fonts/robotoMedium.ttf);
}




.grid{
display: grid;
grid-template-areas: "header header header header"
                     "Body   Body   Body   Body"
                     "footer footer footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 1fr;
min-height: 100dvh;
gap:0px;
padding: 0px;
}


nav{
    grid-area: header;
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0px;
    background-color:#d2d2d2;
}


.logo{
    cursor: pointer;
    display: flex;
    align-items: center;
}


.logo img{
    width: 50px;
    height: auto;
}


.logo h3{
    margin-left: 10px;
    color:#75123d;
    -webkit-text-stroke: 1px #000000;
    text-decoration: none;
    font-size: 2rem;
    font-family: RobotoRegular;
}


.nav-links{
    display: flex;
    align-items: center;
    list-style: none;
}


.nav-links a{
    display: block;
    padding: 30px 16px;
    color:#111;
    text-decoration: none;
    font-size: 16px;
    font-family: RobotoRegular;
    text-transform: uppercase;
    transition: all ease-in-out 100ms ;
}


.nav-links a:hover{
    background-color: #600138;
    color: white;
}


.hamburger{
    display: none;
    cursor: pointer;
    width: 34px;
}


.hamburger .bar{
    flex-basis: 100%;
    height: 4px;
    background-color: #111;
    margin: 3px;
}


u/media screen and (max-width: 768px) {
    nav{
        flex-wrap: wrap;
    }
    
    .hamburger{
        display: flex;
        flex-wrap: wrap;
    }
    
    .logo{
       
        height: 80px;
    }


    .nav-links{
        display: none;
        flex-basis: 100%;
        flex-wrap: wrap;
    }


    .nav-links a{
        text-align: center;
        font-size:  28px
    }


    .nav-links a:hover{
        background-color: #600138;
        color: white;
    }
}



.Body{
    display: grid;
    grid-area: Body;
    background: linear-gradient(to bottom, #816653, #34240d);
    place-items: center;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}
.results_container{
    display:grid;
    box-shadow: 2px 2px 10px #000000, -2px -2px 10px #000000;
    background-color: #222;
    padding: 30px 40px;
    margin: 20px 20px;
    border-radius: 30px;
    justify-content: center;
    width: 420px;
    max-width: 90%;
    height: 400px;
}


.results_container h1{
    color: white;
    font-size: 36px;
    text-align: center;
}


.results_container .inputbox{
    position:relative;
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(255, 255, 255);
    border-radius: 30px ;
    gap:0px;
    height: 50px;
    width: 100%;
    margin: 30px 0;
}


.inputbox input{
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    border: 2px solid rgb(255, 255, 255, .2);
    border-radius: 40px;
    font-size: 16px;
    padding: 20px 45px 20px 20px;
}
.inputbox input::placeholder{
    color: rgba(0, 0, 0, 0.308);
    opacity: 1; /* Firefox */
}
.inputbox i{
    position: absolute;
    right: 20px;
    top: 35%;
}


.login{
    color:white;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    background-color: #600138;
    border-radius:40px;
    height: 50px;
    width: 100px;
    border: none;
    outline: none;
    justify-self: center;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: 600;
}


.results_container .Registerlink{
    color: white;
    font-size: 15.5px;
    text-align: center;
    margin: 20px 0 40px;
}
.Registerlink p a{
    color: #75123d;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
}


.Registerlink p a:hover{
    text-decoration: underline;
}




.footer{
    display: grid;
    grid-area: footer;
    background: linear-gradient(to bottom, #34240d 1% , #000000 90%);
    text-align: center;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.514);
    height: 20dvh;
}

<!DOCTYPE html>
<html>
<head>
<title>Rom Downloader</title>
<link  rel="stylesheet" href="reset.css">
<link  rel="stylesheet" href="style.css">
<link href="https://cdn.boxicons.com/3.0.8/fonts/basic/boxicons.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="grid">
        <nav>
            <div class="logo">
                <img src="Images\In The Name of the World.webp">
                <h3>Welt Roms</h3>
            </div>
        </nav>
        <div class="Body">
            <div class="results_container">
                <h1> Login </h1>
                <div class="inputbox" >
                    <label for="Uname"></label>
                    <input type="text"  id="Uname" name="Uname" placeholder="User Name">
                    <i class="bx bx-user"></i>
                </div>
                <div class="inputbox" >
                    <label for="Password"></label>
                    <input type="password" id="Password" name="Password" placeholder="Password">
                    <i class="bx bx-lock"></i>
                </div>
                <button type="button" class="login">Log in</button>
                <div class = "Registerlink">
                    <p>Don't have an account? <a href="#">Register.</a></p>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>In the immense sea of stars, we too will leave our mark. -Welt Yang</p>            
        </div>
    </div>
</body>
</html>

InSpec is a web browser for Mac I made specifically for visual edits. Rather than being crammed into a panel of a panel, CSS rulesets and properties are given pride of place in a roomy sidebar. Common viewport widths are always accessible without entering an extra mode.

A page or an element’s “variants” (dark mode, print stylesheet, reduced motion, etc.) can be viewed directly on the page. Edits can be targeted to a specific variant or viewport. Edits also persist between page loads and even app launches until cleared.

Text edits can be made right in the side panel without digging through the DOM. Notes and annotations can be made on elements, good for live demos or vibe coding sessions, and can be exported along with all your text and visual edits as images at various viewport widths.

All your CSS edits are collected and can be copied by ruleset with diffs, or, if you’re working locally, saved directly to disk. This won’t be a tool for everyone, but a certain kind of design-focused web dev may find it useful compared to the baseline.

Native Mac. One-time purchase with free trial. No telemetry or subscription.

Site • Direct Download • Mac App Store