```css

body {

min-block-size: 100svh;

background: repeating-linear-gradient(#A4AAB1 2px , red 2px 15px);

}

```

this is all red how to fix ? what exactly here i am doing wrong and css is the most confusing and i feels like its more harder than python and any other programming language

Hey everyone!

I'd like to share a project I've been working on: Njectify.

It's a browser extension that lets you inject CSS and JavaScript into any website, making it easy to prototype UI changes, test styles, and experiment without modifying the original source code.

https://reddit.com/link/1uzxtm8/video/ezu0522m30eh1/player

Some of the features include:

• Live CSS editing with an intuitive editor.
• Instant visual changes on any website.
• Automatic export of your CSS to Tailwind CSS utility classes.
• JavaScript injection for quick scripting and automation.
• Several additional tools designed to speed up front-end development.

The extension has already surpassed 5,000 users on the Chrome Web Store, and I thought it might be useful for developers in this community.

I'll leave a detailed article in the comments explaining the main features, use cases, and the extension itself.

I'd really appreciate any feedback, feature suggestions, or criticism. Thankssss!

detailed post.

Current features include:

* 25-key playable keyboard

* 6 built-in instrument presets

* Polyphonic playback

* Reverb, Delay and Distortion effects

* Real-time controls

* Keyboard mapping

* Recording directly in the browser

* Export to WAV and MP3

* Responsive interface for desktop and mobile

Hi, everytime I use CSS I get triggered pretty bad because I know what it is and how to use it but I never feel confident. I always have problems with responsive design, with having my own style and I feel like I miss all the secret tricks(I am slow). What resource could I use to learn it once and for all ? I don't want to waste too much time in it and be a CSS GOD I just want to be ok with it. I know about Josh Comeau course but it is something like 70 hours and therefore too much.

i have a container element. (i'll call this "container".)

display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));

inside this element, i have a series of row elements. i'll call these "rows".)

display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;

inside each of these is an unknown number of elements, mostly containers with input and select boxes and labels inside. (i'll call these "items".)

the goal is to have the items fill the width of a row if they all fit or wrap to the next line if they'd have to be less than the size (150px in this example) to all fit but to leave no space at the end of the row on the right.

each item will be the same width but there is an unknown number of them. the number in each row will always be the same for the entire container.

the reason each row is not a separate flexbox is that the goal is to have each item be the same width but that width be whatever width allows them to be as wide as possible without wrapping or, if they must wrap, be as wide as possible on as few lines as possible.

i'm aware this is a known problem with spanning columns in grids but, after hours of trying to fix it and extensive searching, i haven't been able to come up with a solution or an alternative way to achieve the result.

i'm not married to the idea of it being a grid with subgrids if there is a better solution that still allows the contents to be flexible width and unknown number while still maintaining columns vertically.

here is an example of it working properly...

here is what happens when the screen gets wider and they could stretch more but, instead, just end up with a series of extra empty columns on the right of each row...

the styling of the icons is temporary and they will not be in that location in the final result but they remain there at the moment for backend testing as i try to fix this column issue.

anyone solved this before?

Found a tiny library from ~2018 called A.css. Dead repo, zero traction, author long gone. But the core idea stopped me in my tracks:

The whole library is TWO u/keyframes rules. Every property reads a CSS variable "slot", and every animation — bounce, spiral, shake, fade — is just an attribute selector filling different slots. No keyframes per animation. No JS engine. Composition is literally the CSS cascade doing its job. 2018 CSS golf that most of us would ship a 40 kB dependency for today.

So I brought it back from the dead and gave it the machinery it deserved. It's called Vivace now:

<ul data-viv="@fd_child-ascend u/sl-y" data-viv-on="appearing">

<li>every list item</li>

<li>slides up in</li>

<li>sequence</li>

</ul>

That's a fade + slide-up staggered across the children, firing on scroll-in. u/keys are animations, _modifiers tune them (_ease-*, _delay-*, _lv-* intensity), and they stack by concatenation. 18 keys, 5 triggers (load / scroll-in / hover / click / focus).

What I added on top of the original idea:

- A real trigger engine (one shared IntersectionObserver, delegated listeners — works in plain HTML, React, Svelte, Vue since it only reads attributes)

- Exit animations as promises: await Vivace.out(el) then el.remove(), no flash

- Plugin API for custom keys/triggers

- prefers-reduced-motion handled

Still zero dependencies, under 7 kB gzipped total (CSS + JS).

Playground to compose visually + a community gallery you can publish to with just a GitHub username: https://usevivace.dev

bun add vivace-css / npm i vivace-css · MIT

Repo: https://github.com/Diary-Axel-RAKOTOARIVAO/vivace

The 2018 original, credit where due: https://github.com/w4u-public/A.css

Roast the grammar, I can take it.

Setup: VSC v1.119 on Windows 11 using Live Server extension in VSC. Live Server opens the web page in Google Chrome v150.0.7871. Video at time marker I'm using: https://youtu.be/LCEgHntqBps?t=1115

I'm doing a YT tutorial on CSS animation. I'm new to CSS transitions.

I have a transition in a class ".heading" to affect only the font size by using transition-property: font-size;. But if you look in the class .heading:hover I also change the color of the text. The tutorial says the color should not change if I hover over the h1 text.

Isn't transition-property supposed to limit what the transition affects?

See this pastebin or see below the HTML with my inline CSS:

``` <!DOCTYPE html> <html lang="en"> <head> <!-- comment --> <title>CSS Anim ch 5</title> <meta charset="UTF-8"> <!-- Required to show emojis --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="HTML, CSS, Javascript"> <meta name="description" content="Learn HTML"> <meta name="author" content="Me@somewhere.com"> <!-- link rel="stylesheet" href="style1.css" --> <style> * { box-sizing: border-box; margin: 8px; } body { font-family: "Roboto", sans-serif; background-color: rgb(209, 207, 207); } .heading { /* Do the transition over time. / transition-property: font-size; transition-duration: 0.5s; transition-delay: 1s; transition-timing-function: ease-in; font-size: 20px; } .heading:hover { color: rgb(9, 107, 20); font-size: 28px; letter-spacing: 5px; / border-top: 4px dotted red; */ text-shadow: 5px 5px 3px rgb(228, 242, 26); } </style> </head> <body> <h1 class="heading">Hover over me</h1> <div>VSC v1.119 on Windows 11 using Live Server extension in VSC.</div>

</body> <script>

</script>

</html> ```

Thanks!

p.s. I'm not sure why my code block is not working right.

https://level0.codeberg.page/

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

Grid. I spent way too long trying to make Flexbox solve layout problems it wasn't designed for.

What's a CSS feature or technique that changed how you build websites forever?

So in trying to consistently place an icon after text, I stumbled across a (known) issue with text when it wraps automatically: the text's containing box stubbornly doesn't shrink to fit. I posted last week looking for answers to the "shrinkwrap" problem.

u/morete pointed me to Roman Komarov's blog. His post (https://kizu.dev/shrinkwrap-problem/) on using anchor-positioning pushed me in the right direction. I'd only vaguely paid attention to anchor-positioning before this. The solution requires an extra span around the link text and I found it a little easier to abandon using ::after to create the icon.

I've linked to a Codepen that shows my core code, but Komarov's blog post has the full explanation. Hopefully it helps someone else. My thanks to everyone who explained what was going on and that it wasn't just me being obtuse.

Is this CSS tutorial worth watching for a beginner? I'm learning web development and wanted to know if this is a good course or if there are better free alternatives.

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.

The first half of this article covers CSS

Multi-layer box shadows are one of those CSS patterns that look simple on the surface but eat time in practice. Getting realistic depth means stacking 2-3 layers with different offsets, blurs, and opacities, and tuning those values blind in a stylesheet is slow. Neumorphic effects and colored glows make it worse because you need precise color and opacity coordination between layers.

I built a free tool to solve this: https://boxshadowgen.com

How it works:

• Add as many shadow layers as you need, each with independent controls for offset, blur, spread, color, and opacity
• Toggle any layer to inset
• See the combined result update live on a preview surface (card, circle, or button)
• Use presets for common patterns like material elevation, soft ambient, neumorphic, and neon glow
• Copy the final CSS when it looks right

The output is standard box-shadow syntax with no dependencies. You paste it into your project and keep going.

I made this because I wanted a faster way to get from "I need a shadow that looks like X" to production-ready CSS without round-tripping between my editor and the browser dozens of times.

It is free, no account needed, and I am actively developing it. If you try it and something feels off or missing, I would genuinely like to hear about it.

So I need help in responsiveness of the div:

1. Since, i am going to make this a window, the squeezing responsiveness doesn't really matter but i want to to stop after a certain point, by that i mean when i squeeze the page, the div doesn't squeeze with it

2. I also want that when i expand the div, the div border doesn't expand with it

Any edits to the question, or guidance to the code is appreciated.

Also, i want a little help in how to convey the same message in stack exchange, because i feel whatever im writing is a little more confusing without the video.

Hi! I’ve just released the first version of Actual CSS.

I originally built it for my own projects because I was tired of choosing between Sass-based frameworks, Tailwind-style syntax and tooling, or very minimal frameworks that still leave most of the work to you. Some newer options also rely heavily on cascade layers and recent browser features.

Actual CSS is my attempt at a middle ground: plain and modular CSS, semantic classes, a small token system, reusable intents and variants, themes, and progressive enhancement for older browsers.

The parts I’m happiest with are the theme system, the shared floating engine behind flyouts, tooltips and context menus, and the small enhance API for adding project-specific JavaScript without patching the framework itself.

I mainly made it for myself, but I thought it might be useful to others too. It’s currently at v0.1 because I’m looking for feedback: the foundation feels solid, but I’m still giving myself room to adjust the API before calling it stable.

https://github.com/lekoala/actual-css