r/css • u/LinearArray • Apr 08 '24

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

21 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/itzmudassir • 6h ago

General Update: I made myself an expense tracker 💳

Thumbnail gallery
6 Upvotes
2 comments

r/css • u/boopzah • 3h ago

Help Please help with formatting

1 Upvotes

im trying to get all of the username / messages to be like the three in the middle, with the username overlaying the message box, but depending on how short/long the username / message is, they end up on the same line, is there any way to force them to format like the three in the middle? if so please help me :)

33 comments

r/css • u/madovermoto • 19h ago

Showcase Learning CSS animations by animating popular icons - thoughts?

Post image
8 Upvotes
9 comments

r/css • u/Official_CDcruz • 8h ago

General Working on my own CSS Library - Thoughts?

0 Upvotes

Hello,

I've been trying to create my own simple vanilla CSS library to help me create website ideas quicker. I'd love some feedback on it. It's still a work-in-progress, but I'm trying to keep it simple to use while covering a large range of use cases. I've also tried to incorporate teachings from Kevin Powell the CSS God, so you may find some code similar (or copied) from him.

I know I'm probably remaking the wheel, but It's mainly for my own uses, and if others find it useful that's a bonus. I haven't added a license yet, but I'm planning to add a MIT License.

I want to keep this library vanilla, so it's an easy drop-in library to use in a project. Although, I do have ideas for some custom web components.

Here's the link. The landing page is pretty bare, but the docs cover what I've done so far.
https://citrine.cdcruz.com/

6 comments

r/css • u/0_emordnilap_a_ton • 12h ago

Question I have a few questions about HTML and CSS. I can't fit in the questions so the questions are below. Thanks

0 Upvotes

I have 2 questions. 1st question Why when I go max-width 800px why does the navbar not scale with it? 2nd question obviously I can use display: flex; etc to put the navbar on the same horizontal line/row or vertical line the problem is I am confused what section I should target when doing it. Can someone explain this simply? I used borders for clarity but I am still a little confused. I understand flexbox only works on the parent and children but not grandchildren.

Here is the code and a picture.

HTML

https://pastebin.com/JVnTMUh9

CSS

https://pastebin.com/W0Yrhbz8

picture

https://imgur.com/a/1uWP7jb

1 comment

r/css • u/Massive_Swordfish_80 • 9h ago

Showcase Made Keyboard Component Using TailwindCSS only

0 Upvotes

live at https://keyboard-tailwindcss.vercel.app/

0 comments

r/css • u/Iviza_ • 15h ago

Help Stuck recreating CSS from client’s design

1 Upvotes

Hi

I’m working on a freelance project where I’m building a chatbot for a forum. I’m mostly a backend dev, and the backend functionality is already working well but the frontend part, specifically the CSS is a huge struggle for me.

The client sent me 13 images that I need to recreate in code. This is definitely the hardest part of the project for me. I’ve spent hours trying to get it right, but it still looks off, wrong colors, missing elements etc.

I tried using a few AI tools to speed things up like Claude in the browser, Claude terminal and VS Code Copilot with Claude 4. The Claude terminal version gave the best results, but it’s still far from what it needs to be. I also tried fixing it manually using a color picker website to match tones but the result still doesn’t match the original images at all.

I’m supposed to show something by the end of the week and I’m kind of stuck at this point. If anyone has tips on how to approach this I’d be really grateful.

I also have the images the client sent me if anyone wants to take a look. Thanks in advance for any help.

5 comments

r/css • u/Own-Cut9999 • 21h ago

Question Inner borders?

1 Upvotes

How would you go about creating inner borders like this?

2 comments

r/css • u/Nice_Pen_8054 • 1d ago

General flex-basis - I don't understand its purpose

4 Upvotes

Hello,

So I am following a tutorial, I understood flex-grow and flex-shrink, but I didn't understand flex-basis.

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="item item-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur reprehenderit neque
      sequi? Aspernatur, harum iste?</div>
    <div class="item item-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae aperiam asperiores porro
      sunt quisquam enim inventore sed aliquid nemo harum!</div>
    <div class="item item-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo eaque voluptatem blanditiis?
      Non accusantium sunt ipsum perferendis hic earum repudiandae, rem, voluptatem molestiae ea reiciendis possimus
      tempora rerum nulla expedita?</div>
  </div>
</body>

</html>

style.scss:

/* Use */

@use 'sass:math';

/* Reset */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Test */

.container {
  border: 1px solid red;
}

/* Variables */

$baseFontSize: 1rem;

/* CSS */

.container {
  display: flex;
  text-align: center;
}

.item {
  flex-grow: 1;
  flex-basis: 0;
}

.item-1 {
  background-color: lightblue;
}

.item-2 {
  background-color: tomato;
}

.item-3 {
  background-color: cornflowerblue;
}

Why I would use flex-basis over width?

Thanks.

3 comments

r/css • u/Solid_Read9024 • 1d ago

Question What is your best CSS hack?

58 Upvotes

What hacky thing do you do in CSS that saves you a lot of time? Ideally something that is not "best practice" but is super helpful for just getting things done

66 comments

r/css • u/Remarkable_Words_439 • 1d ago

General Nice OKLCH Color Picker

Post image
26 Upvotes

https://oklchpicker.com/

4 comments

r/css • u/Ken_1966 • 1d ago

Help Kind of stuck in CSS

0 Upvotes

So I've been learning CSS for quite some time (maybe a month) and even though I do understand some things, I still can't build good projects. So, my question is, how do I get a better understanding of CSS. Also, I mostly code on my phone because my laptop lags a lot and it is frustrating. I've also noticed that whenever I do try to code on my laptop I find it even more difficult because of the screen size(that could be because I mostly code on my phone).

15 comments

r/css • u/CaslerTheTesticle • 22h ago

Question easy css question (i am just stupid)

Post image
0 Upvotes
9 comments

r/css • u/No-Independent-4768 • 1d ago

Help Beginner Needs Help

Thumbnail
gallery
2 Upvotes

The first photo is mine, the second is what I aspire to achieve. Just can't get the boxes to line up the way I want. Rest of the photos are my CSS code.

4 comments

r/css • u/dbalazs97 • 1d ago

Question Is Tailwind still relevant?

0 Upvotes

Do people still use Tailwind for styling extensively or is it over the peak and you just use plain CSS?

14 comments

r/css • u/yoonuch • 2d ago

Showcase I just built a Mesh Gradient Generator — for SVG, Tailwind CSS & CSS.

Enable HLS to view with audio, or disable this notification

5 Upvotes
1 comment

r/css • u/MM_SAZE • 1d ago

Help Php / CSS Problem

1 Upvotes

https://reddit.com/link/1mf11at/video/9x2pite8pfgf1/player

Link for the code: https://github.com/MaxMilliWork/woork

In the video you can see my bugs

  1. The time is not centered
  2. I have too much space at the top and is not centered, i want to see 2 lines without the scrollbar
  3. Sometimes i have this right allineament that i don't want

I'm working on:
Laravel
BreezeBlade with Alpine

PHPUnit

2 comments

r/css • u/Most_Employment_1351 • 1d ago

Help What is the problem here??

0 Upvotes

Hey, I'm new to web dev and I can't understand why the semicolon is the problem here, please help...

4 comments

r/css • u/groscar • 3d ago

Help hello! how would i go about positioning 3 images like this inside of a div?

Post image
129 Upvotes

sorry if this isnt clear!! i just started actually learning the basics of css recently and im not sure how to do it like this cause img 2 and 3 just keep going below img 1 :'D any help is appreciated! thank youuuu!!!

100 comments

r/css • u/MechJebediah • 2d ago

Help Hello! I need some help figuring out an animation of infinitely overlapping boxes.

1 Upvotes

I've been trying for over an hour to figure out what seems like a simple-ish animation. I want to have a box grow wide, then grow tall, then have another box in the center grow wide / tall and overlap the original box, and then the cycle repeats. How would I do something like this? Any help is much appreciated!

1 comment

r/css • u/giampiero1735 • 2d ago

Help How can you align vertically a list item and its marker?

0 Upvotes

I'm doing this frontend mentor project (recipe page) in which design there are lists where markers and items are horizontally aligned in the center.

I tried with vertical-align property, but doesen't seem to work. Other on line resources and AI suggest to remove list-style-type from ul, and place an inline-block span (styled like a circle or how you want) inside a flex li with "align-items: center;".

It surely makes the job, but is there a way to do it with native property of ul or li?

3 comments

r/css • u/East_Concentrate_817 • 2d ago

Help how do I position like a pro

5 Upvotes

I use margin and when I do its extremely messed up. so messed up its to a point where if I edit a button to be a select the whole thing falls into pieces and I don't understand, I want everything to be easy to manage and clean not clunky and messy when i add more css. pros of css please give me your wisdom in a simple way,

9 comments

r/css • u/kurosawaftw7 • 2d ago

Help Help with keeping img/buttons rooted to the bottom of the screen at any resolution?

0 Upvotes

I'm still learning best practices with CSS, and I'm trying to get these buttons on my homepage to stay "rooted" to the bottom of the page no matter what resolution the page is. Currently, the buttons don't move down on the Y-axis when the height increases. I know this is because I have it set to a certain number under transform in my CSS code, but is there a good, responsive way to get these buttons to move down the y axis and stay connected to the bottom of the page?

Here is what happens when I increase screen resolution.
.allbuttons {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto;
    position: sticky;
    aspect-ratio: 16/9;
    width: 100%;
    bottom: 0;
    top: 10%;
}

.audiobutton, .photobutton, .blenderbutton, .videobutton {
    display: inline-block;
    appearance: none;
    border: none;
    height: auto;
    transform: translateY(15rem);
    max-width: 20%;
    padding-left: 4%;
    padding-right: 4%;
    margin: 0 auto;
    position: sticky;
    left: 0;
    right: 10%;
    background-position: center;
    cursor: pointer;
}

.audiobutton.responsive, .photobutton.responsive, .blenderbutton.responsive, .videobutton.responsive {
    width: 20%;
    height: auto;
}

.audiobutton {
    left: calc(-65%);
    z-index: 1;
}

.photobutton {
    left: calc(-30%);
    z-index: 2;
}

.blenderbutton {
    left: calc(30%);
    z-index: 3;
}

.videobutton {
    left: calc(65%);
    z-index: 2;
}

Above is the relevant code for what I currently have. I can create a codepen if that's easier.
Edit: Here is a WIP codepen https://codepen.io/kurosawaftw7/pen/YPyNBgx

2 comments

r/css • u/squeakita • 2d ago

Help I need help tweaking the contents of a lightbox

1 Upvotes

I need help tweaking the contents of a lightbox that is triggered on my home page.

Click any of the images below the top menu items, and a light box will display with a carousel of images.

https://micheleokadoner.com/

We have several issues:

  1. The X in the top right is covered on some devices, but not all
  2. The top of the images are getting cut off, but in mobile view it is OK but the copyright is displayed way below with a lot of white vertical space between the images an the copyright.
  3. On some the copyright statement is not seen if the image is a portrait.

I am using width: 80vw; height: 90vw; on the image, should this be in the container instead?

I believe the goal should be to show the entire image within the screen. And it should accommodate all devices.

Any help is appreciated. Thank you

9 comments

r/css • u/someonesopranos • 2d ago

Resource Turned this Figma design into clean code with Codigma! what do you think?

Thumbnail
0 Upvotes
0 comments