Css

I can’t believe I only just discovered that the designer of the Star Trek UI style (known as LCARS) created a css framework for it: LCARS Website HTML Template Now I just need something to build with it…

I’m working on a legacy project that’s stuck on v3 of bootstrap and just loads the full minified css file. We wanted to make it a bit easier to override some of the builtin styles and figured that the new @layer feature of CSS would be perfect. I didn’t want to change too much about the stylesheets were aren’t and thankfully it turns out you can import a stylesheet into a layer: ...

Scroll-driven Animations Some really cool demos on this site.

una.im | Creating a scroll-spy with 2 lines of CSS

Friends at Last: Tailwind & CSS…whodathunkit?!

Pokémon Cards CSS Holographic Effect This shows some super impressive effects you can do with CSS! via

How to Keep Up With New CSS Features This is nice list of resources to follow if you want to keep up to date with all the latest CSS features. via

Today I learned about the new view transitions API and I was pretty impressed with how much of the heavy lifting the browser will now do for you to animate between states. Adam Argyle has a fun talk where he shows what you can do with this new API. I only had to add a couple of lines of javascript to animate reordering a list of items that would have required a more complicated technique like FLIP (first last invert play) in the past.

Today I learned about the new :has() selector in CSS. It’s also referred to as the “parent” selector and that’s probably the most straightforward use case but this post shows several cool use cases. I used it today when I needed to apply a style to a shared root element but only on a specific page, but all of the styles are bundled into a single CSS file that’s loaded on every page: ...

Today I learned that the viewport units in CSS don’t account for the width of visible classic scrollbars like on Windows. This means that if you use width: 100vw to make an element the full width of the page and then a scrollbar appears, it will cause the element to overflow (by 17px which is apparently the width of Windows scrollbars) and create a horizontal scrollbar. CSS media queries don’t take them into account either, so if the viewport width is close (say within 17px) of a breakpoint then the appearance of a scrollbar will cause it to cross that threshold. ...