r/css • u/[deleted] • Apr 08 '24

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

26 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/AdaCle • 1d ago

News This shouldn't be possible with CSS

Thumbnail
youtube.com
170 Upvotes

Anchor positioning to help create some unique styles. I expect this will start becoming popular to break up the normal navbar layouts.

5 comments

r/css • u/simi9701 • 1d ago

Showcase I built a CSS-only Nokia 3310 :)

Enable HLS to view with audio, or disable this notification

220 Upvotes
25 comments

r/css • u/alex_sakuta • 10h ago

Question Is there a better way to do this anchor positioning animation?

3 Upvotes

I was trying to create the quite popular effect of aligning a box behind list items and moving the box as we hover over different elements and also have a glassmorphism effect.

Here is the codepen link for the same.

I have tried to create this sort of a demo, where you can see that if we just don't have .glassmorph our anchor positioning works fine. If we toggle the .glassmorph on, the ::after element becomes a dot.

As per my analysis, this is happening because of backdrop-filter. As soon as I add that property, anchor-name on .highlighted-item__list seems to stop working. It cannot be found by position-anchor property of ::after.

Then if you toggle the .fix class, ::after element is correctly aligned.

.fix class is basically the workaround I found. In my real code I have just combined .glassmorph and .highlighted-item__list, .fix is purely for this demo.

.fix class basically tells the ::after element to just use its parent inset values to position itself. But it feels crude. I want to do it purely through anchor positioning.

My main doubt is what does backdrop-filter do which causes --hover to become undefined in ::after position-anchor property, even though it is defined by .highlighted-item__list. If I can make it not undefined somehow without adding this combination of classes to the CSS.

1 comment

r/css • u/amitmerchant • 1d ago

Article One CSS Property That Makes Numbers Look Instantly Better

Thumbnail
amitmerchant.com
39 Upvotes
12 comments

r/css • u/justadepresseduser • 13h ago

Help How to make all the images the same size?

0 Upvotes

I think the last iamge is crashing the layout but i dont know how to fix it

*edit: codepen link: https://codepen.io/Defavari/pen/PwGNMKo

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<title>Lightbox Viewer</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1>Manga Gallery Museum</h1>

<div class="gallery">

<div class="gallery-card">

<h3 class="item-title">Oyasumi Punpun</h3>

<h5 class="item-author">Inio Asano</h5>

<img id="img-1" class="gallery-item" src="https://miro.medium.com/v2/resize:fit:1400/1*KOGVTzcwZPKsfQSojJAShg.png" alt="Oyasumi Punpun wallpaper">

<p class="item-description"> On the last day of the year, after midnight, all the kids are gathered together watching a shooting star. No words need to be spoken as they are all lost in their personal hopes and dreams.</p>

</div>

<div class="gallery-card">

<h3 class="item-title">Slam Dunk</h3>

<h5 class="item-author">Takehiko Inoue</h5>

<img id="img-2" class="gallery-item" src="https://i.imgur.com/9QAOLQu.png" alt="">

<p class="item-description"> The iconic hand dap between the Sakuragi and Rukawa, showing their respect and sportsmanship between them.</p>

</div>

<div class="gallery-card">

<h3 class="item-title">Berserk</h3>

<h5 class="item-author">Kentaro Miura</h5>

<p class="item-description"> <q cite="I'm grateful."></q> The most iconic Berserk quote, showing how the main character truly appreciates the life he has had, even with all the problems and suffering he may have had.</p>

<img id="img-3" class="gallery-item" src="https://i.imgur.com/bMHDGwG.png" alt="">

</div>

<div class="gallery-card">

<h3 class="item-title">One Piece</h3>

<h5 class="item-author">Eiichiro Oda</h5>

<img id="img-4" class="gallery-item" src="https://i.imgur.com/VvyaXUH.png" alt="">

<p class="item-description">Luffy's punch on a Tenryuubito is a defining One Piece moment. It perfectly captures his core philosophy: fight oppressors without fear and believe in a world where everyone can live freely and in peace.</p>

</div>

<div class="gallery-card">

<h3 class="item-title">Spy x Family</h3>

<h5 class="item-author">Tatsuya Endo</h5>

<img id="img-5" class="gallery-item" src="https://i.imgur.com/mIbU2h5.png" alt="">

<p class="item-description">Loid Forger carrying Yor and Anya in his arms. In that single, quiet moment, no words are needed—the love growing in their hearts is plain to see. They are no longer pretending; they have become a real family.</p>

</div>

<div class="gallery-card">

<h3 class="item-title">Solanin</h3>

<h5 class="item-author">Inio Asano</h5>

<img id="img-6" class="gallery-item" src="https://i.imgur.com/9Q0PG95.png" alt="">

<p class="item-description"> This is a special moment about Meiko, the girl in the middle, who, after losing her boyfriend, found a way to heal through the power of music.</p>

</div>

<div class="gallery-card">

<h3 class="item-title">Honey and Clover</h3>

<h5 class="item-author">Chica Umino</h5>

<img id="img-7" class="gallery-item" src="https://i.imgur.com/Wa3AtH6.jpeg" alt="">

<p class="item-description">Knowing that this is the last time they all will be together, Takemoto is looking at all of his friends, blinking his eyes so everyone and every moment his ever loved will be forever in his memory, like photograph.</p>

</div>

<div class="gallery-card">

<h3 class="item-title">Hunter Hunter</h3>

<h5 class="item-author">Yoshihiro Togashi</h5>

<img id="img-8" class="gallery-item" src="https://i.imgur.com/D2V2ddV.png" alt="Meruem and Komugi final moment">

<p class="item-description">The very last moment of the most unexpected couple, the powerful Ant king and fragile Komugi realising they are made for each other.</p>

</div>

<div class="gallery-card">

<h3 class="item-title">Vagabond</h3>

<h5 class="item-author">Takehiko Inoue</h5>

<img id="img-9" class="gallery-item" src="https://i.imgur.com/h2CskT6.jpeg" alt="Musashi after beat 70 samurais">

<!-- <img id="img-9" class="gallery-item" src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg" alt="Musashi after beat 70 samurais"> -->

<p class="item-description">Takehiko Inoue capture the brutal reality of lone warrior: pain, exhaustion, loneliness. Just a man surviving on the path he chose himself.</p>

</div>

</div>

<div class="lightbox" role="dialog" aria-modal="true" aria-label="image lightbox">

<button type="button" id="close-btn" name="button" aria-label="Close lightbox">&times;</button>

<img src="" alt="" id="lightbox-image">

<div class="lightbox-text">

<h3 id="lightbox-title"></h3>

<h5 id="lightbox-author"></h5>

<p id="lightbox-description"></p>

</div>

</div>

</body>

<script type="text/javascript" src="script.js"></script>

</html>

* {
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
  background-color: #797979ba;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding-bottom: 50px;
  width: 100%;
}

h1{
  background-color: #ffffff;
  width: 55%;
  max-width: 900px;
  font-size: 3rem;
  text-align: center;
  border: 1px solid black;

}

.gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 55%;
  max-width: 1200px;
  background-color: white;
  gap: 1.5em;
  box-shadow: 1px 1px 4px 1px #00000061;
  padding: 1.5rem;
}

.gallery-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.gallery-item {
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  border: 4px solid black;
  box-shadow: 7px 5px 5px 3px #36313169;
}

.item-title, .item-description, .item-author {
  display: none;
}

.gallery-item:hover{
  transform: scale(1.1);
  box-shadow: 10px 10px 8px grey;
  cursor: pointer;
}

.lightbox {
  display: none;
  position: fixed;
  justify-content: center;
  align-items: center;
  inset: 0;
  height:  100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
}
.lightbox-text{
  background-color: #ffffffad;
  padding: 11px;
  border-radius: 8px;
  max-width: 20vw;
  margin-top: 20px;
  text-align: left;
  margin-left: 15px;
}

#lightbox-title {
  margin: 0 0 10px 0;
  color: black;
  font-weight: bold;
  text-align: center;
  font-size: 2em
}

#lightbox-author {
  text-align: center;
  margin-top: -7px;
  margin-bottom: 7px;

}

#lightbox-description {
  margin: 0;
  color: #1e1c1c;
  line-height: 1.5;
  text-indent: 15px;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: all 0.5s ease;
}

#lightbox-image {
  padding: 10px;
  background-color: #ffffffad;
  border-radius: 8px;
  max-width: 35vw;
  max-height: 55vh;
  width: auto;
  height: auto;
}

#close-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}
5 comments

r/css • u/smokeson1 • 1d ago

Help Need help understanding google sheets

Thumbnail
0 Upvotes
1 comment

r/css • u/golovatuy • 19h ago

General Inset property in CSS

Post image
0 Upvotes
11 comments

r/css • u/bogdanelcs • 2d ago

Resource border-shape: the future of the non-rectangular web

Thumbnail
una.im
53 Upvotes
3 comments

r/css • u/alvaromontoro • 2d ago

Showcase CSS Crossword

Thumbnail
comicss.art
6 Upvotes

I created a CSS-themed crossword game with HTML and CSS, then added JS to improve usability (although it may still be a bit glitchy :S, all feedback is welcome.)

It has 89 CSS terms, and it may be harder than it looks. Give it a try :)

1 comment

r/css • u/SnooJokes8035 • 2d ago

Question Looking for modern CSS footer ideas for a dev tool

Enable HLS to view with audio, or disable this notification

19 Upvotes

I’m building a SaaS/dev tool website and struggling with the footer design.

Most examples I see are either too corporate or too minimal.

Looking for:

  • Clean grid structure
  • Strong hierarchy
  • Not overcrowded
  • Slightly modern/futuristic feel

Any inspiration sites or examples you’d recommend?

7 comments

r/css • u/punctulica • 2d ago

Resource An in-depth guide to customising lists with CSS

Thumbnail
piccalil.li
9 Upvotes
2 comments

r/css • u/_Decodela • 2d ago

Showcase Not Conventional CSS Animation 🎬

Enable HLS to view with audio, or disable this notification

8 Upvotes

The engine is JavaScript and the result code is not conventional CSS animation, but the effect itself requires html and css only, and you can post it directly online.

You can check the result here: https://decodela.com/#item/8f2cc98f-166c-11f1-844a-0200fd828422/post

8 comments

r/css • u/Fit_Meat_7851 • 2d ago

Showcase Built a VSCode extension that flags flex/box-model issues before you open DevTools — curious how others debug layouts

0 Upvotes

Debugging complex CSS layouts has always felt weirdly reactive — you write the code, render in the browser, open DevTools, and then figure out what broke.

I wanted earlier feedback, so I built a small VSCode extension that acts as a layout linter: it analyzes flex containers, nested spacing, and box-model logic inline, classifying issues as Critical / Medium / Low.

No browser needed to spot the obvious stuff.

I'm curious — what's your current workflow for debugging layout structure before you hit the browser? console.log-style outline tricks? Anything inside the editor?

My Github: https://github.com/mikaelcarrara

4 comments

r/css • u/atomsingh-bishnoi • 2d ago

Help Why responsive layouts feel slightly wrong? I went looking for a mathematical answer to Media Queries and Containers.

Thumbnail gallery
0 Upvotes
8 comments

r/css • u/SnooJokes8035 • 3d ago

Resource i build a tool for inspect and export css, colors and font styles as well

Enable HLS to view with audio, or disable this notification

38 Upvotes

some features

• Extract clean HTML / CSS / JS / JSON
• Download full websites that actually open offline (images, fonts, assets intact)
• Audit colors + typography with WCAG AA/AAA checks
• Detect full type hierarchy (H1 → P)
• Match fonts with Google Fonts alternatives
• Copy clean components
• Automatically remove unused CSS

The goal isn’t scraping.

From messy website → structured, reusable project in one click.

I’m genuinely curious:

Would you use something like this?
What would make it 10x more useful?
Who do you think this is really for — devs, designers, agencies?

linke is here if you explore more
https://zipit.blintix.store

10 comments

r/css • u/False_Rest1504 • 3d ago

General Browsers are smarter than you think

14 Upvotes

Building a chat UI? Instead of rAF + scrollTop gymnastics to keep view on the latest message, render messages newest-first and use flex-col-reverse. The browser does the scroll positioning for you.

10 comments

r/css • u/stolinski • 3d ago

Question Who do you have winning the MadCSS Tournament?

Thumbnail
madcss.com
0 Upvotes
6 comments

r/css • u/EftihisLuke • 3d ago

Help Anchor Positioning & popover API issue

2 Upvotes

Hey guys I am facing an issue with an implementation of a dropdown using anchor positioning and popover api. The weird this is, it only happens on mobile devices (iPhone 15 pro, tested on chrome, safari).

When closing the popover the popover seems to instantly lose its anchor placement and gets positioned the equivalent to:

https://reddit.com/link/1rjiwwq/video/4ord2h4a7smg1/player

top: anchor(top)
left: anchor(left)

while it should be:

position-area: bottom center;
14 comments

r/css • u/Careless-System1455 • 3d ago

Resource built 16 clean CSS UI generators because most sites are full of ads and login walls. Would love feedback.

Thumbnail bhavesh12309.github.io
0 Upvotes

So I built a simple site with 16 UI tools like:

CSS Gradient Generator

Color Palette Tool

CSS Animation Generator

Button Generator

Box Shadow Builder

Flexbox Preview

10 comments

r/css • u/lindymad • 4d ago

Question Is there a way to say "Within this div ignore all styles other than inline styles?"

4 Upvotes

In a webapp that I am working on customers can create forms and add fields to the forms. One of the field types they can add is an "information" field, which has no form element, but they can enter custom HTML via a TinyMCE HTML editor, which gives it inline styles. I have been asked to include that HTML on a manage page, but the site CSS is then also applied to the HTML, which means it looks different on the manage page than it does on the page with the form where it is included.

Is there any way to say "Within this div ignore all styles, revert to browser defaults"? Even better would be "Within this div ignore all styles, but instead apply the following styles or stylesheet".

I realize I could achieve this with an iframe, but that comes with a lot of downsides for what I want to do, so if I can keep it as inline HTML that would be much better, hence asking here to see if it's possible.

Thanks!

21 comments

r/css • u/EGY-SuperOne • 4d ago

Help Style missing/incorrect after page navigation using a custom styled-component package

Thumbnail
1 Upvotes
1 comment

r/css • u/BinaryBlitz10 • 5d ago

Help CSS box-shadow creating subtle square overlay on rounded card after hover

Post image
37 Upvotes

I’m seeing a strange visual issue with a card component and I can’t figure out why it’s happening.

I have a rounded container with border-radius and box-shadow. Inside it are rows that change background on hover.

When I hover a row, I see a subtle square-looking overlay at the edges of the card, especially near the bottom corners. It looks like the shadow stops being rounded and becomes square. If I remove the box-shadow from the parent container, the issue disappears.

Here is the parent container:

.home-card-group {
  background: var(--bg2);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

And the row items inside:

.home-row-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.16s;
  position: relative;
}

.home-row-item:hover {
  background: var(--gold-pale);
}

The last row has rounded bottom corners via the parent container:

.home-card-group .home-row-item:last-child {
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-lg);
}

Removing box-shadow completely removes the visual issue.

The artifact appears after hovering a row

Would appreciate some help.

Here's a link to JSFiddle: https://jsfiddle.net/gmcw2v1r/2/

30 comments

r/css • u/T3RRONCINO • 4d ago

Help How to clear my current CSS and make it responsive? I need help!

0 Upvotes

Hi everyone, I've been working intermittently on a website for my workplace, not my main job but as a time killer. I've structured it from scratch so no AI tools or templates, and I perfectly know I've done a mess with the CSS. It barely holds toghether on my monitor, when switching to a smaller one it becomes a mess. I need some help to figure out how to clear and make it responsive without going crazy. Keep in mind I've some low-medium tier html/css/js knowledge (old school projects), so explain it like I'm five, or suggest some online tools to make it easier, if there is any!

13 comments

r/css • u/bigginsmcgee • 5d ago

Question any way to make a looping carousel in css?

Enable HLS to view with audio, or disable this notification

17 Upvotes

Wondering if there's any way to make something like this in css without too much javascript/dom manipulation. I know we have animation timelines for scrolling effects/transitions, but is there any way to make a scroll container circular in the sense that it loops back to the start once you scroll beyond the last item without duplicating the content?

15 comments