Thursday there'll be the next #IndieWeb #FrontEnd Study Hall (Number 024!) where we have lively conversations investigating, troubleshooting, upgrading, fixing, and learning HTML and CSS and related stuff. https://events.indieweb.org/2025/03/front-end-study-hall-024-j8dtucnWT7Iz
Welcome to a new week in 2025. Pages for #btconf Berlin with first speakers and tickets are online. Find everything here and stay tuned for more!
I pushed that CSS hologram effect experiment a bit more, now with 7 new images + gradients.
The effect doesn't work on iOS Safari (It doesn't play nice with background-position: fixed;) so I've attached a video too.
CodePen: https://codepen.io/HejChristian/full/YPzLbYX/4403478dc2c73307336a426ee5e3cc38
#tinyCSStip
Revert animated parent transform (like a scale or skew) on child without an extra animation using registered custom properties.
#cssWish That we could have a zero count for the number of columns in `repeat()`.
That repeat count is often computed. Let's say I want double the width for selected column k out of n columns:
```
repeat(var(--k), var(--w))
calc(2*var(--w)
repeat(calc(var(--n) - var(--k) - 1), var(--w))
```
Why do people default to React and JavaScript for front end and UIs?
As a backend developer whose frontend experience is mostly from using Phoenix and Django, which utilize server-side rendering, I’m wondering why most people choose React and JavaScript as the “default” frontend solution, even for pages and SaaS products that don’t really benefit from any additional client-side interactivity.
I'm looking for a Frontend Developer that can turn a Figma design into a couple of static HTML/CSS pages.
I wanted to do it myself, but time seems to be a very limiting factor.
DM me here, or send me an email at jorijn@jorijn.com.
It used to be quite challenging to set the precedence of individual #CSS rules without a lot of headaches. (This encouraged the practice of authoring many small utility classes that do very little on their own.)
Thankfully, that’s no longer the case. Here’s a simple example: https://cloudfour.com/thinks/cowardly-defaults-and-courageous-overrides-with-modern-css/
Hi, mastodon 
I have a new article out!
A Deep Dive into the Inline Background Overlap Problem: https://frontendmasters.com/blog/overlapping-inline-backgrounds/
How do you get the below result (semi-transparent background on inline span) with large padding & no overlap?
Answer in article, but think a bit about it first. 
Ever wanted to get the number of auto-fit columns in CSS?
```
--u: 5em;
grid-template-columns: repeat(auto-fit, minmax(var(--u), 1fr))
```
It's now possible! Using registered #CSS vars, the tan division hack and container query units! Here's a little test on @codepen:
https://codepen.io/thebabydino/pen/JojpBJr
Because I saw a @codepen demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...
Here's a super simple modern #CSS grid + clip-path + mathematical functions responsive version with no breakpoints https://codepen.io/thebabydino/pen/QwWQqeR
Thinking about speaking at Front End North 2025?
Our Call For Proposals is now open.
Apply here: https://forms.gle/QjK9Vjv4P1PyrhdV7
CFP closes on 28th April
Made this a couple of years ago on @codepen but for some reason never shared it: a hopefully accessible base for a smooth elastic dropdown https://codepen.io/thebabydino/pen/qBJENKM
Based on a thing at a now dead link which did something of the kind with a huge div soup.
Someone hearted this button ripple effect demo on @codepen (coded about half a decade ago) and made me notice it still said "only works in Chromium" - as of last summer, it's cross-browser! 
Know how border-image & border-radius don't play nice together?
(interactive https://codepen.io/thebabydino/pen/jxZyed)
#tinyCSStip there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!
clip-path: inset(0 round $r)
@codepen demo: https://codepen.io/thebabydino/pen/qBELJGY?editors=1100
(and yes, this is a tip I first shared on twitter over half a decade ago https://x.com/anatudor/status/1219916121341644807 )
Friday bookmarklet drop! Another thing that I built for myself to resolve an issue where I couldn't get Dev Tools to inspect an element on screen (as right-clicking was causing it to remove the flyout menu). So I did a (kinda) recreation of the element inspector in Dev Tools that works on hover (can also fine tune selection using arrow keys).
Because someone just hearted a 5 year old @codepen demo https://codepen.io/thebabydino/pen/GRooBJm?editors=0100 I made using a #Sass function + looping to generate a #CSS 
: we don't need *any* Sass for this anymore!
We can now do it with
background:
linear-gradient(in hsl longer hue 90deg,
hsl(0, 95%, 65%) 0 0)
