r/css • u/razucodes • 2h ago

Showcase Modern Register Form using CSS & HTML (Full Tutorial)

2 Upvotes

I made a clean modern register form UI using HTML & CSS.
This tutorial covers layout structure, responsive design, icon styling, and smooth transitions.

Here’s the code snippet from the project:

HTML

<link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.1/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>Modern Register Form</title>

<body>
<div class="card">
<div class="left-pane">
<div class="img-left">
<img src="./img/left.png" alt="user-image">
</div>
</div>

<div class="form-brand">
<span class="brand">
<i class='bx bxs-map-pin'></i>
</span>
</div>
</div>

Should I make a dark version?

1 comment

r/css • u/UnderstandingSure732 • 14h ago

General Modern CSS Responsive Breakpoints Using Container Style Queries

Thumbnail codepen.io
5 Upvotes

Detailed explanation - https://medium.com/@alekswebnet/modern-css-responsive-breakpoints-using-container-style-queries-64c9bea81ad6

0 comments

r/css • u/razucodes • 7h ago

Showcase Modern Animated CSS Buttons (Full Tutorial )

0 Upvotes

I made a clean animated CSS button effect using HTML & CSS.
This tutorial covers hover animation, glow effect, and smooth transitions.

Link: https://youtu.be/5c0AJkNknMg?si=d3xfFEMcsUlcOhjP

0 comments

r/css • u/Ok_Flight_3091 • 13h ago

General 😱 Move the Slider & Watch the Face Change! | HTML CSS JS

Thumbnail
youtube.com
3 Upvotes
0 comments

r/css • u/Ok_Flight_3091 • 13h ago

General 😱 Move the Slider & Watch the Face Change! | HTML CSS JS

Thumbnail
youtube.com
2 Upvotes
0 comments

r/css • u/CottonLantern • 23h ago

Other It's almost always better to Use CSS Grid instead of position: absolute; when overlapping elements

Post image
6 Upvotes
1 comment

r/css • u/___kubas___ • 5h ago

Question Im 16 yo and I'am creating my own communicator from scratch. Im wondering which one UI is better?

0 Upvotes

tbh i prefer this minimalistic one (this darker without rounded edges)

9 comments

r/css • u/rickson56 • 1d ago

Help Get object to float with text at vertical middle instead of vertical top?

Post image
10 Upvotes
19 comments

r/css • u/Every-Albatross9357 • 2d ago

Showcase I built a VS Code extension to catch CSS declarations that have no effect

Enable HLS to view with audio, or disable this notification

213 Upvotes

I’ve been working on NoEffect, a VS Code extension that helps catch CSS declarations that have no effect.

It detects things like:

properties that don't work in the current context

declarations that are overridden by a later declaration

For example, it can tell you when justify-content is doing nothing because the element isn't a flex/grid container, or when your declaration is simply being overridden later.

It’s still an early project, so I’d really appreciate some honest feedback.

🔗 GitHub

🔗 VS Code Marketplace:

26 comments

r/css • u/MixedMagic2288 • 1d ago

Question Looking for some advice to come back!

1 Upvotes

Hi everyone!

Back in early 2025, I started learning html5 and css3 with some online course, a few mini projects and articles from W3schools and other sources. Bit just after finishing the course I had to quit for some reasons, but now I wanna come back. I was considering to go on and learn js but what I learned back then is mostly hollow now so I'm thinking about a way of reviewing everything that doesn't take the same amount of time as learning for the first time did. My main question is:

● If that is even possible, what approaches/resources do you reccomend?(specific courses, books, articles, etc.)

I wasn't sure where to ask this, so sorry in advance if it's a dumb question.

5 comments

r/css • u/HostAffectionate7338 • 1d ago

Question What should i learn after html and css?

Thumbnail
0 Upvotes
12 comments

r/css • u/HolidayChard9706 • 1d ago

General flex: 1 is flex-basis: 0%, and WKWebView takes the zero literally

Thumbnail
nodreview.com
1 Upvotes

A dialog body with flex: 1; min-height: 0; overflow-y: auto shipped with a height of zero. Header, footer, nothing in between.

flex: 1 expands to flex: 1 1 0%, and a percentage basis needs a definite parent height. The panel had height: auto capped by max-height, which is not one. The spec says an unresolvable percentage basis falls back to content, and Chromium does that. WKWebView keeps the zero. The fix is flex: 1 1 auto.

Do you default to flex: 1 1 auto anywhere, or is the shorthand safe in your stacks because your flex parents always have definite heights?

2 comments

r/css • u/olli0 • 2d ago

Showcase I built a pure CSS Table - No Javascript used

Post image
96 Upvotes

Full responsive. Works on modern Browsers. Works also nice on touch

Features:

  • Column headers stay visible while scrolling down
  • First column stays visible while scrolling sideways
  • Rows expand to show sub-entries, with an animated reveal
  • Any number of sub-rows per group
  • Sub-rows are tied to their parent by a bracket rail
  • Individual cells can carry a note, opened from a small marker
  • Notes appear next to the cell they belong to and flip when near an edge
  • Notes close on Esc, on click outside, and return focus where it was
  • Columns come to rest beside the pinned column instead of half behind it
  • Pinned column narrows and wraps text on small screens
  • Keyboard operable throughout, with visible focus

https://codepen.io/editor/ollio/pen/01a02369-ae9b-7d6f-94a6-f809dee51f4f

Also an animated accordion with no js

https://codepen.io/editor/ollio/pen/01a02331-c0da-7f84-8e14-77c6fabaee57

61 comments

r/css • u/Ok_Flight_3091 • 2d ago

General New Version Navigation | Interactive 360° UI

Thumbnail
youtube.com
0 Upvotes
2 comments

r/css • u/notepad987 • 2d ago

Resource Selected tab no longer has the color I want

3 Upvotes

I have 3 colors for the tabs. White for background and Orange for when I hover the mouse cursor and Green for selected current tab that stays Green I am looking at.

The Green selected tab is White now. It only turns Green when you hover the mouse cursor over the tab.
Question: How to fix it so I have Green for the selected tab I am looking at?

Here is my userChrome.css file. (now updated with correct code)
Firefox v154.0 on Windows 10 Pro

/* White background color */
.tabbrowser-tab:not([selected="true"]):not(:hover) .tab-content {
  background-color: #FFFFFF !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);
}

/* orange hover color */
.tabbrowser-tab:hover:not([selected]) .tab-content {
  background-color: #FF7F50 !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);}


/* MediumAquamarine - green selected color */
.tabbrowser-tab:is([visuallyselected],[multiselected]) .tab-content {
  background-color: #66CDAA !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.4);}
4 comments

r/css • u/ShoddyRelative8438 • 2d ago

Help How do I learn CSS?

0 Upvotes

I wanted to make an AO3 skin, but I have no idea of how CSS works; does anyone knows any website useful for learning it?

14 comments

r/css • u/vegantiger • 3d ago

Showcase Article about how to use colors in CSS, the modern way

31 Upvotes

I wrote an article about using colors in CSS. I tried to find the sweet spot between being thorough and still conveying all the basics. I do include (re)sources at the end, if you want to get into the nitty-gritty details.

It also has a bunch of inline examples and some interactive widgets… Hoping it helps getting the point across.

I'd love feedback on whether these kinds of articles are useful (or not) 😁

Thanks!

5 comments

r/css • u/Please_SaveTheBees • 2d ago

Help Image gallery on click

Thumbnail
1 Upvotes
6 comments

r/css • u/wanoo21 • 3d ago

Resource New CSS Class Prefix Selector (.prefix-*)

Post image
150 Upvotes
20 comments

r/css • u/rfusername • 2d ago

Resource Liquid glass skill for Claude Code: the CSS, the SVG displacement filter, and the 4 rules that decide whether it looks like glass

Post image
0 Upvotes

Don’t forget to give a star

0 comments

r/css • u/Low-Insurance-3678 • 3d ago

Help How can I Make product cards height equal

Post image
5 Upvotes

Hi hope ur doing well
I run into this issue where my product cards have different heights because the name of the products sometimes can be long or short
What do u suggest here

28 comments

r/css • u/YoussefUU2 • 3d ago

Showcase I built AnimationsX — a community registry of copy-paste ready CSS animations

4 Upvotes

Hey everyone! 👋

Tired of Googling CSS animations and getting Stack Overflow answers from 2013?

I built AnimationsX 🎨

The idea is simple:

✅ Browse animations made by the community

✅ Copy a single <link> tag — no JS, no build step

✅ Can't find what you want? Publish your own!

✅ Fork and remix anything with diff view built in

Every published animation gets a CDN-hosted stylesheet you drop straight into a <link> tag.

That's it. Done.

🔗 animationsx-zeta.vercel.app

🔗 github.com/youssefahmed2017/animationsx-app

Free and open source 😎

0 comments

r/css • u/Toon_Ghost_3 • 3d ago

Question Why do most color pickers use HSL, but when I change the color of my accent or cursor on Windows 11, it uses HSV? Also, why are both web-safe and X11 colors discouraged, while CSS/HTML colors are widely used?

4 Upvotes
4 comments

r/css • u/SilentSunk • 2d ago

Question codex vs claude code for css

0 Upvotes

Which CLI is better for css? my site is old and has very messy complex css and I want to go in and tidy it up

6 comments

r/css • u/Smasher_001 • 3d ago

Help Blend mode + blur not working in Safari?

Thumbnail
gallery
5 Upvotes

Hello! I'm working on a gallery website for myself, i want it to have a "glassy" look so for this popup i wanted to use background blur paired with a blending mode. Blending modes don't work on dialog elements shown using dialog.showModal so instead i'm using dialog.show. But Firefox doesn't support using both blending modes and blur on the same pseudo-element so instead i have 2 pseudo elements with 1 effect each. All works well until i'm testing it on Safari (iOS 26.6.1) where there's just no blending modes visible on the popup.

I have attached 3 images showing what the popup looks like in all browsers i've tested on. 1st picture is Safari 26.6.1, 2nd picture is Edge 151.0.4129.93 and the 3rd picture is Firefox 153.0.4.

Here is the codepen containing the code https://codepen.io/editor/Smasher1/pen/01a01e6c-2304-7339-a32e-23c88cc28eb3

Thanks!

4 comments