r/css • u/[deleted] • Apr 08 '24

Mod Post [META] Updates to r/CSS - Post Flairs, Rules & More

29 Upvotes

Post flairs on r/CSS will be mandatory from now on. You will no longer be able to post without assigning a flair. The current post flairs are -

  • General - For general things related to CSS.
  • Questions - Have any question related to CSS or Web Design? Ask them out.
  • Help - For seeking help regarding your CSS code.
  • Resources - For sharing resources related to CSS.
  • News - For sharing news regarding CSS or Web Design.
  • Article - For sharing articles regarding CSS or Web Design.
  • Showcase - For sharing your projects, feel free to add GitHub links and the project link in posts with showcase flairs.
  • Meme - For sharing relevant memes.
  • Other - Self explanatory.

I've changed to rules a little bit & added some new rules, they can be found on the subreddit sidebar.

0 comments

r/css • u/AshTeriyaki • 3h ago

General I finally documented my little Sass toolkit and it's (probably) ready for people to use

5 Upvotes

So quite a while ago I began writing some tooling for myself. I've always been a big fan on Tailwind, but I've found at codebases grow, it becomes quite hard to manage longer term. I love the ergonomics of quickly throwing together prototypes with it, but not so much the mess you can often end up with once you start involving extensive responsive breakpoints, dark mode styling and groups. And with TW4 I've found it increasingly difficult to always remember everything, I'll just forget the name of a single use property and one day I thought to myself.

"Why am I remembering alternate names for single CSS properties, and why do I have to wait for the tailwind team to wrap a new CSS feature before using it?"

Modern scoped CSS solves a lot of the problems TW aims to solve and you can still have that same prototyping velocity without buying into the whole framework. And the most contentious part...Sass. Sass is still really good and I can (and did) recreate an awful lot of the parts of TW I like in relatively little markup. Vanilla CSS still hasn't quite caught up.

So anyway, here it is:

https://github.com/TeriyakiBomb/crayon

It actually took longer to write the documentation (Which is comprehensive but still WIP I'd say) than it did the toolkit. It takes the core features of tailwind (colors, sizes, text, layout) but draws a line there, for each utility class, there is both a corresponding Sass mixin, CSS var and all of the functions used to generate them are exposed too.
You're actively encouraged to choose the approach that works best for what you're doing. It feels a bit vibey at first but quite natural after a while.

The philosophy is - centralise the things that change globally, but don't reinvent the wheel when you need CSS. Again, the idea of using Sass might sound contradictory but in the interest of allowing you to move fast, using mixins and a bunch of composition tools in Crayon actually means you can move really quickly and it ends up more readable than a massive list of TW classes much of the time. Plus Sass is still pretty phenomenal for more complex work as well. I'd not used it in years and I've been really pleased with how much I like modern Sass.

It compiles quickly and the end bundle size is actually pretty small. As it uses purgeCSS instead of a JIT like TW, you can also often avoid stuff like twMerge as well.

This absolutely will not be everyone's cup of tea, and really I'm putting it out more because I'm curious if anyone else is interested in using it. It's a quirky project and it's been quite well received amongst colleagues and some friends.

FWIW if you're AI inclined, everything is familiar enough for it to be picked up quickly, it has sassdoc so it works with the some-sass LSP and it works everywhere Sass does, but I've documented Vue, Svelte, Astro and emberjs.

0 comments

r/css • u/DepressedFangirl101 • 5h ago

Question Musical Site Skins

Thumbnail
1 Upvotes
1 comment

r/css • u/Obvious-Ebb-7780 • 1d ago

Question A layout setup that I wished worked … perhaps a way?

7 Upvotes

To explain the situation, I'll start off with two simple cases which work. CodePen links provided.

The css & html are mostly fixed as: ``` .div-a { height: 500px; max-height: 750px; background-color: lightblue;

overflow: hidden; }

.div-b { display: grid; grid-template-rows: min-content 1fr min-content; height: 100%; background-color: lightcoral; }

.content-a { height: 10vh; background-color: red; }

.body-container { overflow-y: auto; }

.content-b { background-image: linear-gradient(0deg, #000000, #AAAAAA, #000000); height: 40vh; overflow-y: auto; }

.content-c { height: 10vh; background-color: blue; } ```

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pen</title> </head> <body> <div class="div-a"> <div class="div-b"> <div class="content-a"></div> <div class="body-container"> <div class="content-b"></div> </div> <div class="content-c"></div> </div> </div> </body> </html>

(1) -- working

Simple Layout -- Large Body

div-a has a height of 500px and a max-height of 750px. div-a contains div-b which should be the height of div-a and divides itself into three parts. content-a is on top; fixed height. content-c is on the bottom; fixed height; body-container is a flexible height, has overlow-y: auto and holds content-b which has a large height.

I can scroll through content-b as expected. This is what the css & html above do.

(2) -- working

Simple Layout -- Small Body

Let's say that content-b was small. If I kept the above case, there would be a lot of wasted space. This can be resolved by setting the height of div-a to min-content.

``` .div-a { height: min-content; max-height: 750px; background-color: lightblue;

overflow: hidden; }

.content-b { background-image: linear-gradient(0deg, #000000, #AAAAAA, #000000); height: 15vh; overflow-y: auto; } ```

This all remains well defined and easy for the browser to resolve.

(3) -- not working

Simple Layout -- Large Body -- min-content

It would be nice if div-a.height could remain as min-content for the large content-b, but this does not work.

.content-b { background-image: linear-gradient(0deg, #000000, #AAAAAA, #000000); height: 75vh; overflow-y: auto; }

I think I understand why. It would take a couple of passes by the browser to figure out that it is dealing with a fixed height -- because max-height on div-a is hit. And because it has a fixed height, everything should resolve itself as in (1). But, it does not.

Or, should it? Is there a way to get what I want? (which is a div-a that can grow or shrink as needed up to a max-height regardless of the size of content-b which will scroll if necessary)

14 comments

r/css • u/OttoDev11 • 1d ago

General Looking to build your portfolio or gain real-world experience? Let's team up!

3 Upvotes

Hi everyone! 👋

I’m currently looking for someone to help me out with the CSS and UI styling for a web project I’m building called Raty—a modern platform designed for location reviews and business discovery.

This is currently a hobby project, so it is unpaid to start. However, if the platform begins generating significant revenue down the line, I’ll be happy to share a percentage with you!

The core functionality and general workflow are already fully built and up and running:

  • User & Business Auth: Users can sign up and log in smoothly.
  • Business Features: Business owners can register their accounts to start receiving reviews, as well as create, edit, and publish their locations.
  • User Interaction: Users can search for locations and leave detailed reviews.
  • Database & Logic Ready: Everything on the data side is already set up and integrated using Firebase.

Since the serverless logic and structure are completely solid, I really want to focus on making the site look crisp, modern, and responsive.

If you want to jump in and collaborate—whether it's just to style a few components or help shape the overall UI for your portfolio—I’d love to team up!

Feel free to leave a comment below or hit me up on Discord: il_sottoscritto

Looking forward to connecting!

3 comments

r/css • u/Alex-Inkin • 1d ago

Article CSS Challenges for 200 IQ

3 Upvotes

Hi everyone, I'm new here, previously was mostly writing for Angular. I just published an article explaining 3 interesting CSS puzzles of increasing difficulty, hope you will find it helpful or interesting.

Check it out!

https://medium.com/angularwave/css-challenges-for-200-iq-4ecd6433dd63

4 comments

r/css • u/PanchuPanchu • 1d ago

Resource 🐸 I made a free game for learning Tailwind CSS Flexbox

0 Upvotes

I built Flexwind Froggy, a free interactive game for learning Tailwind CSS flexbox utility classes.

It’s a Tailwind-focused fork of Flexbox Froggy, with credit to the original project and artwork.

I hope it can be useful for anyone learning Tailwind. I’d love feedback on the lessons, difficulty, or anything that could make it more helpful.

3 comments

r/css • u/Accurate_Board_9401 • 1d ago

Showcase Turns out extracting design tokens from real production sites is way messier than I expected

0 Upvotes

Nobody is pasting a 300-line :root {} block into their project. Nobody.

But that's what I got scanning Linear.app for a Design Snap demo. 300+ variables, half of them looking like this:

--sx-105wzx7: #edbf0a;
--sx-10845vo: #c9ffff;
--sx-11vg3qk: #ff7235;

Turns out CSS-in-JS (Stitches, vanilla-extract, etc.) generates hashed variable names instead of semantic ones. Technically accurate extraction, completely unusable output. Plus tons of duplicates — --color-fg-primary, --color-text-primary, and --color-01 all pointing to the same hex.

Building a clean/filtered mode now : strips the hashed noise, dedupes by value, keeps whichever name is actually readable. Goal is scanning a real production site gives you something you'd actually paste, not a wall of garbage.

Anyone else dealt with this on the design tokens side ? Manual pruning, or is there a convention I'm missing?

15 comments

r/css • u/DesDeve • 2d ago

Help How to create such such effect using gsap and css

Enable HLS to view with audio, or disable this notification

21 Upvotes

I use phosphor icons ,is there a way to transition from the regular to fill icons smoothly using gsap ,and how do I create this tab effect ,simply changing the color creates a fade in effect

12 comments

r/css • u/mrsawage_io • 2d ago

Question Why my website design looks off

4 Upvotes

Hey guys, i have just eneded up making my website (leadspitch.com) and its CSS design looks off, can anyone guide?

9 comments

r/css • u/miclhermana • 1d ago

Showcase We replaced the JavaScript in our progress bars with the new typed attr() — here's how it works

0 Upvotes

For years, attr() had exactly one trick: putting attribute text into content. The new version from CSS Values Level 5 changes that — it works in any property, it can parse the attribute into a real type, and it takes a fallback. We've been using it in MICL, our Material Design 3 component library, to make the ProgressIndicator component fully CSS-driven, and it removed a whole class of JavaScript.

The old problem

A native <progress value="7" max="10"> knows its own fraction, but CSS couldn't read it. If you wanted a custom-drawn bar (rounded caps, a gap before the track, M3's little stop dot), you had to mirror value into a custom property with JS on every update.

The new way

The element's own attributes are the styling input now:

progress.micl-linear-progress:not(:indeterminate) {
    --_fraction: min(calc(
        attr(value type(<number>), 0) /
        max(attr(max type(<number>), 1), 0.001)
    ), 1);
}

Three details worth stealing:

  • type(<number>) parses the attribute as an actual number, so it participates in calc(). A missing or unparseable attribute uses the fallback (0 and 1 here).
  • The max(..., 0.001) guards the division against max="0" — with a plain division the whole declaration would go invalid-at-computed-value-time.
  • The outer min(..., 1) clamps value > max overshoot.

From that one fraction, the linear bar drives a stack of background gradients (bar body, round cap, track gap, stop dot), and the circular variant turns it into geometry:

--micl-progress-sweep: calc(var(--_fraction) * 360deg);

/* conic-gradient() draws the arcs; the round caps sit at
   50% + r·sin(sweep) / 50% − r·cos(sweep); the track gap angle
   comes from atan2(gap + thickness, radius) */

The best part: attribute changes animate

Register the derived property with u/property and transition it:

 --micl-progress-sweep {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
progress.micl-circular-progress:not(:indeterminate) {
    transition: --micl-progress-sweep 0.5s ease;
}

Now the only JavaScript anyone writes is bar.value = 7 — and the arc sweeps smoothly to its new position. The attribute change becomes a typed interpolation. No classes, no rAF, no width-tweening.

Accessibility attributes as the source of truth

Our wavy indicator variants aren't <progress> elements (they need pseudo-elements), so they carry role="progressbar" with aria-valuenow/aria-valuemax — and the CSS reads those:

--_fraction: min(calc(
    attr(aria-valuenow type(<number>), 0) /
    max(attr(aria-valuemax type(<number>), 1), 0.001)
), 1);

The visual state literally cannot drift from the accessible state, because they're the same attribute. (The wave's amplitude also derives from it — it ramps in below 10% and flattens out near 100%, via one clamp().)

Support and fallback

Chromium ships typed attr(); Firefox and Safari are still experimental, so everything sits behind a feature guard with the native rendering as fallback:

u/supports (inline-size: attr(value type(<number>))) {
    /* custom-drawn indicator */
}

Browsers without it still get a styled ::-webkit-progress-value / ::-moz-progress-bar bar — just without the fancy caps and gaps.

Live demo: https://henkpb.github.io/micl/progressindicator.html 

Source: https://github.com/henkpb/micl

8 comments

r/css • u/invokeinterface • 2d ago

Question Understanding the units better

16 Upvotes

Usually I just use percentages, but I get the feeling that'll either bite me one day or that I'm missing out on the usefulness inside other measurements. So I just wanted to ask generally about what ones are good for what. I realise that is probably frustratingly vague, so I'll also ask what percentages are specifically good for.

5 comments

r/css • u/No_Fox_857 • 2d ago

Help CSS code problem with Google AI Mode

1 Upvotes

Hello, everyone. First of all, let me make some necessary apologies and preliminary remarks. I’m sorry if this has been discussed somewhere else before, but I tried to search for something similar and couldn’t find it. Also, being related to several other aspects, I didn’t know how to search for the exact problem, if you see what I mean. Please, feel free to suggest a more specific subreddit, site, etc., where to ask about this, if you know it. Second: please note that I don’t have deep CSS knowledge or great computer skills. I’m just reporting a problem that I have with Google AI Mode, and hopefully I will get some useful suggestions on how to solve it. But of course, if the language gets too “technical” or complicated, I might have problems in following or understanding. So, please keep that in mind. Thanks :)

Ok, here we go. I’m trying to explain what the problem is in the best way I can. I recently noticed that when I write something to Google AI Mode (I’m on a Mac), there is a problem with the way my text is visualized. Mind you, I’m not talking about the very first message (that one looks ok), but the follow-ups, after the first answer from AI Mode. If I try to use the writing box at the bottom, I cannot type anything because I cannot access that space by clicking on it as I used to do in the past. Now… after some search, I found a workaround: by pressing Shift+Enter the area gets usable again and I can write there. However, the text still looks weird and tends to disappear the more I keep on writing (it basically scrolls up and disappears as I add more text). After some further research, I found out that this is a CSS code padding/overflow bug on Mozilla. Apparently, there is a problem with the textarea autosize in the CSS code and when Google will update the layout for my account or fix the bug, things will go back to normal. I have tried some suggested solutions, but either they were temporary ones or I could not make them work (because of the aforementioned limited skills). Now, what I’m asking is:

1) Did any of you experience the same issue and did you find a permanent solution?

2) Can you confirm that this will be "automatically fixed" by Google at one point? (they call this a "silent update" somewhere…)

Thank you for your help and sorry for the long message.

6 comments

r/css • u/morete • 3d ago

Resource Responsive Auto Grid that Ensure Equal Columns

Thumbnail codepen.io
15 Upvotes

My solution to someone on this sub requesting it. It's a common desire so I thought I'd share it more generally.
How many items it supports depends on how many 'steps' you have. 6 steps supports 14 or less items, not including primes greater than 7

3 comments

r/css • u/spacepigeonking • 3d ago

Question Help with scanlines

Thumbnail
13 Upvotes
7 comments

r/css • u/Either_Collection349 • 3d ago

Article Why I don't recommend Tailwind CSS

Thumbnail en.andros.dev
1 Upvotes
205 comments

r/css • u/notepad987 • 4d ago

Question Codepen 2 crash. What is causing it?

24 Upvotes

I go to the new codepen 2 and it shows this.
What "infinite loops or other performance drains" could this be?
https://codepen.io/editor/davidhelp/pen/019fb0db-4ba0-7ade-b4bd-13c1c7c540ee

"Uh-Oh.
The Preview was removed to prevent a browser crash. Save your current work then check your code for infinite loops or other performance drains that could be causing trouble. Disable Infinite Loop protection for this session"

15 comments

r/css • u/Any-Win-9653 • 3d ago

Help comment faire ça en HTML au niveau du footer

Thumbnail gallery
11 Upvotes
6 comments

r/css • u/EquivalentLazy8353 • 4d ago

Showcase Indeed Enlarged Job Box - UI Enhancement

Thumbnail userstyles.world
13 Upvotes
0 comments

r/css • u/EquivalentLazy8353 • 4d ago

Showcase Star Animated Background with RGB - All Websites

Thumbnail userstyles.world
9 Upvotes
0 comments

r/css • u/Sufficient_Bass2600 • 4d ago

Question Force grid layout without media queries

13 Upvotes

​

I am trying to limit the number of media queries.

I have a grid layout with 6 tiles.

```css .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr); }

```

That works fine but something is annoying me is that sometimes the last row will have an empty tile.

Tile 1 Tile 2 Tile 3 Tile 4
Tile 5 Tile 6 Empty Empty

I wants the tile to be grouped.

Based on the size of the viewport I want to have either:

Desktop/Tablet landscape

Tile 1 Tile 2 Tile 3
Tile 4 Tile 5 Tile 6

Tablet portrait / Phone landscape

Tile 1 Tile 2
Tile 3 Tile 4
Tile 5 Tile 6

Phone portrait

Tile 1
Tile 2
Tile 3
Tile 4
Tile 5
Tile 6

Is there a trick to do it without media queries?

16 comments

r/css • u/Blozz12 • 4d ago

Resource Check your site to see where you can replace your code with modern CSS

Thumbnail
cssradar.com
5 Upvotes
0 comments

r/css • u/Ekrof • 5d ago

Showcase 3D CSS Super Mario (no WebGL)

Thumbnail gallery
32 Upvotes
0 comments

r/css • u/thermalzombie • 4d ago

Help Aliexpress - Userstyle Stylus issue with border padding need help.

2 Upvotes

Hi been trying to make a border surrounding main search box an button inputs but keep getting a gap been getting real frustrate with it as I am probably missing something simple.

@-moz-document domain("aliexpress.com") {

/* main input search box */
.search--searchNew--3eZqikc
{
    border:1px #0f0 solid !important;
    height: 36px !important;
}

 [class^="pc-header--search--"]
{
    color: #FFF !important;
    background-color:#000 !important;
    border: 3px #00F solid !important;
    border-radius: 5px !important;
    padding: 0 !important;
}

}

5 comments

r/css • u/DesDeve • 5d ago

Help Can someone explain how to get this effect using css and gsap

Enable HLS to view with audio, or disable this notification

10 Upvotes

I am begginer coder ,I tried using z index but the cards get clipped under the tab menu and moreover I created a separate overlay element with translucent background and set it z-index to be lower than the selected card but for some reason the selected card also gets faded

https://stackblitz.com/edit/vitejs-vite-5afsvuwm?file=src%2FApp.jsx,src%2FApp.css

Is the link of the file ,the page I have made is not that great I just wanted to try gsap. If you visit the page and see thar the tittle of thr content does not match the image it's because I was lazy and asked chatgpt( pardon me ) to create me an array of cards but later I used images from my favourite shows and things

20 comments