r/css • • Aug 22 '26

Mod Post AI has been used by a lot of our user to assist with their projects or language barriers, some have created app/products entirely with AI: what is your preference for post on this subreddit regarding AI content?

53 Upvotes

This post contains content not supported on old Reddit. Click here to view the full post


r/css • • 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.


r/css • • 6h ago

Help css linear scroll not working?

0 Upvotes

hi! i've been trying to implement a linear scroll in my top bar, but its not animating. https://yuri-uran.nekoweb.org anyone know if i've missed something simple?


r/css • • 3h ago

Question The ask for employers. Are you check knowledge in CSS field or skip this?

0 Upvotes

To image a scenario where you check a guy who write on python and JS, so you will to check his knowledge only in JS and python or CSS, html yet? It’s important for me because I skipped moment of learn CSS and just use Codex for write visual part of my projects.


r/css • • 16h ago

Help Trouble to fit properly the image with the media query for desktop

Post image
0 Upvotes

Hi, I don't know why is this happening but when I try to scale my site to a desktop view, the image doesn't fit the height and width I desire, keeping its original proportions. With my recent code there is just a gap under the image that I don't know how to fill.

Here is my demo: https://siddlopez.github.io/product-preview-card-component/

And my repo: https://github.com/SiddLopez/product-preview-card-component


r/css • • 17h ago

Código HTML/CSS Loja Integrada

Thumbnail
0 Upvotes

r/css • • 2d ago

Resource CSS does your tooltip positioning now

Thumbnail
allthingssmitty.com
43 Upvotes

r/css • • 1d ago

How to target ALL the #urlbar .urlbar-input text colour

Thumbnail
1 Upvotes

r/css • • 2d ago

advance Complete beginner: is HTML → CSS → JavaScript a good path? What should I learn first?

24 Upvotes

Hi everyone,

(I know that HTML and CSS are markup and styling languages, not programming languages.)

I’m a complete beginner with zero coding experience, and I want to start learning programming. I was advised to follow this path:

HTML → CSS → JavaScript

I have a few questions:

  1. What do you think of this path as a way into programming and coding?
  2. Is there anything I should learn before starting it? I feel like I might be missing something important.
  3. Would you recommend any changes to this path? (For example, starting with a different language.)
  4. What are the best resources to learn HTML and CSS? Please recommend one for each, if possible.

Thanks in advance, I really appreciate your help!


r/css • • 2d ago

Question Error in code - I don't know how to fix it.

0 Upvotes

The card was centered and there was no shadow top to bottom, only on the side and bottom of the card. Then I did something and I screwed it up. What did I do wrong and how do I fix it?

https://codepen.io/editor/username81/pen/01a12357-d8a8-76b0-a6ff-05e1d6c355e2


r/css • • 2d ago

how to code sidebar?

Thumbnail
1 Upvotes

r/css • • 2d ago

Help background-attachment: fixed, background-size: cover

2 Upvotes

Hey so I have a background image that I want as a sort of watermark that text scrolls over, so this is the

`background-attachment: fixed` part. I want the image to completely cover the background, so that's the `background-size: cover` part.

The problem is that on some mobile browsers, the bookmark / tabs etc menu disappears on scroll, which means the viewport size changes, which means there a sudden flash of the background image changing size in response to a slightly larger viewport.

It's not a life changing issue obviously, lol, but sudden flashes of reformatted content are distracting and unprofessional.

Any tips greatly appreciated.


r/css • • 3d ago

comiCSS #262: The future is now...

Post image
28 Upvotes

This comic was coded in HTML+CSS (using a web components library I created).

The source code can be found at: https://comicss.art/comics/262/the-present.html


r/css • • 3d ago

Help with CustomCSSforFx?

Thumbnail
0 Upvotes

r/css • • 3d ago

Help with CustomCSSforFx?

Thumbnail
0 Upvotes

r/css • • 3d ago

Help Newbie Question Regarding Linear Gradients!

2 Upvotes

Hi! Really simple question, but I'm having a hard time making a sharp gradient like the one I want in the image I provided! Any tips? If this question has been answered I'd love if you could link the post! :D


r/css • • 4d ago

Help how do i make these look more skeumorphic

Post image
6 Upvotes

in the process of making a website and i'm trying to emulate a bit of skeuomorphic look but this isn't really. giving that. here's my css for reference minus the box shadow i have on

/* Pastel gradients */
.gradient-card--0 {
  background: linear-gradient(180deg, #8f58a3 0%, #cfb9db 55%, #cfb9db 100%);
}
.gradient-card--1 {
  background: linear-gradient(180deg, #4a9fd8 0%, #bccdd9 50%, #bccdd9 100%);
}
.gradient-card--2 {
  background: linear-gradient(180deg, #d0dcc0 0%, #cdd9bd 40%, #a4c04a 100%);
}
.gradient-card--3 {
  background: linear-gradient(180deg, #e8b04c 0%, #e6d9b5 55%, #e6d9b5 100%);
}
.gradient-card--4 {
  background: linear-gradient(180deg, #f15bb5 0%, #e8c4d8 55%, #e8c4d8 100%);
} /* Pastel gradients */
.gradient-card--0 {
  background: linear-gradient(180deg, #8f58a3 0%, #cfb9db 55%, #cfb9db 100%);
}
.gradient-card--1 {
  background: linear-gradient(180deg, #4a9fd8 0%, #bccdd9 50%, #bccdd9 100%);
}
.gradient-card--2 {
  background: linear-gradient(180deg, #d0dcc0 0%, #cdd9bd 40%, #a4c04a 100%);
}
.gradient-card--3 {
  background: linear-gradient(180deg, #e8b04c 0%, #e6d9b5 55%, #e6d9b5 100%);
}
.gradient-card--4 {
  background: linear-gradient(180deg, #f15bb5 0%, #e8c4d8 55%, #e8c4d8 100%);
}

r/css • • 5d ago

Made this Flow Sidebar, how's it?

Enable HLS to view with audio, or disable this notification

78 Upvotes

r/css • • 5d ago

Help Tufte sidenote position change

5 Upvotes

Hello, I am trying to make a blog using the Tufte template.

This is where I am getting the css for the template: https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css

This theme has sidenotes that has content alongside text, you can see some examples on my blog : https://math_adjacent_ramblings.gitlab.io/blog/

Although this is the syntax for it (I am writting it in typst):

\#tufted.sidenote\[  
  content of the sidenote comes before the paragraph it renders next to  
\]  

the paragraph comes renders next to.

The issue is that when someone views it on phone, the sidenotes appear in the same column along the text, and the issue is that now they will be read before the the paragraph.

I can't figure out how to change it so that the sidenote could be written after the paragraph its meant to be read after, or attach the sidenote to the previous paragraph. I need help with that.

Thank you all in advance :) !!

Edit: JSFiddle link : https://jsfiddle.net/0uq1hLn2/


r/css • • 5d ago

Question How complex of a 3D object have you created in CSS & HTML?

3 Upvotes

How far can you take it? I'm playing with that now after seeing a 3D x-wing from 2013. This is where I am so far. Are there other examples of complex 3d objects to play with and learn from out there?

CSS & HTML X-Wing

r/css • • 5d ago

CSS Shape Morpher

Thumbnail
3 Upvotes

r/css • • 6d ago

Asking for help with debugging: Duolingo accents on top of J/j

2 Upvotes

The "J" and "j" characters have a weird accent on Duolingo and I cannot figure out why.

A few findings worth noting: disabling duolingo-sans in Chrome Dev Tools fixes the issue (obviously, the page ends up using a different font, the fallback sans-serif then).

I tried to find where the duolingo-sans font-face is defined and I could not locate it anywhere. I did find the .woff2 files that contains the Duolingo Sans Thin fonts however and upon investigating them I can confirm that they look completely fine, they do not have that accent anywhere. This seriously vexes me as I cannot pin down what causes the issue, on one hand removing duolingo-sans solves the issue, on the other hand duolingo-sans looks completely fine on its own.

If anyone could take a look and share their thoughts I would really appreciate it.


r/css • • 7d ago

Showcase `writing-mode` turned range sliders vertical. No more `rotate(-90deg)` 🔥

Enable HLS to view with audio, or disable this notification

69 Upvotes

r/css • • 7d ago

Resource Bootstrap 6 Alpha | Bootstrap Blog

Thumbnail
blog.getbootstrap.com
37 Upvotes

r/css • • 6d ago

I got tired of losing every CSS change I make in DevTools, so I built a Chrome extension that keeps them

Enable HLS to view with audio, or disable this notification

0 Upvotes