SoatDev IT Consulting
SoatDev IT Consulting
  • About us
  • Expertise
  • Services
  • How it works
  • Contact Us
  • News
  • November 6, 2023
  • Rss Fetcher

If you ever need some inspiration for buttons, definitely check out Lucas Bonomi’s buttons.cool. This is a better-than-it-needs-to-be one-off site just for beautiful buttons:

But it’s not just a design gallery, it’s made for front-end developers in that you can see the code, see them being live-rendered right on the page, and of course, the best part is you can pop right over to CodePen for a look.

Looks like it’s taking submissions.


How hard is a Dark Mode to pull off? Or perhaps more accurately, how hard is it to pull off a second color mode? Some of us have dark-mode-first websites, ya know.

I thought Wes Bos phrased the question well:

Question for those who have implemented light/dark mode: how much is just swapping out variables, and how much is custom code, and tending to edge cases?

I answered: fiddy fiddy.

In the new version of CodePen we’re working on, we will have a site-wide theme setting (which is separated from what syntax highlighting theme you choose). CodePen being a pretty complex site, it involved quite a bit of CSS custom property setting. So in a sense, it was mostly just “swapping out variables”, but quite a few of those variables exist just because of different color modes, most of which I might even call an “edge case”. For us: north of 100 south of 200. I found this to be challenging but ultimately a fair approach.

Sometimes you see ideas going around of how simple it could be. For instance, he’s Akhil Arjun saying it can be done in one line:

html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

And here’s Mads Stoumann with a totally different 3-line approach:

body {
  background-color: Canvas;
  color: CanvasText;
  color-scheme: light dark;
}

While I appreciate a good CSS trick and these are good things to know about, I’m going to go ahead and say these super minimal approaches probably aren’t going to get you very far. You’re going to want better control than this and you’re going to need to deal with those edge cases.


Now that we have such powerful layout tools in CSS (keep ’em coming, CSS!) — it’s fun to see little layout situations that look fairly simple but are still a little challenging. Tyler Sticka ran across one he calls Tricky Floating Image Alignment. The idea is to have some text that is center aligned with an image, but if the text grows larger than the image, use the behavior of float.

I liked the solution in the end. It’s a throwback to the way we used to be able to vertically center stuff with top: 50%; transform: translateY(-50%). This will do the centering nicely, but when the text is bigger than the container, they essentially cancel out and so essentially do nothing.


Here’s another tricky layout situation, this time involving newfangled HTML and CSS features, namely anchor positioning. (Think of it as positioning an element based on another arbitrary element’s position.) Eric Meyer blogged it as Nuclear Anchored Sidenotes.

Imagine a footnote, except on a large enough screen, it’s more like a sidenote. That is, the note goes into empty sidebar space at the exact line that the footnote marker appears on. But to really pull this off, you’re using anchor positions of multiple elements:

Yes, I’m anchoring the sidenotes with respect to two completely different anchors, one of which is a descendant of the other.  That’s okay!  You can do that!

I did not know you could do that, but I like it.

top: anchor(top); /* implicit anchor */
left: anchor(--main right); /* named anchor e.g. anchor-name: --main; */

I only just heard of the CSS round() function the other day. It takes a value and rounds it. Ha.

line-height: round(2.2, 1); /* 2 */

I was blogging it with a number of other CSS functions I’d never heard of. Try this demo in Firefox to see a pretty clear example of why it could be cool. Of course Dan Wilson is all over it with a much more comprehensive look in The New CSS Math: round(). Dan looks closely at the syntax, sharing how you pass in not just a value, but the interval by which you want to do the rounding. Then optionally, even a “rounding strategy” if it’s important to you how that is done.

I feel like this falls into the category of “interesting layout related thing that would have been hard or impossible before but now isn’t.” Or at least “we’d probably have to do this in JavaScript before but it actually makes more sense in CSS.”


Looks like we’re going to get scrollbar-color and scrollbar-width across all browsers for real now. That’s the “real spec version” of doing this, instead of the more-capable (get gone-wild) WebKit styles of old. I wish it was more capable, but I’ll take standards over that any day.


While I’m still on this kick of “difficult CSS layout things”, you gotta see this Pen from Alex Riviere that handles this curved grid.

What’s striking to me about this is how… not weird it looks. It’s like if you were standing in a glass elevator going down and looking at these blocks, that’s just how they would look. But in order to pull that off while scrolling, some relatively exotic transform action needs to happen on them, which even involves new trigonometric functions in CSS (along with a scroll-timeline, which you can see has a fairly simply polyfill in this case).

Go take a peek at that CSS. The transforms are just a few lines, but wow that’s fancy.

Previous Post
Next Post

Recent Posts

  • Week in Review: Why Anthropic cut access to Windsurf
  • Will Musk vs. Trump affect xAI’s $5 billion debt deal?
  • Superblocks CEO: How to find a unicorn idea by studying AI system prompts
  • Sage Unveils AI Trust Label to Empower SMB’s
  • How African Startups Are Attracting Global Fintech Funding

Categories

  • Industry News
  • Programming
  • RSS Fetched Articles
  • Uncategorized

Archives

  • June 2025
  • May 2025
  • April 2025
  • February 2025
  • January 2025
  • December 2024
  • November 2024
  • October 2024
  • September 2024
  • August 2024
  • July 2024
  • June 2024
  • May 2024
  • April 2024
  • March 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • September 2023
  • August 2023
  • July 2023
  • June 2023
  • May 2023
  • April 2023

Tap into the power of Microservices, MVC Architecture, Cloud, Containers, UML, and Scrum methodologies to bolster your project planning, execution, and application development processes.

Solutions

  • IT Consultation
  • Agile Transformation
  • Software Development
  • DevOps & CI/CD

Regions Covered

  • Montreal
  • New York
  • Paris
  • Mauritius
  • Abidjan
  • Dakar

Subscribe to Newsletter

Join our monthly newsletter subscribers to get the latest news and insights.

© Copyright 2023. All Rights Reserved by Soatdev IT Consulting Inc.