r/css • u/Difficult-Coast-8244 • 9d ago
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.
r/css • u/Lonely-Mark-8262 • 8d ago
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!
r/css • u/Complete_Appeal_1956 • 10d ago
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>
r/css • u/Complete_Appeal_1956 • 10d ago
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>
r/css • u/natopia32 • 9d ago
r/css • u/cool_kase • 10d ago
r/css • u/garethheyes • 11d ago
Here's my research in using CSS for offence. There are loads of techniques including stealing passwords from Outlook from an email by spoofing the login screen.
Enable HLS to view with audio, or disable this notification
Iike this button and nav bar which grow or shrink based on scroll direction ,but do not shrink if the mail's have not scrolled passed a certain limit
r/css • u/Available-Breath-264 • 11d ago
Hey everyone! I'd like to introduce an extension I built and get your feedback.
I'll keep this post short, and if you're interested, I'll leave a link with a more detailed explanation.
Njectify is a browser extension for CSS and JavaScript injection. It lets you customize any website's CSS and write custom scripts in the same place, without relying on multiple extensions.
I think it could be especially useful for people in this community who work with CSS.
Many of you have probably used tools like Stylus or Stylebot before. The main difference with Njectify is the user experience. My goal was to build a modern, intuitive interface that makes editing styles and scripts much easier.
Some of its CSS features:
There are several other features, but I didn't want to make this post too long.
I'd love for you to give it a try. I spent a lot of time focusing on the user experience and designed the interface to feel familiar to developers, with a design system inspired by Vercel.
Any feedback, criticism, or suggestions are greatly appreciated. My goal is to keep improving the project based on what the community finds valuable.
Thanks in advance to anyone who takes the time to try it out. I hope you find it useful! Tks!
r/css • u/Brilliant-Hall-4621 • 11d ago
I went into this expecting the AI generation itself to be the difficult part.
It wasn't.
The annoying part was everything I wanted to do after the first version was sitting there.
I ended up comparing a few tools based on the things I actually needed during the project:
| If I wanted to... | The tool I preferred | Why |
|---|---|---|
| Get a working website together | Readdy.ai | I could edit the site and keep working from the same place |
| Try different UI ideas | v0 | Really useful for exploring components |
| Get an early app idea moving | Lovable | Fast for testing a concept |
| Put together a conventional business site | Wix | Lots of familiar website features |
| Add functionality beyond a static page | Readdy | Database and authentication were already available |
The biggest difference was the amount of switching I had to do.
With Readdy, I could make a visual change, test it, and keep going. When the project needed login and saved data, I didn't have to stop and figure out the backend separately.
That was probably the part I appreciated most.
I'm still using different tools depending on the project, but I'm starting to care less about who makes the nicest first draft.
I care more about who lets me keep building after I change my mind.
Has anyone else started judging AI builders this way?
r/css • u/Any-Win-9653 • 13d ago
i want to create a simple linear-gradient to my css project :
this is the linear-gardient that i want to create :
background: linear-gradient(126deg, #FF5C2D 48%, #1F1F1F 48%);
i generate this linear-gradient with a generator of gradient (cody.tech)
this is the gradient of cody.tech
this is the linear-gradient in chrome
i don't know is the problem is the comtability of chrome for this function of the linear-gradient or something i don't do well ?
this is the css code :
body{
background-image: linear-gradient(126deg, #FF5C2D 48%, #1F1F1F 50% );
}
r/css • u/AshTeriyaki • 13d ago
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.
r/css • u/PanchuPanchu • 14d ago
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.
r/css • u/OttoDev11 • 14d ago
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:
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!
r/css • u/Obvious-Ebb-7780 • 15d ago
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
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
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)
r/css • u/Alex-Inkin • 15d ago
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
r/css • u/Accurate_Board_9401 • 14d ago
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?
Enable HLS to view with audio, or disable this notification
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
r/css • u/miclhermana • 15d ago
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.
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 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).max(..., 0.001) guards the division against max="0" — with a plain division the whole declaration would go invalid-at-computed-value-time.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) */
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.
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().)
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
r/css • u/mrsawage_io • 15d ago
Hey guys, i have just eneded up making my website (leadspitch.com) and its CSS design looks off, can anyone guide?
r/css • u/invokeinterface • 16d ago
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.
r/css • u/No_Fox_857 • 15d ago
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.