/r/css

Photograph via snooOG

A community for discussing about CSS (Cascading Style Sheets), Web Design and surrounding relevant topics. Feel free to discuss, ask questions, share projects and do other things related to CSS here.

About CSS
  • CSS, short for Cascading Style Sheets, is used almost universally across the web to affect the design and appearance of every website you visit. Here in /r/css, you've got a place on reddit to talk about CSS, whether you're new to CSS and want to learn, or a pro wanting to discuss the engineering and usability reasons that all modern browsers ignore

  • We welcome all CSS discussion here. If you need help with styling your website or your reddit, or want to share a neat trick you cooked up, it's welcome here!

Rules
  1. No spam. If you've developed a neat CSS trick that you want to share with others, make sure you share the trick, not your website. In other words, feel free to post something like "Isn't my 404 page neat?" with a link, but avoid posts like "Hey look how cool my site is!" that link to a storefront. This reddit is a place to learn and show off CSS, not sell your products. If your CSS helps sell your product, great, but make sure your post is about the CSS, not the product.
  2. Be nice. Not everyone is a fantastic designer. If someone posts their work here and you don't like it, give them objective feedback about ways to improve it, not "it's ugly." Likewise, CSS newbies often have the same questions as they grow and learn, so try not to be mean when they post a question we've seen a thousand times before. It might be old news to you, but they wouldn't ask if they hadn't already sought an answer, and there might be other people too afraid to ask for themselves.
  3. Don't use link shorteners (bit.ly for example), because they are automatically marked as spam.
  4. Try to use descriptive titles (not 'I have a question.'). I won't enforce this, but it'd be nice if you'd follow it.
Related subreddits
Useful Links
  • Inspire, a collection of all kinds of useful links.
  • /r/csshelp and /r/reddithax are the places to go for questions relating to Reddit's stylesheets. Techniques differ a lot between formal CSS development and subreddit stylesheets, so you'll often get better answers there.
  • Use Codepen or jsFiddle to provide working code samples.
  • Mozilla Developer Network is your one-stop shop for detailed information on CSS properties. Formal specifications for everything CSS can be found at W3.org. Don't go to W3Schools - it isn't a wiki maintained by real developers like MDN, so it's often out of date and prone to significant errors, and it has no relationship with the W3 so they have no special or insider knowledge.
  • CanIUse.com has 99% of the information you need on supporting different browsers.
  • Codecademy can get you started from 0 knowledge of web development in mere hours.
  • Learn Layout will teach you advanced techniques for designing modern sites.

Click here to message the mods.

/r/css

119,846 Subscribers

1

Wrapping Columns problem

Hi all, I've been bashing my head against this for a few days and need to talk to people about this. The problem statement is as follows:

I need a column-oriented list of items, all the same size and width, that will prioritize filling the variable width of the element first; the height does not matter. It should do this without putting any extra space between the elements.

To my knowledge, there are three ways to obtain a column-oriented list. Each has its own problem when attempting to achieve this result.

  1. (Closest solution) Using column-width. This solution behaves nearly exactly how I'd like, except for when resizing the window, the extra space created before there's enough room for a new column is distributed between the columns. Setting column-gap to 0 does not stop this behavior, and to my knowledge there is no way to "align" columns completely to the left. Still, the list appropriately fills the given width with columns, then adds content to those columns to whatever height the content requires.

  2. Using flexbox with flex-direction:column, flex-wrap:wrap, and align-content:baseline. This looks promising but it fills out height first, requiring me to set an explicit height for it to begin to wrap. No matter how wide I make the element, it won't be filled out unless the element height gives it a reason to wrap. The reason this isn't ideal is because even if I use vh for dynamic height, on mobile, this will force the list out of the viewport to the right.

  3. Using grid with grid-auto-flow:columns and auto-fill columns and rows. Same issue as with flexbox, it will not wrap unless the height is a limiting factor. I want the height to be theoretically unlimited, and the list to instead fill out the width first.

The exact methodology here isn't important to me-- I was wondering if there was a different way I could generate/pre-order the inner divs to make them appear as column-oriented but didn't get far since the number of columns is variable.

Happy to attempt any solutions given in the comments, or answer any questions about the problem. Thank you!!

0 Comments
2024/04/19
19:14 UTC

1

Label and Input help

When creating a sign up form with the label and input how can I make it so the words appear on top of the input bar instead of the side

2 Comments
2024/04/19
15:54 UTC

0

Tailwind CSS tips that every developer should know

Hi there, for those of you working with Tailwind CSS:

I've been working extensively with Tailwind for the past 2 years, and I've collected some of my favourite tips and hacks that I think every developer could benefit from. I’ve put these together in a blog post, hoping it might offer you some new tricks and perhaps even solve some common frustrations.

Would love to hear about some feedback, what you learned or your go-to tips or hacks!

0 Comments
2024/04/19
10:19 UTC

3

Weird transformation with ::after element

hello dear reditors, I have a small issue where I am remaking my whole website using new things I learned in css and while playing with the transform and ::after to make some animation, I got a part of the animation that go out of the text then go back when the animation is finish :

Before the animation

While the animation

After the animation

Here the css :

body {
    margin: 0;
    padding: 0;
    background-color: black;
    font-family: 'Ubuntu', sans-serif;
    color: bisque;
}

// Link style
a {
    color: bisque;
    text-decoration: none;
    border-bottom: 1px solid bisque;
    transition: color 0.3s;
    position: relative;
    overflow: hidden;

    &::after {
        content: '';
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: bisque;
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.3s;
    }

    &:hover {
        color: black;
        &::after {
            transform: scaleY(1);
        }
    }
}

And here the html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu:b|Ubuntu:i|Ubuntu:500">
    <link rel="stylesheet" href="/src/css/style.css">
    <title><Sarxzer/></title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="about.php">About</a></li>
            <li><a href="contact.php">Contact</a></li>
            <li><div class="dropdown">
                <button class="dropbtn">Dropdown</button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div></li>
            <li><div class="dropdown active">
                <button class="dropbtn">Dropdown 2</button>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div></li>
        </ul>
    </nav>
    <main>
        <h1>Welcome to my website</h1>
        <p>This is a paragraph</p>
    </main>
    <footer>
        <p>&copy; 2020 Sarxzer</p>
    </footer>
</body>
</html>
7 Comments
2024/04/19
09:15 UTC

5

Backgrounds not working on style.css but works with <style></style> directly on the HTML document

hi, I am relatively new to CSS and could really use some help with this issue, my background image does not seem to work with my style.css file with the following code

#preloader{
background: #34332f url(assets/images/preloader/preloader.gif) no-repeat center;
background-size: 20%;
height: 100vh;
width: 100%;
position: fixed;
z-index: 100;
}

but works with <style></style> directly on the HTML document.

to add, the background color works fine when its within the style.css file but the background image requires me to work on the HTML document with <style></style>.

I greatly appreciate the help!

9 Comments
2024/04/19
06:26 UTC

3

I made a website!!

https://adithya69.pythonanywhere.com/

Hey everyone, I made a website which performs matrix calculations for a school project. Any tips on improving??

I used HTML5 and CSS, I wanted to know more CSS styling that can be used.

1 Comment
2024/04/19
01:57 UTC

0

Is using has selector allowed in standard projects? Chatgpt suggests otherwise.

14 Comments
2024/04/19
01:44 UTC

0

Now can orders??

1 Comment
2024/04/19
01:28 UTC

4

Is this technically possible ?

I should implement this highlighting to the text + making it responsive like this!
I have tried a lot, but i couldn't... i assume that i should use `svg` as a background ?

https://preview.redd.it/oiispyaybbvc1.png?width=611&format=png&auto=webp&s=1184f556833e402f5feee1198a629a46c127949b

https://preview.redd.it/jpv3f7e7cbvc1.png?width=660&format=png&auto=webp&s=2d30b8c0f09de98ba12eb577db7e16362af800c4

2 Comments
2024/04/18
22:21 UTC

1

Combinators not working on SVG

Hello, I'm relatively new to CSS and I'm trying to apply it to a series of dozens of relatively complex SVG polygons and paths with associated text in containers. I want each polygon to highlight and its sibling text to fade in on hover.

/* The SVG consists of dozens of groups formatted like so: */
polygon {
    fill: #595a5c;
}

path {
    fill: #fff;
}

text {
    fill: black;
    opacity: 0;
    transition: opacity 0.5s;
}

<g id="group1">
    <polygon points="etc...">
    <path d="etc...">
    <text>Label goes here.</text>
</g>

<g id="group2">
    <polygon points="etc...">
    <path d="etc...">
    <text>Label goes here.</text>
</g>

<g id="group3">
    <polygon points="etc...">
    <path d="etc...">
    <text>Label goes here.</text>
</g>

/* This works and applies to all polygons as expected: */
polygon:hover {
    fill: white;
    stroke: yellow;
    stroke-width: 2px;
    stroke-linejoin: round;
}

/* This does not work. I would expect this to apply to all text elements following the polygon that share the same parent: */
polygon:hover ~ text {
    opacity: 1.0;
    transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
}

/* This also does not work: */
g:hover text {
    opacity: 1.0;
    transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
}

/* This DOES work on an individual basis, but I'd rather not have to create a hover event for each group individually: */
#group1:hover text {
    opacity: 1.0;
    transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
}

What am I doing wrong, and how can I avoid needing to create individual hover events for each group?

4 Comments
2024/04/18
20:55 UTC

1

How we achieve this?

Like the title says I am want to know of how I can achieve this effect? I’m sure it’s a SVG and CSS key frames but im having difficulty getting started

23 Comments
2024/04/18
19:44 UTC

1

An effects library platform for web dev. Your thoughts?

Hello everyone

I am curating a library of effects. It will have the how-tos, code snippets and related tutorials of effects for your web dev stack.

Will something like this be useful to you? I couldn't find any similar platforms. Do you know any?

Here's the landing page I made to validate the idea: Webgist

Feel free to roast it :)

Thank you!

0 Comments
2024/04/18
18:56 UTC

2

Help with design

Hi guys, can you guys help me design this nicer? Some constructive criticism would be appreciated :)

Note: the container in the landing page labelled Best Car For You isn’t it’s actual name and secondly, the container is translucent but my screen recording makes it appear white

4 Comments
2024/04/18
17:44 UTC

1

wavy transitions between sections

I created a tutorial on how to do wavy transitions between sections using SVGs and clip-path. Let me know what you think. https://youtu.be/nhpAi3hvy2o

0 Comments
2024/04/18
17:33 UTC

0

I have found these free alternatives for web hosting rather than expensive hosting

2 Comments
2024/04/18
13:24 UTC

2

Google AdSense's Intent Ads Styling

Google launched Intent Ads yesterday, and I'm testing them on my website. The Wordpress site is all in dark mode by default. Google displays a disclaimer at the bottom: "This site uses Google AdSense ad intent links." I don't mind it, but it's white and turns into an eyesore. I tried to add custom CSS to match the rest of the design, it doesn't seem to have an effect:

.ft-reg-bubble {

background: #111 !important;

color: #666 !important;

}

.ipr-container {

background: #111 !important;

color: #666 !important;

border-top: 2px solid rgb(0, 0, 0) !important;

border-bottom: 2px solid rgb(0, 0, 0) !important;

}

I added CSS in three places: my theme's (BeTheme) options where I usually add CSS, on the post level in the edit mode, and to the Additional CSS of Wordpress. Any suggestion on how to overwrite them, please?

0 Comments
2024/04/18
12:35 UTC

1 Comment
2024/04/18
10:08 UTC

2

Checkboxes aren't aligned in a grid

https://preview.redd.it/nn2fpk9907vc1.png?width=1696&format=png&auto=webp&s=2cf9203eace0cebdd3de3265ee2225d182ed190b

Hi! I'm working on a website for a project and I tried making custom checkboxes for an interest page, and so far I'm having trouble getting it to align in a 3x2 grid. I was watching a YT tutorial but just mine doesn't line up the same way lol. i tried changing display to grid instead of flex in a few places but it made no difference.
also on a different note: when an check box gets selected there is no change.

UPDATE(link to the HTML and CSS) : https://jsfiddle.net/ghostlyy/4xrw6nsk/

10 Comments
2024/04/18
07:46 UTC

1

Can you have too many CSS selectors per block in a CSS file? Do you write notes for each CSS selector is for?

Edit: I should provide an example. Here I have a bunch of selectors and I forget which elements a lot of these target. This makes refactoring and trying to improve lag more difficult

.list-bullet:after, .list-bullet:before, .snw-header-count-wrapper, input[type=checkbox]:checked:after,
.better-command-palette .better-command-palette-title, :is([data-callout*="no-title"], [data-callout*="quote"]) > .callout-title, #influx-react-anchor-div br, .markdown-source-view.mod-cm6 .cm-foldPlaceholder, .cm-line:not(.cm-active) .cm-hashtag-begin, .cm-active .cm-hashtag-end:before, .cm-hmd-codeblock .cm-indent:before, .popover.hover-popover,
.svg-icon:is(.help, .fa-Images, .lucide-mic, .dice), .markdown-source-view:not(.is-live-preview) span:has(.link-favicon, .link), .dataview.small-text::after, .dataview.small-text::before, .inline-embed + .cm-line .snw-reference, .cm-embed-block .snw-reference, .mod-fade:not(.mod-at-end):after, ::-webkit-calendar-picker-indicator, .better-command-palette .hidden-items-header, .internal-embed ~ .cm-widgetBuffer + .snw-reference, input[type=checkbox][data-indeterminate="true"]:not(:checked):after, .metadata-container:not(:has(.metadata-property:nth-child(4))) .metadata-add-button.text-icon-button, [data-callout="todo"] :is(.embed-title.markdown-embed-title, .block-language-dynbedded), .menu-separator, .menu .menu-item.is-label:first-child :after, .tooltip-arrow, .metadata-property-icon:before, .search-result-file-matches > div:not([class]), [data-callout="todo"] div:has(> .block-language-dataview), .suggestion-flair, .metadata-properties-heading {
    display: none !important;
}

My CSS has 3000 lines in it and some blocks have dozens of selectors for different elements, and I forget why I added them but always have a reason for doing so. I wonder if I should start writing down what elements each selector is for.

7 Comments
2024/04/18
04:22 UTC

2

Need Help With Title Formatting

4 Comments
2024/04/18
02:29 UTC

2

Can't find how to widen popup

Hello,

I've inspected the element on this website and looked all over the CSS, but I can't find how I can widen this popup. (screenshots below). This popup comes up after you click on "Add to Cart to See Discount". I tried:

.product-added.ui-dialog {

width: 1000px; /* Adjust the width as needed */

}

I've also tried "@media screen and (max-width:767px) {" and increasing 767pm to 1000 and that didn't work.

Can someone lead me in the right direction? Thank you.

https://preview.redd.it/f2vod14by4vc1.jpg?width=633&format=pjpg&auto=webp&s=aa994dc0ef635831dea8b5cf6cafe34f879381f6

https://preview.redd.it/nduh0tacy4vc1.jpg?width=1464&format=pjpg&auto=webp&s=86720bd229368fe71718ddabd816b368ca18c14d

3 Comments
2024/04/18
00:50 UTC

2

Link Component syling using MUI

can anyone what the code is about and how the css is implementing.

STYLED COMPONENT FILE

import { styled } from '@mui/material'
import { Link } from 'react-router-dom';

export const StyledLink= styled(Link)`
    text-decoration:none;
    color:black;
    &:hover {
        background-color:black;
    }
`;



ITEM FILES

return (
    <StyledLink to={`/chat/${_id}`} onContextMenu={(e)=>handleDeleteChat(e,_id,groupChat)}> 

      <div style={{
        gap:"1rem",
        display:"flex",
        position:"relative",
        alignItems:"center", 
        backgroundColor:sameSender? random3 : random2,
        color:sameSender? random2 : random3 ,
      }}>
        <Stack>
            // stack stuff
        </Stack>
      </div>
    </StyledLink>

random 2,random3 are colors in a seperate file

the main aim was to change color when I hover on the stack the background changes, when i click on the stack the page gets directed to "/chat/:id" and the color of the stack changes too

0 Comments
2024/04/17
22:20 UTC

20

CSS Art - Cat Animation 🐱

Hey Folks! I made this responsive animation only with CSS

Here's the code 💻

https://codepen.io/Jopzik/pen/yLGMzOK

https://reddit.com/link/1c6hz95/video/uwgr7m3v63vc1/player

4 Comments
2024/04/17
18:56 UTC

1

I want to put a button in the midle of a cell on a grid

heres the grid code:

.singleplayer{
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: auto auto auto auto;
grid-template-areas:
"Header Header"
"TituloTabuleiro Tabuleiro"
"TituloTempo Tempo"
"StartButton StartButton"
;
border: 20px solid rgb(255, 0, 0); /* Example border with black color */
}

Header{
grid-area: Header;
padding-bottom: 20px;
}

TituloTempo{

grid-area: TituloTempo;

}

Tempo{

grid-area: Tempo;
background-color: black;
text-align: center;
}

TituloTabuleiro{

grid-area: TituloTabuleiro;
background-color: aqua;
}

Tabuleiro{

grid-area: Tabuleiro;
}

StartButton{

grid-area: StartButton;
}
heres the scrollbutton code:

.dropdown {
position: relative;
  }
.dropbtn {
background-color: #4CAF50;
color: white;
font-size: 24px;
cursor: pointer;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}

TempoBTN{

padding-left: 10px;
padding-right: 10px;
text-align: center;
}

TabuleiroBTN{

padding-right: 20px;
padding-left: 20px;
text-align: center;
}
heres the HTML code:

<html> <head> <body> <a href="Menu.html"><button class="top-left-button">Voltar</button></a> <div class="center-content"> <div class="singleplayer"> <header><h1>Customizacoes</h1></header> <div id="TituloTabuleiro"> <h2>Tabuleiro</h2> </div> <div class="dropdown" id="Tabuleiro"> <form> <select class="dropbtn" id="TabuleiroBTN"> <option value="3x3">3x3</option> <option value="3x4">3x4</option> <option value="4x4">4x4</option> <option value="4x5">4x5</option> <option value="5x5">5x5</option> <option value="5x6">5x6</option> <option value="6x6">6x6 </option> </select> </form> </div> <div id="TituloTempo"> <h2>Tempo</h2> </div> <div class="dropdown" id="Tempo"> <form> <select class="dropbtn" id="TempoBTN"> <option value="0:10">0:10</option> <option value="1:00">1:00</option> <option value="2:00">2:00</option> <option value="3:00">3:00</option> <option value="4:00">4:00</option> <option value="Ilimitado">Ilimitado</option> </select> </form> </div> <div class="start-button-container" id="StartButton"> <div class="dropdown"> <a href="Grelha de jogo.html"><button class="shinybutton">COMEÇAR</button></a> </div> </div> </div> </div> </body> </html>

i have no idea what to do i already did text align center, align-items center but still nothing

1 Comment
2024/04/17
17:24 UTC

3

Question about :first-child pseudo-class.

Hello.

Why :first-child selector makes all text green in all of the paragraphs <p> when it's only supposed to apply the style to the element if it's the first child?

Thank you!

https://preview.redd.it/xjocdvcn41vc1.png?width=1917&format=png&auto=webp&s=e93bf4ff116b3e696deb4a2b22b7b683d2296a80

10 Comments
2024/04/17
11:59 UTC

1

Table width not working on one row

I have a table with fixed layout, it has two rows. In the first you can see the width is working as they are 50%-45%-5%. In the second row I tried to set it to 30%-20%-50% but it does not work. Why is that?

https://i.imgur.com/R690zIz.png

Thank you

3 Comments
2024/04/17
07:28 UTC

2

Hover boxes

I'm creating a site where the user can hover over a defined term that has been underlined and a box pops up with the definition. It seems to be working well with the exception that if the pop up box happens to be over another defined term that second term can be seen in the background of the box. Here's an example of my code:

<u><span class="definition\_pop\_up">Word<span class="definition\_content">Definition of word</span></span></u>

.definition_pop_up {

position: relative;width: max-content;padding-right: .25em;     

}

.definition_pop_up .definition_content {

display: none;position: absolute;

background-color: rgb(245,245,245,1.0);

padding: .5em;  }

.definition_pop_up:hover .definition_content

{display: block;  }

I've tried using opacity in different parts. I even tried changing the opacity of the definition_pop_up.

To be clear, it is only the other defined words that have their own pop up box that are showing through the pop up box which seems like a strange out come. Does anyone have any thoughts about this?

3 Comments
2024/04/17
05:23 UTC

7

I created a video with 12 demos to explain flexbox

So, I’ve been wanting to do this for awhile now, not only because I think flexbox can be a bit daunting for beginners but also because I think seeing demos is the best way to learn this stuff. So I used Framer.js to build some demos and then talked through them and explained them all in a video.

It’s not perfect, but it’s my most-watched video to date and a few people have said it’s been really helpful for them. Let me know what you all think! I’d love to hear any ways I could make these more helpful!

1 Comment
2024/04/17
00:38 UTC

2

Link — underline property

Hej, I wonder what is causing the difference in underline property for my a elements (links).

Link on desktop

I would like all my links on mobile be also with one underline only, and not having every word underlined separately. Anyone knows how to solve it? The styling happens on iPhone.

Link on mobile

5 Comments
2024/04/16
14:27 UTC

Back To Top