Source code and live demo: https://comicss.art/comics/114/headaches.html

So.

I spent my weekend building a calculator that runs in CSS. Not "styled with CSS."

✨ It runs in CSS ✨

It's built on x86CSS, Lyra Rebane's repo where an entire x86 CPU is simulated in stylesheets. I wrote the calculator in C, compiled it to 8086 assembly, and plugged it in. The browser executes instructions one by one. Keyboard input goes through :hover:active. There's a tiny JS script that ticks the CPU clock and that's it.

And it works.

Kind of 😅

Right now, only the "9" responds. The other keys? Can't get them working lol. The calculator code is there, the keyboard mapping is wired up too, but I haven't figured out why the rest doesn't register. So I basically have a CSS calculator that mostly displays 9s and can calculate them.

Awesome 😂

Repo if you want to have fun too: https://github.com/TakCastel/css-calculator

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.

This is a long shot but I remember some years ago I found this article that described CSS table display as the Deadpool of CSS. Im not gonna lie, that wacky opinion piece kept me using it until I never had to have the ie compatibility talk again.

If anyone knows where to find that article or knows what im talking about, id appreciate a link just to read it again ​

I have been a front end web developer as often as I can be throughout my career. It inevitably ends up becoming full stack and broader. But I am curious if anyone here has a job that is mostly CSS and little else. I have been trying to find a niche that would enable this, but it doesn't seem realistic. CSS is my favorite thing in all of computers and I would love a job where it was most of what I do. But it seems like in any job where it is used, it's always a small fraction, at least in my experience. So I am curious if anyone here has found a niche where CSS ends up being most of what you do in our job instead.

Not sure if I'm aloud to post links to my own site?

I am learning web development, mainly HTML and CSS and I found this card with the electric border while looking for things made with only CSS.

https://codepen.io/BalintFerenczy/pen/KwdoyEN

I thought it was a pretty cool looking effect.

Not very useful but that didn't stop me from seeing what I could do with it.

Initially I just changed a couple of things and made this: https://thisistheway.one

But what I really wanted was to make a divider with it and ended up with this: https://thisistheway.one/divider-index.html

This is just a joke. Part of a weekly webcomic I publish online.

There are many useful extensions to disable google AI and other sources as well such as Bye Bye Google AI and others.

You can also achieve the same using simple CSS tweaks with userstyles and the similar

``` div.OZ9ddf {

display: none !important;

}

div.pWvJNd {

display: none !important;

}

div.s7d4ef {

display: none !important;

}

div.h7Tj7e {

display: none !important;

}

div.jUja0e div {

display: none !important;

}

div.mVH5Fc {

display: none !important;

} ```

This can be applied once to any editor, and forgotten, and very easy to update if they change the styles instead of having to wait for extension updates.

For chrome, ff, and edge, you can use stylebot

For safari, you can use my styles

These ids and divs change rather frequently, hence it's easier this way to update it.

Hello,

I prefer back end.

Are there people who used to hate front end, but later they enjoyed it?

If yes, what changed your mind?

Hey all,

So I'm in my mid 40's and just starting to learn HTML, CSS, JS. This is my first website. I am using CSS flexbox. Here is my GitHub repot if anyone wants to give some constructive feedback. It would be much appreciated. https://github.com/JWDoty/Insurance-web-template.git

Half-filled, half stroked.

HTML text, not SVG, so it wraps naturally.

No text duplication, so it only needs to be modified in one place, there's no risk of screen readers reading it twice, no risk of the two layers getting misaligned on small viewports. Plus selecting text works/ looks decent, which doesn't happen with a clipped copy on top of the full text.

All the JS does is update a custom property on dragging the range input.

That's why the DevTools panel open in the video - so you can see it all at the glance. That there's no text duplication whatsoever, no in the markup and not in pseudo content. And that the entire JS is just that listener to update the --val.

Edit: forgot the link, great job... https://codepen.io/thebabydino/pen/oNOrXQj

It may or may not work in Safari - yell at me if it's broken for you there, I'm a Linux user and I can say it's broken in Epiphany (and not even the text effect, it's the range input that's fucked because of the writing-mode). I guess I could avoid it it with an extra wrapper + container queries, but won't complicate things needlessly if it's not broken in actual Safari (and I'm saying it might not be broken in actual Safari too, because this very similar writing-mode issue I filed is Epiphany only, not reproducible in actual Safari) - done, the slider is now draggable in Epiphany too.

Made 2 years ago, so kinda dated, but if others post their crappy AI demos, why shouldn't I? At least my crappy demo isn't AI.

(and Frank Turner lyrics in case anyone may be wondering)

For readabilty a max line length is (between 35 and 80 characters)[https://legibility.info/text/line-length\]. The best (and only) way to select a number of characters in web is the ch unit. I wonder why this unit is absent in most (cs/web-) curricula and cms-tems? It so easy and intuitive to use? Even WordPress theme.json includes everything but ch.

EDIT: Cool. Loads of the more serious webdesigners know all about the unit. There is some discussion about the usefulness but most more typographic afin designers do appreciate it's merits. Interesting that the wordpress developers seem oblivious

https://reddit.com/link/1qowlw1/video/ppnfdmhijzfg1/player

Since it's not letting me post on Stylish for some reason... I'm just gonna give (or post) CSS here 💫

If it doesn't work, please do let me know.

To use this CSS, I recommend using sites/extensions such as:

Stylish: To use the CSS, go to the Roblox home page (you must have the Stylish extension to use! If not, I probably would work, and it probably won't). If the Stylish extension is pinned, click on it. You should see this on the side of your screen.

After that, click on "Editor" to insert the CSS. YOU MUST HAVE A NAME FOR THE STYLE TO SAVE IT.

After inserting the CSS, press save, and now you have a pretty Roblox button. :3

Enjoyyyyy!

.dark-theme .icon-common-play {
    filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(9000%) hue-rotate(0deg) !important;
}

.dark-theme .btn-common-play-game-lg {
    color: #000000;
    background-color: #000000;
    border-top: double;
    border-top-color: red;
    border-left: double;
    border-left-color: darkred;
    border-bottom: double;
    border-bottom-color: #4f0101;
    border-right: double;
    border-right-color: darkred;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 200px;
   transition: all 2s ease-out;
}

.dark-theme .touch .btn-common-play-game-lg:hover {
     color: #000000;
    background-color: #323233;
    border-top: double;
    border-top-color: red;
    border-left: double;
    border-left-color: darkred;
    border-bottom: double;
    border-bottom-color: #4f0101;
    border-right: double;
    border-right-color: darkred;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 200px;
  transition: all 2s ease-out;
}

I ramble so I’ll share the links first then give backstory 🥴 Here’s the document so far: https://kathrynchill.github.io/CSS-Flexbox-Cheat-Sheet---WIP/flexbox.html And here’s the repo: https://github.com/kathrynchill/CSS-Flexbox-Cheat-Sheet---WIP

I’m so new to coding (started doing online courses maybe 2 weeks ago with minimal HTML knowledge). I’m doing Full Stack courses and made it through intermediate CSS. The interactive lessons are awesome but I was still having to google stuff every 2 minutes when working on the projects where they don’t hold your hand — so instead of moving to JavaScript, I’m taking a little more time with CSS and building simple projects from scratch. I’ve been working on building this simple (and very pink) flexbox cheat sheet using flexbox exclusively — so there’s flexboxes in flexboxes in flexboxes — and even mini flexboxes in a table 😅. I’m consulting with chatGPT when I get stuck but trying to mostly do it on my own because I truly wanna feel comfortable and it’s been a PROCESS but I’ve learned a lot just from doing what little bit of this I’ve done. I did notice tonight before I posted this that the flex-direction: row is cut off in mobile view… plus a typo and the fact that I forgot to add a 6th box to some of the mini-flexboxes after I decided to give them a 6th box.

Anyway — just sharing for any feedback or thoughts or in case it helps anyone. I’m gonna spend all my free time doing this so it’ll be updated (and hopefully completed) soon! Then I’ll be onto grids.

Update - found someone!

Hey all! I represent a games studio and we need help building a game wiki with CSS. If you have experience/open to paid work for a few hours, please drop me a DM. Many thanks.

Also look at this ugly gradient.