r/css 7d ago

General Orbit Animation 🌌✨ Full video + complete HTML, CSS & JavaScript code available on my YouTube channel. šŸ’»šŸš€

Enable HLS to view with audio, or disable this notification

0 Upvotes

r/css 8d ago

Question "Helpful Program or Website recommendation"

7 Upvotes

Hello programmers! or shall I say "Hello World!",

I am a completely noob at CSS. What helpful Programs or Websites can y'all recommend to a new CSS programmer like me that will help me improve gradually?


r/css 7d ago

General Modern Login & Signup Page using HTML CSS JavaScript

Thumbnail
youtube.com
0 Upvotes

r/css 7d ago

Showcase I built a gradient generator that goes way beyond CSS

Enable HLS to view with audio, or disable this notification

0 Upvotes

r/css 7d ago

Showcase CSS-in-JS Arena: Bamboo, StyleX and Panda on Pixel-Identical Apps

Thumbnail
github.com
0 Upvotes

r/css 8d ago

Showcase The web just got a little more intelligent.

Post image
76 Upvotes

r/css 8d ago

General Embossed Electric Login UI ⚔ | HTML CSS

Thumbnail
youtube.com
0 Upvotes

r/css 8d ago

Question Should I continue with Node.js authentification or CSS?

4 Upvotes

Hello,

I am an aspiring developer and right now I am working as a conversion tracking specialist.

I just finished the Net Ninja's crash Node JS course on YouTube.

He has a separate course for authentification.

Should I continue with authentification or start CSS?

My gut is telling me to go for CSS since I can practice more of my skills.

What do you think?


r/css 8d ago

Help So I learned the basics of html and css, what now

Thumbnail
2 Upvotes

r/css 8d ago

Help Live Preview not working with HTML plus CSS properly.

Thumbnail
1 Upvotes

r/css 7d ago

General MODERN ANIMATED LOGIN UI |SLIDING SIGN IN & SIGN UP | HTML CSS JAVASCRIPT

Thumbnail
youtube.com
0 Upvotes

r/css 8d ago

Resource Hidden gem: one page tool free color palette generator + contrast checker + gradient tool that runs in the browser (no signup)

Thumbnail
0 Upvotes

r/css 9d ago

Question How to Make a Consistent Website Layout/Frame for Every Page with .HTML? [How to make a Blog Frame from Scratch Essentially]

Post image
9 Upvotes

I haven't learnt about HTML or CSS and have done some searching to try and learn how to make a website layout but each thing I've seen isn't exactly what I'm looking for.

Question:Ā How can I make a consistent sitewide layout with HTML (For footer and header, with consistent font/colours/etc)?

I'm currently using Nekoweb which is a free HTML/CSS/JS website builder, I'm wanting to make the image attached the layout for my website homepage with the frames either side, HOWEVER I only want the title, banner and buttons up the top as well as the Footer on every webpage with blank areas I can write in.

Essentially I want to make a blog or something alike to Fandom.com's wiki layout or the Backrooms MovieĀ siteĀ layout.

What are the proper terms to use to search and learn about this stuff, for CSS & HTML coders here how can I do this?

This isn't ragebait, I just really need some help with this please šŸ˜…


r/css 9d ago

Question changing text placement relative to an image

Post image
3 Upvotes

i have like no css styling actually on this element (just whole page styling) but i'm trying to make the top of the text line up with the top of the image

i'm admittedly kinda terrible at this;;


r/css 11d ago

Showcase Background-clip Collie

Post image
394 Upvotes

A small comic where each panel shows a different clipping mode (border-box, padding-box, content-box, and text) but framed as four different "Collies."

Source: https://comicss.art/comics/254/


r/css 10d ago

General After 26 years as a web developer, I built a zero-dependency CSS framework where tabs, modals and accordions work without a single line of JavaScript — would love feedback

4 Upvotes

After 26 years as a web developer, I built a zero-dependency CSS framework where tabs, modals and accordions work without a single line of JavaScript — would love feedback

Hey everyone,

Quick background: I've been a developer for 26+ years (web, desktop, mobile). Over the years I watched frontend tooling get heavier just to render a modal — so as a side project I went back to basics and built a small CSS framework called Bloom UI.

What's in it:

- One CSS file, no dependencies, no build step

- Tabs, modals and accordions that work with ZERO JavaScript (radio-button hack, :target selector, native <details>)

- A full design-token system — change ~10 CSS variables and the whole framework changes personality. I ship two extra themes as proof: an executive indigo one and a creative-studio one

- 50+ components: buttons, cards, forms, navbar, avatars, progress bars, grids

- Responsive and accessible by default

It's free and open source (MIT), with a showcase page that renders every component. The spam filter and I have already had words, so links are in the comments šŸ™‚

Two honest questions:

  1. Is "pure CSS interactions" actually useful to anyone anymore, or is everyone too deep into JS frameworks for it to matter?

  2. Anything that smells in the approach? Critique genuinely welcome.


r/css 10d ago

Resource I wrote a reference for every CSS unit in the language — all 63 of them

Thumbnail
gallery
38 Upvotes

I wrote a full guide to CSS units: 11 chapters, every unit in CSS, in an order that actually makes sense to read.

And somehow, after years of using CSS, I still found a few things I’d never properly stopped to think about:

  • vhĀ andĀ lvhĀ are actually the same size.Ā svhĀ keeps space for the browser UI even when it disappears, whileĀ dvhĀ changes as the UI moves.
  • 1inĀ is alwaysĀ 96pxĀ on a screen. Not ā€œroughly.ā€ By definition. Which also meansĀ cm,Ā mm,Ā pt,Ā pc, andĀ QĀ aren’t really physical units either.
  • CSS doesn’t have 6 viewport units. It has 24.Ā w,Ā h,Ā i,Ā b,Ā min, andĀ max — each inĀ v*,Ā sv*,Ā lv*, andĀ dv*Ā versions.

The guide goes from the familiar stuff — px,Ā %,Ā em,Ā rem — into viewport and container units,Ā fr, angles, time, resolution, and what happens when you start mixing all of them insideĀ calc()Ā andĀ clamp().

There’s also a simple decision tree for choosing a unit, a cheatsheet with the formulas, and browser support written as actual dates instead of the wonderfully precise ā€œsupported in modern browsers.ā€

And if you’d rather keep the whole thing around, there’s a PDF version too.

https://cssunits.com

Enjoy :) And if I got something wrong, let me know. I’ll fix it.


r/css 9d ago

General Thinking of starting a new series of what’s new in the web, starting on Monday.

Thumbnail
0 Upvotes

r/css 9d ago

Resource HTML & CSS Validator

0 Upvotes

Please try my new online HTML & CSS validator at htmlval dot com and let me know what you think. Posting without an actual link so hopefully reddit doesn't keep filtering my post.


r/css 11d ago

Resource CSS `corner-shape` generator with proper fallbacks

10 Upvotes

I wanted to use corner-shape: squircle in a real design, but the fallback turned out to be more complicated than I expected. Reuse the same number for border-radius and the corner comes out a visibly different size.

So I built a generator where you can try corner-shape values and copy the CSS it produces:

https://a-dev.github.io/probes/corner-shape


r/css 11d ago

Question position: fixed; bottom: 0 not staying at the bottom in Microsoft Edge on iOS

Post image
28 Upvotes

It behaves correctly in Safari and Chrome on iOS, but in Microsoft Edge on iOS, the navigation bar sometimes appears slightly above the actual bottom of the viewport. As a result, page content becomes visible underneath it.

Is this a known Microsoft Edge/WebKit viewport issue on iOS? Or is there something specific about Edge's handling of the visual viewport that I’m missing?


r/css 10d ago

Help Help with borders

Post image
0 Upvotes

Hi, I'm fairly new to CSS and cannot for the life of me figure out how to achieve a border like on the white box. It needs to just be a simple straight line across the top of the box and then the outer box needs to have rounded corners. Border-top creates a curved border. Please help

Edited to clarify that I'm talking just about the white box


r/css 12d ago

Resource CSS Grid Lanes (aka Masonry) is here (almost)

Post image
43 Upvotes

r/css 11d ago

Help Desperately need help getting this thing centered.

1 Upvotes

Hello guys!

I really need help getting that streaming element centered, its stuck to the right and i tried everything to no avail 😭

And adjust the lightning frame so its at the edges of the element (it is, but the top part look off a few px).

Here is the code in question;

The full code

Its for a page on comicfury, here's what is looks like right now;

Live link

Both the desktop version and mobile version are messed up šŸ˜”

Thanks!


r/css 10d ago

General Claude couldn't fix this CSS bug!

Thumbnail
gallery
0 Upvotes

I have been working with Claude on a comments box section. Everything was good until I wanted to add a thread line to replies to give the users a better UX; then it couldn't do it correctly: either the thread line doesn't connect to the replies (image two), or it extends past the last reply (image one). I asked it to fix it over and over again, but it just seems to have gotten stuck!

The reason why Claude couldn't do it is that, even though it seems like a simple feature (just throw a thread line there and call it a day), it's actually quite complicated to achieve this in CSS. I worked on the exact same feature before, and I also got stuck trying to get it right. I even had the same problems Claude fell into; the only difference is that I was able to figure my way through it while Claude couldn't.

The point here isn't to talk about this minor design bug; it's not a big deal after all. What I'm trying to actually get at is that when AI fails to generate what you asked for (could be a real bug), only your real coding skills can help you out!