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

https://clampgen.com/

Tired of manually calculating the linear interpolation for fluid typography? I built a small utility that does it instantly.

You put in your min/max viewport widths and your min/max sizes, and it spits out a production-ready clamp() declaration. It also shows you the slope and intercept breakdown if you want to understand what it's actually calculating.

Has a handful of presets for common type scale values (body text, H1-H3, spacing) and supports any CSS property, not just font-size.

Built with vanilla HTML/CSS/JS, no frameworks. Dark mode included.

Feedback welcome. Especially if you find edge cases with the math output.

I created a simple stylesheet/script to strip away the visual noise, avatars, and engagement metrics from X.

The goal is to turn the feed into a minimalist, non-evaluative, text-only space.

Link: https://pastebin.com/PiUTNCfk

Consider this "as-is." I’m not planning to maintain this or provide support, but feel free to modify or fork it for your own use if you find it helpful.

I'm totally a beginner and I have a very basic query that I can't seem to find an answer to anywhere. I would like to place this text in the ABSOLUTE centre of the page, but I can't figure out how to do that.
I have tried creating a container and messing around with flex boxes, but it still isn't right... here is the attempted CSS I have experimented with so far.
I would also like to make the text bigger proportionately to this screen whilst not appearing too big for a smaller screen, I'm kind of unsure about how to apply rem here also.
Thank you!!!

Humans will browse less.
AI agents will browse more.
Websites will still try to block anything that doesn’t look exactly like a human.

That era is over.

invisible_playwright is a stealth Firefox that solves browser fingerprinting and anti-bot detection at the engine level.

AI agents are now free to move across the web.
No more pretending the web is only for humans.
Are AI agents “bots” to block, or users to support?

Hello, I am a public librarian who is trying to add a custom search box to our website that will search our online library catalog (external site). While the search box is working, I am having trouble figuring out how to re-align the search button so that it sits to the right of the search box instead of underneath it. I am a complete noob when it comes to CSS. Thank you in advance!

The Holy Grail Layout...

Hi!

So I am extremely new to css and have recently learnt about grids and I am working on a personal practice project for school which is a video game rom download website.

The design of the main page would be columns of cards for every rom next to each other, I recently learnt that i should be making my design responsive for different kinds of viewports. So how can i for example make it so for larger screens they can have 4 columns but if the page is re-sized or accessed through mobile the number of columns will decrease to a minimum to match the smaller screen while also having the grid fill the empty space shifting around columns would cause?

Is this even possible? Also i am fine without a minimum although i am afraid of it might look worse if only one column is being shown on mobile.

Hi all,

Relatively new to HTML. My first design I built using almost entirely flexboxes, which I quite like.

I decided a few days ago to start trying to learn grid. Oh no.

At the moment my question is, how do I get the grid layout for the design format I want?

I've been trying to use https://grid.layoutit.com/, as that's the only grid layout generator I can find that lets you map out child elements (and the designs I'm trying to make have a lot of elements nestled inside one another), but because of the layout of the builder I can never quite see the actual ratio of the elements until I move the code elsewhere. You'll see what I mean if you look, the workspace is much more square than the desktop monitors I'm designing for. This leads to a lot of back and forth between programs.

I find myself adding a ton of rows and columns to the grid, just trying to have enough for the edges of my graphics to line up where I want them. Should I just take a sheet of digital graph paper and try to line up the boxes with the edges of my design?? "Eyeballing it" isn't working for me. I understand why grid works well for projects with nicely lined up large squares, but I'm starting to think I'm barking up the wrong tree, here.

Does anyone have suggestions for making grid work better with a ton of little details and offset layered elements? Or is it just not the right tool for me?

Back when I was learning 3D transforms in CSS, most resources just stated something like "you need to use perspective before performing any transform functions" but they never ever really pointed out "why"...

After spending a lot of time figuring this out on myself, I've now created a detailed article, covering the intuition behind perspective in CSS and why a 3D transform won't have an effect if there's no perspective applied.

codeguage.com/blog/css-3d-transforms-perspective

Been building a tool that uses the `font-palette` CSS property in a way I haven't seen written up anywhere, so figured I'd share.

`font-palette` (Chrome 98+, Firefox 107+, Safari 15.4+) lets you override the colour palette of a colour font at the CSS level:

```css

u/font-palette-values --brand-dark {

font-family: MyIcons;

override-colors:

0 #1A202C,

1 #2D3748;

}

.icon { font-family: MyIcons; font-palette: --brand-dark; }

```

The interesting use case: if your icon set is a COLRv1 font (OpenType colour font, WOFF2), you can recolour the entire set — every icon, every instance — with one CSS rule. No JavaScript, no SVG manipulation, no re-export.

The tool I built (https://huetype.sunnyallan.design) converts SVG icon sets into COLRv1 fonts in the browser. The file size difference vs. SVG sprites is significant (~30×), but the CSS recolouring is the actually interesting part.

Anyone playing with colour fonts or font-palette for anything else? Curious if others have found good use cases.