Juan Diego Rodríguez

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/

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.

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/

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.

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

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-...

Has CSS gone too far?

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-...

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

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

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!!

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

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 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!!!

"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 ;)

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 :)

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...

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...

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...

New one!!!

CSS Tricks and Sunkanmi Fafowora have published an absolutely fantastic guide on all the new CSS colour stuff. piccalil.li/links/css-co...

CSS-Tricks 🤝 Piccalilli

Proposed control-value() in CSS to update thumb slider value without JS! #CSSDay

The State of CSS 2025 Survey is out! css-tricks.com/the-state-of...

Started writing something and then ended up with 5 new article ideas. The initial thing I was writing is still sitting there, unfinished, judging me from afar.

The Index #95 is here, featuring an internet road trip, Obsidian, nested lists, a stunning font website and JS routing. piccalil.li/the-index/95/

A reader wrote-in asking how to make a complex list-counting system for a legal document. We ain't no lawyers, but we can style the crap out of lists with CSS! css-tricks.com/a-readers-qu...

The Email Markup Consortium released its 2025 study on the accessibility in HTML emails, and the TL;DR is not totally dissimilar from what we heard from WebAIM’s annual web report. css-tricks.com/html-email-a...

YES!

I hate how AI has bastardized the em dash (—.—)

What are your go-to color functions? Is hwb() one of them? Why or why not? css-tricks.com/why-is-nobod...

Mr. @monknow.bsky.social was waxing nostalgic on the HTML5 & CSS Readiness project and decided to make a new one purely for newer web features. Should be cool: the rainbow grows as features gain support! It'll be fun to take snapshots to see the progression. css-tricks.com/a-new-web-re...

Please enjoy a deep look at using border-image to enhance illustrations, written by one of my web design heroes, Andy Clarke. css-tricks.com/revisiting-c...

The first episode of a new podcast I'm co-hosting with the unimitable @bradfrost.com called Open Up just dropped. It's all about the less tangible things we _feel_ in tech rather than the _specifics_ that we use in our work. Will you check it out? geoffgraham.me/open-up-with...

A massive guide on styling counters... going from the most basic ways to style lists directly in HTML to advanced CSS techniques that are capable of making things that aren't lists look like lists. Big ol' props to @monknow.bsky.social for pulling it all together! css-tricks.com/styling-coun...

No one told me I was mentioned on one of the latest @nerdy.dev's Chrome posts. It made my week!! developer.chrome.com/blog/delayin...

Super excited about how this turned out!!

Getting the viewport size in CSS ain't a new trick, but storing it as a variable and using it to position elements on the page opens up a lot of new tricks. Here's @monknow.bsky.social using it to fluidly position elements on a page without overlapping. css-tricks.com/typecasting-...