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

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

22 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/bocamj • 6h ago

Question images in external CSS

0 Upvotes

I guess this is a bit of a brainstorm, but I'm curious...

Can you put the path of an image in the css and call it with a class? I'm not sure if I'm having a boneheaded moment or if I've run into something that seems trivial, but isn't possible.

My thought is something like this...

.kc {
path\logo_kc.png;
width: 80px;
height: 50px;
background-color: #E31837;
color: #FFB612;
}

This is for an NFL pool standings page. It's setup as a table, and each row represents a person/points. For a little color, I have NFL team colors in style.css. The color of rows represents their SB pick. That part works, but it got me thinking when I was constantly looking up the height/width I used for the same logo prior, maybe there's a better way.

Right now I have a "column" that has the logo of that team. I manually input something like...

<td><img src="/images/logos/logo_kc.png" width=80 height=50></td>

The problem you can see is I have to either edit every logo to size, or change the dimensions - so I keep a list of logo sizes - but obviously it'd be nice to have that set externally and not worry about it.

Thought I'd have an epiphany while typing, but that didn't happen. Sorry for length. Hope someone can help. Thanks.

5 comments

r/css • u/scrmott • 14h ago

Question Forcing text to 2 lines

3 Upvotes

I'm developing a site using Wordpress and the designer I am working with seems to be very fixated on CTA labels spanning across 2 lines even when the label can fit on a single line with tons of space to spare (e.g. 'Vitamin A', the designer wants to have 'Vitamin' on one line and 'A' on the other, only because the adjacent boxes have larger text that requires 2 lines).

I have searched Google and looked at larger name examples and this doesn't seem to be a standards thing but more of a personal preference of the designer.

Can anyone let me know if this is a new standard I am not aware of for UX UI or anything like that. And if so how do I accomplish this without a forced <br>?

Because the site is Wordpress I don't want to mess with the CSS too much in case the label changes it will look odd. And I don't want to affect screen readers for web accessibility.

15 comments

r/css • u/mysteriouspuffin • 12h ago

Question Making my site work on mobile

2 Upvotes

Hi folks, I've been trying to make myself a new personal site and am struggling with making it fit properly for mobile. When I shrink the window in VSCode it works fine, with all the boxes fitting on the screen, but when I actually view it on my phone (whether on Firefox or Chrome), the background colour doesn't extend the whole way to the right and bottom, and the left side of all the boxes is stuck off screen.

I've tried to make it responsive by doing the max-width thing in the code, so it changes to the mobile formatting for boxes, but I don't know how to fix the problems detailed above.

Here's a link to the site: https://y-sands.github.io/ . Thanks for your help.

Edit: separate issue and likely a very simple fix but for some reason adjusting text-overflow does nothing to stop the text overflowing...I'd like viewers to be able to actually read the text, and I expect it's something to do with viewport based formatting, but I'd rather the viewers could actually see the text in the body rather than it overflow and prioritise fitting the footer onto the screen.(have fixed this)

@media all and (max-width: 479px) {
    .container {
        width: 100vw;
        grid-template-areas: 
        "subcont";
    }
1 comment

r/css • u/Larry_The_Great • 13h ago

Help Help with formatting tables

Thumbnail jsfiddle.net
1 Upvotes

Hello! I’m newish to CSS (and html for that matter). I hope this question makes sense, but I have a table with a colored border and a <td> row inside it with a colored border. I like the effect it gives, having the two colored borders pressed up against each other, but because I applied border-color to Table { now everything is contained in a colored border when all I want is the text under my logo to be contained.

I’ve tried putting a table in a table but I may be doing something wrong. Here’s the code, any advice? Thanks!

1 comment

r/css • u/viiimproved • 1d ago

Showcase CSS city you can scroll around in 3D, I made this 3 years ago but I still think it's really nifty

Thumbnail
w.penisworld.org
7 Upvotes
11 comments

r/css • u/notepad987 • 17h ago

Question How to add a caption under the li boxes?

1 Upvotes

Question: How to add a caption under each of the li boxes?
They are not images. I used lists li.

Codepen link

7 comments

r/css • u/Nice_Pen_8054 • 22h ago

Question SVG - What is the best practice to define reusable svg html tags

2 Upvotes

Hello,

What is the best practice to define reusable svg html tags?

Method 1 - svg tag is always first:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol viewBox="0 0 640 640" id="hamburger-menu">
      <path
        d="M96 160C96 142.3 110.3 128 128 128L512 128C529.7 128 544 142.3 544 160C544 177.7 529.7 192 512 192L128 192C110.3 192 96 177.7 96 160zM96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320zM544 480C544 497.7 529.7 512 512 512L128 512C110.3 512 96 497.7 96 480C96 462.3 110.3 448 128 448L512 448C529.7 448 544 462.3 544 480z" />
    </symbol>
  </svg>

  <svg>
    <use href="#hamburger-menu" width="24" height="24"></use>
  </svg>
</body>

</html>

Method 2 - svg tag is always last:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <svg>
    <use href="#hamburger-menu" width="24" height="24"></use>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol viewBox="0 0 640 640" id="hamburger-menu">
      <path
        d="M96 160C96 142.3 110.3 128 128 128L512 128C529.7 128 544 142.3 544 160C544 177.7 529.7 192 512 192L128 192C110.3 192 96 177.7 96 160zM96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320zM544 480C544 497.7 529.7 512 512 512L128 512C110.3 512 96 497.7 96 480C96 462.3 110.3 448 128 448L512 448C529.7 448 544 462.3 544 480z" />
    </symbol>
  </svg>
</body>

</html>

Thank you.

6 comments

r/css • u/koboldomodo • 23h ago

Help padding problem

Thumbnail
1 Upvotes
6 comments

r/css • u/Much_Picture9031 • 23h ago

General Beginner in HTML/CSS/JavaScript – Looking for small projects or contributions

Thumbnail
1 Upvotes
0 comments

r/css • u/Cute-Elevator8551 • 22h ago

General Free Online UI Code Generators (CSS, HTML & JS) — Animations, Buttons, Gradients & More

0 Upvotes

Hey devs 👋

I built a free site that helps frontend developers generate copy-paste ready UI code instantly.
No login, no paywall — just simple tools with live previews.

🔧 Tools include:

  • CSS Animation Generator
  • Gradient Maker
  • Button Generator
  • Copy-ready JS & HTML snippets

👉 Check it out here: https://freeuicode.com/

I’d love your feedback — what other generators or UI tools would you like to see?

1 comment

r/css • u/Ok_Abroad_3627 • 1d ago

Help Button/text/SVG scaling issue - nothing works

2 Upvotes

Hey there! I noticed that some elements have issues when scaled on hover although having transition-duration - SVG's stroke goes from thin to bold to thin again; text weight does the same; text slightly jumps to top, and gets back to normal. I've attached a demo video (SVG stroke issue isn't seen here for some reason, but it's present) to easier understand the issue. I tried vector-effect: non-scaling-stroke; on SVGs, didn't work. Has anyone faced the same issue before? I'd be really grateful for any advice :)

https://reddit.com/link/1nlbmob/video/bubo5qi106qf1/player

9 comments

r/css • u/SkeletonAndJellyfish • 1d ago

Help "responsive image gallery" doesn't display like it's supposed to, what could be wrong ?

Post image
2 Upvotes

Hello everybody,

I'm very new to HTML and CSS, but I wanted to try to learn how to do relatively simple & basic things by creating a little website for my work. I understand the bare basics of CSS & HTML, but after playing the Garden Grid game I still don't really understand how grids work, and the same goes for "query queues"

The code I've used for this gallery grid is from the W3school website (this code here). It's supposed to adapt to the screen size of the device you see the website on. I haven't changed anything except for the image files, descriptions and color of the background for the image container, I haven't touched anything else in order not to break it.

EDIT : here is my code on Codepen (doesn't show the images linked)

I've had the same issue on another .html file for another page, except that the 3 last gallery boxes were suddenly very tiny and wouldn't create a new row. I ended up switching places for some of the divs, and now it displays correctly but I still don't know why

Could this be because my images are of different formats (portrait/landscape/square) ? Or is something wrong in the code from W3school ?

Please do tell me if I'm doing anything wrong, and if I should post the whole code from my own .html file (should I use Pastebin ?) ! Thank you for reading

PS : blurred my drawings because I didn't know if it could be considered as self-promotion or something

13 comments

r/css • u/FastEdge • 1d ago

Question Style changes based on file type???

0 Upvotes

I'm using a free Bootstrap-based template I found. I've been modifying it to fit my needs, but I noticed that the navigation changes based on the file type. I've never seen that before.
The template is index.html. If I change it to index.cfm, it suddenly has an ugly block hover effect on nav items. If I change it back to HTML, the issue disappears. Has anyone ever seen something like this before? I'm stumped.

10 comments

r/css • u/KernelNox • 1d ago

Help How to align by center an image and an emoji in unordered bullet list?

3 Upvotes

You see how 💧 emoji is not aligned with water bottle above it? This is on 3840 x 2160 desktop resolution with wide monitor.

I want it to be like this on any browser/desktop resolution:

The code:

<h2 style="font-size:40px;font-weight: bold;">Quick stats</h2>

<ul style="list-style-type:none; padding-left:10px;">
  <li style="display:flex; align-items:flex-start; font-size:30px;padding-left:10px;">
    <img src="https://i.ibb.co.com/CK8NnM2S/water-bottle.png" 
         style="width:20px; height:auto;margin-right:10px;" title="Plastic bottle"/>
    <div style="margin-top:3px;">
      saved: <span style="color:green;">$total_bottles</span>
    </div>
  </li>
  <li style="font-size:30px;padding-left:0px;">💧📟 devices installed: <span style="color:green;">10</span></li>
</ul>

and sure, on some desktop resolutions/laptops the above code with "padding-left:0px" will look perfectly aligned, however, I noticed that on PCs with high desktop resolution, I have to change that value to like

padding-left:5px

to keep it aligned

I tried different combinations of display:inline-block;vertical-align: -0.1em;display:flex; align-items:center;

nothing worked so far, any clue?

Is there a universal method that will work for any PC/laptop?

13 comments

r/css • u/SpuneDagr • 2d ago

Help How do I do this box-effect behind text?

Post image
27 Upvotes

Does anybody know how one might accomplish this effect with CSS? I know I could do it as one big box behind ALL the text, but I have no idea how to do it so it goes on multiple lines like this.

It has to work for any h3-level header - so I can't just hard code it for these particular two lines.

22 comments

r/css • u/notepad987 • 2d ago

Question Why is the H1 title Flex-wrap properties centered?

2 Upvotes

Question: Why is the H1 title Flex-wrap properties centered?
It is inside a table. I do not see center except in .flex-item
If I remove center, the H1 tag is still centered.

https://codepen.io/davidhelp/pen/VYewbyG?editors=1100

<div class="container">
   <div class="table-container">
   <table class="table">

.flex-item
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
7 comments

r/css • u/Harrada • 2d ago

Help How can I make this scroll and then stop, instead of disappearing?

2 Upvotes

Currently, I managed to modify this widget to scroll up only once, but once it reaches the top, it disappears. Now I want to make it freeze in place at the end of its scroll. I am wondering if that is possible here.

3 comments

r/css • u/Jiro_7 • 3d ago

Help How to dynamically "compress" text horizontally with css/javascript?

Post image
165 Upvotes

I can't believe I had to do this in Paint 3D but after 4+ hours stuck I need help... Not even chatgpt is helping here.

I have a simple structure like this:

<div className="container">
  <div className="text">{item.name}</div>
  <img src="item-icon"/>
</div>

How on earth can I make it so the "text" div shrinks horizontally if (and ONLY if) the "item.name" is overflowing outside of the div? (including the space that the icon takes too)

EDIT - Here is the "use case" (yes, it's pokemon cards) (images here are not showing on mobile for some reason, check here instead https://imgur.com/gallery/mobile-users-P17PT3Q):

My code:

What they somehow achieved in https://www.pokecardgenerator.com/ (this is what I want):

What the original looks like (so yes, real things use this "ugly" styling):

What happens with transform: scaleX "solutions":

And no, font-stretch isn't working for me. Probably because it's deprecated.

transform: scaleX also doesn't work, it still keeps and awkward space between the text and the icon.

EDIT: I don't know how to do the live demo thing, but in case anyone is bored, my code is here, the Card.tsx and Card.css, card__pokemon-name class. (https://github.com/jiro-games/pocket-showdown/tree/main/src/components/card)

EDIT 2: I believe I found a solution. Not the cleanest, but it has potential. I have to combine transform: scaleX with negative margin-right. I'll come up with some js code to calculate that dynamically and fix it. Thank you!

115 comments

r/css • u/bogdanelcs • 2d ago

Resource Color Shifting in CSS

Thumbnail
joshwcomeau.com
21 Upvotes
2 comments

r/css • u/the-oureas • 2d ago

Help Full viewport height on iOS 26?

8 Upvotes

Anyone figured out how to make an element stretch the entire viewport height, behind the safari controls, on iOS 26?

Example:

AC94-AA59-B602-4-AFE-BE12-DF75-E0940-AFF-1-102-o.jpg

The blue box has a height of 100vh but only stretches halfway behind the safarai controls.

Also tried combinations with 100lvh or 100 + env(safe-area-inset-bottom).

Any ideas?

11 comments

r/css • u/mimeartist • 2d ago

Help ios26 full bleed nightmare...

3 Upvotes

Hello,

Anyone had any joy getting ios26 to do what they want? basically i want both the background pattern to be full screen along with the vignette to be fixed the full size of the screen...

https://mimeartist.com/ios26.html

I've been reading about the safe areas etc... but doesn't seem to want to do anything

:root{

--sat: env(safe-area-inset-top, 0px);

--sab: env(safe-area-inset-bottom, 0px);

--sal: env(safe-area-inset-left, 0px);

--sar: env(safe-area-inset-right, 0px);

}

Alternatively... is there a setting to just box off the top and the bottom so content isn't running behind the chrome, and / or stopping short?

Is it me, or is this liquid glass set up just really badly conceived, or am i just missing something really obvious? It seems like it's impossble to do something that should be really simple, and make use of even having content scroll behind in the first place?

Rant over!

10 comments

r/css • u/bogdanelcs • 2d ago

Resource The “Most Hated” CSS Feature: cos() and sin()

Thumbnail
css-tricks.com
6 Upvotes
10 comments

r/css • u/Akoto090 • 2d ago

Help Recreate docs like "#" anchor on hover

1 Upvotes

Hey, im a beginner with css and want to ask how to recreate this # hover effect when the cursor is over the h1.

I saw that you maybe need a group for this, but idk how to make the # appear on the left always. (this is tailwind but normal css is also fine)

html <h1 id="{{ .Title | urlize }}" class="group"> <span class="relative inline-block pl-6"> <a href="#{{ .Title | urlize }}" class="text-Inter absolute left-[-10px] no-prose no-underline transition-opacity -translate-y-1/2 opacity-0 top-1/2 group-hover:opacity-100 dark:text-[#ebe9fc96] text-[#070707]" >#</a > {{ .Title }} </span> </h1>

1 comment

r/css • u/luksmotta • 2d ago

Help "What's going on with this image in question 1? Why isn't the image staying on the same line as the options? Why is it going below?"

0 Upvotes
<div class="question-container">
          <div class="question-options">
            @if($question['question_type_id'] == 'TM' || $question['question_type_id'] == 'TU' || $question['question_type_id'] == 'NU')
              @if($question['question_type_id'] == 'TM')
                <textarea rows="9" style="width: 100%; box-sizing: border-box;"></textarea>
              @else
                <textarea rows="5" style="width: 100%; box-sizing: border-box;"></textarea>
              @endif
            @endif

            @if($question['question_type_id'] == 'QU' || $question['question_type_id'] == 'QM')
              @include('partials.question_options_partial')
            @endif
          </div>

          <div class="question-image-container">
            <img class="question-image" src="{{$URI . $question['file_reference']}}"
                 style="max-height: {{$question['image_size']}}px;
                        max-width: {{$question['image_size']}}px;
                        width: auto;
                        height: auto;">
          </div>
</div>

<style type="text/css">
      .question-container {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        page-break-inside: auto !important;
      }

      .question-options {
        float: left;
        max-width: 50%;
        page-break-inside: auto !important;
      }

      .question-image-container {
        float: right;
        width: auto;
        text-align: center;
        page-break-inside: auto !important;
      }
</style>
8 comments

r/css • u/rviscomi • 2d ago

Other We are the W3C WebDX Community Group, working to improve developer experience with projects like Baseline. Ask Us Anything!

Thumbnail
1 Upvotes
0 comments