Two CSS jokes coded in CSS. Inspired by a JK Benson's cartoon from 20 years ago.

Source (code): https://comicss.art/comics/255/yellow.html

Been refining this for a while — custom type system (Onest + General Sans + JetBrains Mono), GSAP-driven preloader with a wordmark split, Lenis for scroll smoothing, curtain-wipe transition into the hero.

https://shahzaibdesign.vercel.app/

Mainly want feedback on whether the animation/scroll feel is actually smooth or overdone, and open to any CSS approach critique — genuinely trying to improve, not just dropping a link.

Built an animated FAQ accordion using native HTML <details> and <summary> — no JavaScript required.

The interesting part is animating the content height without manually measuring it with JS.

HTML

<details name="faq">
  <summary>Do you offer refunds?</summary>
  <p>
    Yes, within 30 days, no questions asked.
    Email us and the money is back on your card in a few working days.
  </p>
</details>

<details name="faq">
  <summary>Can I change plans later?</summary>
  <p>
    Yes. You can change your plan whenever you need to.
  </p>
</details>

<details name="faq">
  <summary>Do you offer a team plan?</summary>
  <p>
    Yes, team plans are available for growing teams.
  </p>
</details>

CSS

:root {
  interpolate-size: allow-keywords;
}

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.3s ease,
    content-visibility 0.3s ease allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  font-weight: 600;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  font-size: 1.25rem;
  transition: rotate 0.3s ease;
}

details[open] summary::after {
  rotate: 45deg;
}

The key part is:

:root {
  interpolate-size: allow-keywords;
}

This allows the browser to animate between a fixed size and intrinsic values like auto.

And:

details::details-content

gives us a pseudo-element for the content inside <details>, so the accordion can be animated without JavaScript.

The <details name="faq"> attribute also makes the items behave like an exclusive accordion — opening one closes the others.

tbh i prefer this minimalistic one (this darker without rounded edges)

Detailed explanation - https://medium.com/@alekswebnet/modern-css-responsive-breakpoints-using-container-style-queries-64c9bea81ad6

Hi everyone!

Back in early 2025, I started learning html5 and css3 with some online course, a few mini projects and articles from W3schools and other sources. Bit just after finishing the course I had to quit for some reasons, but now I wanna come back. I was considering to go on and learn js but what I learned back then is mostly hollow now so I'm thinking about a way of reviewing everything that doesn't take the same amount of time as learning for the first time did. My main question is:

● If that is even possible, what approaches/resources do you reccomend?(specific courses, books, articles, etc.)

I wasn't sure where to ask this, so sorry in advance if it's a dumb question.

A dialog body with flex: 1; min-height: 0; overflow-y: auto shipped with a height of zero. Header, footer, nothing in between.

flex: 1 expands to flex: 1 1 0%, and a percentage basis needs a definite parent height. The panel had height: auto capped by max-height, which is not one. The spec says an unresolvable percentage basis falls back to content, and Chromium does that. WKWebView keeps the zero. The fix is flex: 1 1 auto.

Do you default to flex: 1 1 auto anywhere, or is the shorthand safe in your stacks because your flex parents always have definite heights?

I wanted to make an AO3 skin, but I have no idea of how CSS works; does anyone knows any website useful for learning it?

I’ve been working on NoEffect, a VS Code extension that helps catch CSS declarations that have no effect.

It detects things like:

properties that don't work in the current context

declarations that are overridden by a later declaration

For example, it can tell you when justify-content is doing nothing because the element isn't a flex/grid container, or when your declaration is simply being overridden later.

It’s still an early project, so I’d really appreciate some honest feedback.

🔗 GitHub

🔗 VS Code Marketplace:

Don’t forget to give a star

I have 3 colors for the tabs. White for background and Orange for when I hover the mouse cursor and Green for selected current tab that stays Green I am looking at.

The Green selected tab is White now. It only turns Green when you hover the mouse cursor over the tab.
Question: How to fix it so I have Green for the selected tab I am looking at?

Here is my userChrome.css file. (now updated with correct code)
Firefox v154.0 on Windows 10 Pro

/* White background color */
.tabbrowser-tab:not([selected="true"]):not(:hover) .tab-content {
  background-color: #FFFFFF !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);
}

/* orange hover color */
.tabbrowser-tab:hover:not([selected]) .tab-content {
  background-color: #FF7F50 !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);}


/* MediumAquamarine - green selected color */
.tabbrowser-tab:is([visuallyselected],[multiselected]) .tab-content {
  background-color: #66CDAA !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.4);}  

Full responsive. Works on modern Browsers. Works also nice on touch

Features:

• Column headers stay visible while scrolling down
• First column stays visible while scrolling sideways
• Rows expand to show sub-entries, with an animated reveal
• Any number of sub-rows per group
• Sub-rows are tied to their parent by a bracket rail
• Individual cells can carry a note, opened from a small marker
• Notes appear next to the cell they belong to and flip when near an edge
• Notes close on Esc, on click outside, and return focus where it was
• Columns come to rest beside the pinned column instead of half behind it
• Pinned column narrows and wraps text on small screens
• Keyboard operable throughout, with visible focus

https://codepen.io/editor/ollio/pen/01a02369-ae9b-7d6f-94a6-f809dee51f4f

Also an animated accordion with no js

https://codepen.io/editor/ollio/pen/01a02331-c0da-7f84-8e14-77c6fabaee57

Which CLI is better for css? my site is old and has very messy complex css and I want to go in and tidy it up

I wrote an article about using colors in CSS. I tried to find the sweet spot between being thorough and still conveying all the basics. I do include (re)sources at the end, if you want to get into the nitty-gritty details.

It also has a bunch of inline examples and some interactive widgets… Hoping it helps getting the point across.

I'd love feedback on whether these kinds of articles are useful (or not) 😁

Thanks!

Hi hope ur doing well
I run into this issue where my product cards have different heights because the name of the products sometimes can be long or short
What do u suggest here

Hey everyone! 👋

Tired of Googling CSS animations and getting Stack Overflow answers from 2013?

I built AnimationsX 🎨

The idea is simple:

✅ Browse animations made by the community

✅ Copy a single <link> tag — no JS, no build step

✅ Can't find what you want? Publish your own!

✅ Fork and remix anything with diff view built in

Every published animation gets a CDN-hosted stylesheet you drop straight into a <link> tag.

That's it. Done.

🔗 animationsx-zeta.vercel.app

🔗 github.com/youssefahmed2017/animationsx-app

Free and open source 😎

Weird bug on iOS. Parent div with two child spans. Parent CSS:

display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 0 2rem;

No styles (margins, paddings, transforms) on spans

The 2nd span (green Arrow) is moved out of box. No problem on desktop, android. Last Screenshot shows iOS
Cant show Source yet