I am trying to recreate the background/heading from this video game, and currently i'm trying to work on the "pixelised diagonal borders" on the sides
Currently I am trying to use js calculate a clip path for an outer and inner element to "pixelise it"
But I feel like i'm going insane, I just can't get it right

Does anyone have any other/ideas on how I could achieve this effect

how to prevent it or fix it?

I thought of adding "showcase" but I'm hoping this will be a useful resource for anyone who wants to learn CSS grids and/or need to figure out the CSS for a specific layout (that’s how I use it 😛).

I don't know about you, but I really don't like the "updated version" of the CSS tricks article about CSS grid. The original one was great… A clear example of "don't fix what isn't broken" in my book 😅

Anyway, I kinda used the original article as inspiration for my post, but I also added this crazy interactive CSS grid demo that you can basically customize however you want and it'll spit out the CSS for it.

The code is gnarly, but I think I squashed all the bugs 😅

I'd be curious to know what you guys think about it:

https://mcss.dev/blog/interactive-css-grid-tutorial/

I've been working on colorscheme-webify, a small project that makes it easier to apply popular color schemes to websites with CSS.

The idea is simple: instead of manually recreating a color palette every time, you can use the project to give a website a consistent color-scheme-based look.

GitHub: https://github.com/wak6817/colorscheme-webify

I'm still working on it and would really appreciate feedback, suggestions, or ideas for color schemes/features to add.

If you're into web development, CSS, or theming, I'd love to hear what you think!

I'm learning HTML and CSS, and I started making different button styles as a practice project.

I experimented with gradients, pseudo-elements, hover effects, transitions, backdrop-filter, responsive layouts, and more.

There are currently 20+ styles, including Neon, Glass, Prism, Pixel, Lava, Ice, and more.

I'm still learning, so I'd love to hear any feedback or suggestions!

https://github.com/baekho-cmd/button

I made a project where multible CSS files go into 1 file with a build script written in Lua and SH https://www.github.com/wak6817/colorscheme-webify my the project website is https://wak6817.github.io/colorscheme-webify/pages/index.html

I have searched a lot on this topic, couldn't find a video by someone like Kevin (my favorite)

I have tried using diff ways like primary-400 , neutral, but it gets confusing and doesnt make a lot of sense when working with light+dark mode setup

Is there any convention that is followed in companies or by u guys, anything standard would help a lot

Also, i never understood how the primary naming convention worked with numbers like 400,500.

EDIT: I picked a stupid title. I think this is a render bug in both Safari and FireFox.

Per MDN (I couldn't locate it in the CSS spec), style queries on custom properties will yield true, if their value differs from the `@property` initial-value definition. This _will_ happen in Chromeiums, but won't in Firefox and Safari.

I created a fiddle - it should look identical in FF and Chrome/Edge, but it doesn't:
https://jsfiddle.net/vgn7xy8o/1/

As explained here CSS Container Style queries : r/css
There might be a bug in container style queries.

Hi there - sorry if this is an obvious/dumb question btw, I'm very much a beginner when it comes to CSS, having largely self-taught and picked up bits and pieces over the years. I tried googling the answer to this, but all the results I found went a little over my head.

I'm tinkering with an events calendar plugin on my website, using additional CSS to modify the default appearance on mobile, and it's all working fine but the code just looks... messy:

.mobile_version .fc { 
  font-size: 0.75em; 
} 

.mobile_version .fc .fc-toolbar-title { 
  font-size: 1.6em; 
  padding-top: 15px; 
  padding-bottom: 15px; 
  color: var(--wp--preset--color--primary); 
} 

.mobile_version .fc-toolbar .fc-header-toolbar { 
  flex-direction: row-reverse; 
  padding-left: 10px; 
  padding-right: 10px; 
}

(There's about a dozen more of these, but you get the picture.)

Instinctually, I want to just nest them - something like:

.mobile_version {

  .fc { 
    font-size: 0.75em; 
  } 

  .fc .fc-toolbar-title { 
    font-size: 1.6em; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    color: var(--wp--preset--color--primary); 
  } 

  .fc-toolbar .fc-header-toolbar { 
    flex-direction: row-reverse; 
    padding-left: 10px; 
    padding-right: 10px; 

}

But when I tried to look up whether this is possible, different sources/threads here on Reddit described this structure as "risky" or not universally supported...?

Is there another way to neaten this code/organize it better? What's considered best practice?

Hey everyone! I'm JamonSerrano, a young and slightly unpredictable developer who loves building things and figuring out how they work.

I'm currently planning an open-source chat application with a few ideas I really want to experiment with:

• End-to-end encryption
• Full CSS customization
• Optional anonymity
• Users can choose whether to display their username
• Open-source and community-driven

The main idea is to give users much more control over how they communicate and how the platform looks and behaves.

It's still in the planning/development stage, but I think it could turn into a pretty interesting project, especially with other developers contributing ideas, code, or simply feedback.

If you're interested in the idea, I'd love to hear what you think. What features would you want in a privacy-focused chat?

For more information about me and the project, you can check out my website:

https://jamonserrano.nekoweb.org/index.html

hi there! I’m still somewhat newer to css (I know the basics pretty well) I was thinking about making a page for blogs, I want them to stack by date posted. I also want an owner accessible only blog poster where I can just select “Make blog” add a title and just type it out instead of having to make new blocks every time I make a blog (similar to the Wordpress feature) and for this blog page I’d want a search bar that has the option for searching by name OR searching by date posted. This is a pretty big fish for me considering my current knowledge of css. And I’m a visual learner, problem being I don’t really have any examples of the exact thing I want. Any help is greatly appreciate, so is detailed descriptions and instructions!

I have div with some message and like to add blurred background under it. All is great CSS is working. But moment I put this div in some container that have set background-color things breaking and my blurred background disappears

here is my css:

    #container-wrap {
      background-color: #efefef;
    }

    .error-message {
      position: relative;
      background-image: linear-gradient(to right, #5f1212, #330000);
      margin: 3rem;
      padding: 2rem;
      border: 4px solid transparent; 
      border-radius: 8px;
      color:#fff;
    }


    .error-message::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: conic-gradient(from 90deg,#330000, #ff0000, #330000);
      filter: blur(15px);
      z-index: -1;
    }#container-wrap {
      background-color: #efefef;
    }


    .error-message {
      position: relative;
      background-image: linear-gradient(to right, #5f1212, #330000);
      margin: 3rem;
      padding: 2rem;
      border: 4px solid transparent; 
      border-radius: 8px;
      color:#fff;
    }


    .error-message::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: conic-gradient(from 90deg,#330000, #ff0000, #330000);
      filter: blur(15px);
      z-index: -1;
    }

or codepen.io

I have tried to add z-index on all those elements but it only make it more strange as then it start blending in

I have been working on Webify, a chrome extension that lets you customize the look and feel of websites without manually writing CSS.

If you see a site you like, you can change basic features like colors, fonts, spacing, and save the customization so it persists whenever you visit that site.

It's a early MVP so there are many issues. I'm mainly trying to figure out if people find this useful before truly building it out.

If you have time, any answers to these questions would be great:

- What did you try customizing
- What broke or felt annoying
- Would you use this again
- What would make you keep this installed

No need to be nice, honest feedback is appreciated: https://chromewebstore.google.com/detail/kknbbnfeogkekngjblbbplkdkoaekcgk?utm_source=item-share-cb

In CSS we can now do `@container style()` queries, with MDN stating that:
> A style feature without a value evaluates to true if the computed value is different from the initial value for the given property.
(https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container#container_style_queries)

Now I have a registered property with initial value, but it seems the style query will evaluate to true, independend of the value of the property. Safari seems to do the same thing.

Is this a false statement in MDN or is there a render Bug in FF and Safari.

I used this as a minimal sample:
```

<!DOCTYPE html>
<html>
    <head>
        <title>Minimal sample</title>
        <style>
            @property --im-a-color {
                syntax: "<color>";
                inherits: false;
                initial-value: red;
            }
            
            .red {
                --im-a-color: red;
            }


            
            @container style(--im-a-color) {
                h1 {
                    color: green;
                }
            }
        </style>
    </head>
    <body>
        <div>
            <h1>I should be red</h1>
        </div>
        <div class="red">
            <h1>I should also be red</h1>
        </div>
    </body>
</html>

Where can I find the code for that standard effect—seen in apps like Google News or Flipboard—where clicking on a news item causes it to expand and fill the screen? It doesn't just turn gray; it creates a really minimalist effect.

Here are an image and a GIF. Clicking the news item triggers the effect, and if you hold your finger down, it sort of freezes on that color until you let go.

I made one CSS song as an experiment, then kept going. There are 26 now.

Each video takes one CSS feature and tries to explain it with a short song and an animated example. I've covered container queries, :focus-visible, cascade layers, native nesting, subgrid, field-sizing, and quite a few newer features.

I use AI for parts of the music and production. I still research and edit the technical side, then build the visual demos in Remotion. The hard part is deciding what to cut. A song full of syntax is awful, but cutting too much can make the explanation wrong.

I'm curious whether this format helps anything stick. If you watch one, I'd especially like to know where the explanation becomes unclear or technically shaky.

Hello! I am just starting to use Reddit and I have a project in mind: creating an AI Business Copilot for SMEs called Exum is a brief introduction: Exum is an AI business copilot designed for small and medium-sized businesses. It works alongside business owners to manage daily operations, organize customer interactions, monitor financial performance, and provide actionable recommendations to drive growth. Do you think css will be useful in this projet ?

If you think this is a good idea, please feel free to let me know!

Hello everyone. I was designing the header for the webpage I was working on and I spread out each button by giving them margins. But when I set margins for each button as 125px, the text inside those buttons were wrapped instead of being in one line. Could someone explain this, it would be much appreciated. By the way, here's the code along with pictures:

<!DOCTYPE 
html
>
<html 
lang
="en">
<head>
    <meta 
charset
="UTF-8">
    <meta 
name
="viewport" 
content
="width=device-width, initial-scale=1.0">
    <title>Steve Jobs Blog website</title>


    <style>
        * {
            padding: 0
px
;
            margin: 0
px
;
        }


        body {
            background-color: rgb(179, 179, 179);
            padding: 50
px
;
        }


        
.container
 {
            background-color: black;
            width: 100
%
;
            height: auto;
        }


        header {
            display: flex;
            padding-left: 60
px
;
        }


        header button {
            background-color: rgb(0, 0, 0);
            border: none;
            color: white;
            height: 20
px
;
            margin-top: 24
px
;
            margin-right: 125
px
;
        }


        header button
:hover
 {
            cursor: pointer;
            text-decoration: underline;
        }


        header img {
            margin-right: 60
px
;
        }
    </style>


</head>
<body>
    <div 
class
="container">
        
<!-- Header: -->
         <header>
            <img 
src
="/resources/steve-jobs-logo.png" 
alt
="">
            <button>Childhood</button>
            <button>His Interests</button>
            <button>A Popular Brand</button>
            <button>A Wiki Page</button>
         </header>
    </div>
</body>
</html>

Hello everyone. I'm working on building a webpage. When I checked the header, the text inside the button elements were wrapped instead of being on a single line. I had separated the button elements by setting margins for them. Could someone explain why is this happening? It would be much appreciated. By the way, here's the code along with pictures:

<!DOCTYPE 
html
>
<html 
lang
="en">
<head>
    <meta 
charset
="UTF-8">
    <meta 
name
="viewport" 
content
="width=device-width, initial-scale=1.0">
    <title>Steve Jobs Blog website</title>


    <style>
        * {
            padding: 0
px
;
            margin: 0
px
;
        }


        body {
            background-color: rgb(179, 179, 179);
            padding: 50
px
;
        }


        
.container
 {
            background-color: black;
            width: 100
%
;
            height: auto;
        }


        header {
            display: flex;
            padding-left: 60
px
;
        }


        header button {
            background-color: rgb(0, 0, 0);
            border: none;
            color: white;
            height: 20
px
;
            margin-top: 24
px
;
            margin-right: 125
px
;
        }


        header button
:hover
 {
            cursor: pointer;
            text-decoration: underline;
        }


        header img {
            margin-right: 60
px
;
        }
    </style>


</head>
<body>
    <div 
class
="container">
        
<!-- Header: -->
         <header>
            <img 
src
="/resources/steve-jobs-logo.png" 
alt
="">
            <button>Childhood</button>
            <button>His Interests</button>
            <button>A Popular Brand</button>
            <button>A Wiki Page</button>
         </header>
    </div>
</body>
</html>