CSS-Tricks has a new owner! Yes, I've got the keys to the castle, so to speak. And, even after 12 years of working on the site, I'll admit I'm a little overwhelmed and nervous about that. https://css-tricks.com/css-tricks-has-a-new-owner/

CSS-Tricks has a new owner!

Yes, I've got the keys to the castle, so to speak. And, even after 12 years of working on the site, I'll admit I'm a little overwhelmed and nervous about that.

css-tricks.com

The Front-End Community is Still Alive and Beautiful I thought about dropping an addendum into my last post to say just how overwhelmed I am, in the best possible way, by the way all of you in the... https://geoffgraham.me/the-front-end-community-is-still-alive-and-beautiful/

geoffgraham.me/the-front-en...

I've been writing for @css-tricks.bsky.social for almost 3 years along @geoffgraham.me , aka the best editor ever. Lately, things have been a little slow on the site. I think everyone deserves an explanation, but Geoff especially deserves one from DigitalOcean.

Why CSS-Tricks Has Been Quiet Lately - Geoff Graham

Because I haven't published anything to it since August 31. And no one else has either. That's not a super long time to go silent but it is for a site that

geoffgraham.me

A First Look at Scroll-Triggered Animations Let's poke at the differences between scroll-driven and scroll-triggered animations. https://css-tricks.com/css-scroll-triggered-animations-first-look/

A First Look at Scroll-Triggered Animations

Let's poke at the differences between scroll-driven and scroll-triggered animations.

css-tricks.com

The people of #cssday have spoken: we want gamut mapping and we want it NOW!

Perfectly vanilla CSS pie charts — everyone’s favorite challenge, right? A follow-up to @monknow.bsky.social‘s follow-up, which was probably a follow-up to someone else’s follow-up: css-tricks.com/another-stab... This one’s pretty darn interesting.

Another Stab at the Perfect CSS Pie Chart... Sans JavaScript! | CSS-Tricks

We dive again into CSS Pie Charts! This time, Author Antoine Villepreux delivers semantic and flexible charts without a single line of JS.

css-tricks.com

EXTREMELY excited for this one! Meet with us to chat about CSS on May 6th!!

Geoff Graham@geoffgraham.me · 6mo ago

I'm pretty, pretty, pretty stoked to hang out with my buddies @monknow.bsky.social and @chriscoyier.net at Smashing Meets next week. Just plain mensches who have taught me so dang much. smashingconf.com/meets-style-...

Another one for the Almanac! css-tricks.com/almanac/func...

Select multiple dates on a calendar where the :nth-child()'s “n of selector” syntax does all the heavy lifting. Perfect example of CSS and JS working together in harmony. css-tricks.com/selecting-a-...

Hey everyone! I am super excited to announce that, in exactly one month (Wednesday, May 6), I'll be speaking at Meets Style Sheets by @smashingconf.com about Anchor Positioning!!! I'll start the countdown now: 30 days left 👀 Get your tickets here! smashingconf.com/meets-style-...

Has CSS gone too far?

CSS-Tricks*@css-tricks.com · 7mo ago

Introducing the CSS Olfactive API Something's s little... smelly about it. 👃 css-tricks.com/css-olfactiv...

A little gem @monknow.bsky.social stumbled into when working on something... we can center an absolutely positioned element with justify-self: .element { position: absolute; place-self: center; inset: 0; } He explains it nicely here: css-tricks.com/yet-another-...

Yet Another Way to Center an (Absolute) Element | CSS-Tricks

TL;DR: We can center absolute-positioned elements in three lines of CSS. And it works on all browsers!

css-tricks.com

The progress() function is sorta like clamp() but returns 1 or 0. Combine it with calc() and you can get weird with it. css-tricks.com/almanac/func...

I have a new article up trying to make the perfect pie chart in CSS! There is probably a lot to improve, so a little feedback would be much appreciated

CSS-Tricks*@css-tricks.com · 9mo ago

Can we make pie chart that's semantic, written with flexible markup, and avoids using expensive JavaScript libraries? @monknow.bsky.social takes a noble shot at it. 🥧 css-tricks.com/trying-to-ma...

The CSSWG just resolved to add this to the spec 🥳 github.com/w3c/csswg-dr...

[css-flexbox-2] Add flex-wrap: balance; · Issue #3070 · w3c/csswg-drafts

We discussed having a flex-wrap:balance value, similar to text-wrap:balance, to even out the length of pre-flexed lines. We should add to level 2.

github.com

Una Kravets@una.im · last yr.

Introducing 🤯 flex-wrap: balance 🤯 Would you use this? ⚠️ Not a real feature yet, just something one of our engineers has been working on. (You can try it out in the latest Chrome Canary with the experimental web platform features flag though!)

I was lucky to be a privileged tester of @codepen.io 2.0, and now they have released the Private Beta. codepen.io/beta It's finally time to unleash some cool "View Transition" demos because with the 2.0 version, we can have many pages in one pen 👀 Kudos to @chriscoyier.net and the entire team!

About to have CSS ANCHOR POSITIONING FULLY CROSS-BROWSER!!

IntentToShip@intenttoship.dev · 11mo ago

Gecko: Intent to ship: CSS Anchor Positioning

My last post on trigonometric functions just got published!! Thanks so much to anyone who gave it a read :)

CSS-Tricks*@css-tricks.com · 12mo ago

How can trig functions be the "most hated" CSS feature where they can do things like this? @monknow.bsky.social has several other fun examples as well. css-tricks.com/the-most-hat...

The second part on trigonometric functions just got published. 🧡 The first part got a lot of reads, so thanks so much! A third and last part will be coming soon 👀

CSS-Tricks*@css-tricks.com · 12mo ago

Trigonometry functions may be the "most hated" CSS feature according to recent polling, but @monknow.bsky.social shows off why there's so much to love about them, looking specifically at tan(). css-tricks.com/the-most-hat...

!!!

CSS-Tricks*@css-tricks.com · last yr.

CSS trig functions make wayyy more sense the way @monknow.bsky.social explains then, even to non-math-y folks like me. He's put together explainers on sin(), cos(), and tan(). ⭐️ css-tricks.com/almanac/func... ⭐️ css-tricks.com/almanac/func... ⭐️ css-tricks.com/almanac/func...

CSS trig functions make wayyy more sense the way @monknow.bsky.social explains then, even to non-math-y folks like me. He's put together explainers on sin(), cos(), and tan(). ⭐️ css-tricks.com/almanac/func... ⭐️ css-tricks.com/almanac/func... ⭐️ css-tricks.com/almanac/func...

A new one for CSS-TRICKS!!!

CSS-Tricks*@css-tricks.com · last yr.

Safari 26 introduces a lot of new stuff. To be precise, it adds: 75 new features, 3 deprecations, and 171 other improvements. Here's all the CSS goodness you'll want to know about, courtesy of @monknow.bsky.social. css-tricks.com/touring-new-...

"Avatar Indicators, using CSS Mask / Trig" by Simon Goellner codepen.io/simeydotme/p...

New one on CSS-Tricks!! Talking about sin() and cos() here, but we'll get to the rest of trig functions later on ;)

CSS-Tricks*@css-tricks.com · last yr.

Did you notice that Trigonometric Functions won the “Most Hated Feature” pageant in this year’s State of CSS survey? @monknow.bsky.social thinks they deserve more than a little love, and for good reasons… css-tricks.com/the-most-hat...

Is it just me, or is the CSSWG drafts site loading without styles? (E.g.: drafts.csswg.org/css-anchor-p...)

I can't express how awesome and supportive the CSS community is!! THANKS :)

Andy Bell@bell.bz · last yr.

Juan, hitting it out of the park, as per

Everything you ever wanted, or needed, to know about radial gradients, courtesy of @monknow.bsky.social — even digging into those tricky hue interpolation and radial-extent keywords. css-tricks.com/almanac/func... css-tricks.com/almanac/func...

radial-gradient() | CSS-Tricks

The radial-gradient() functions creates a circular or elliptical color gradient starting from a center point and spreading outward.

css-tricks.com

Here’s one from @dxnny.fun covering many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future. css-tricks.com/setting-line...

Setting Line Length in CSS (and Fitting Text to a Container) | CSS-Tricks

The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.

css-tricks.com

I do a terrible job highlighting recent work that's gone into the CSS-Tricks almanac. A few choice samples: - view(): css-tricks.com/almanac/func... - ::target-text: css-tricks.com/almanac/pseu... - shape(): css-tricks.com/almanac/func... - sibling-count(): css-tricks.com/almanac/func...