CSS by T. Afif

If you don't know, my CSS Tip website is open to advertisers. Don't miss the opportunity to promote your product and support my work! Reach a wide audience of passionate web developers (~14.000 active users per month) starting from 150$/month. css-tip.com/advertise/

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/

This is the best thing that I've read about the web community in a while. Happy that CSS-Tricks is in good hands now ❤️❤️

Woah! Amazing and wonderful news. 😄

Easiest new subscription I ever signed up for.

I'm so gosh-darned excited! css-tricks.com/css-tricks-h...

Confetti Shape Explosion. Good? bad? 👀

If you're a Ko-fi or Patreon supporter, then first of all thank you and second, I've just posted a version #2 of an over 2.5 year old #SVG #filter @codepen.io demo. Look refining, maintainability & accessibility improvements. ❇️ ko-fi.com/post/Split-t... ❇️ www.patreon.com/anatudor/pos...

The perfect feature for my links-only profile! 😁 Don't hesitate to click the green buttons 👀

<?php phpinfo(); ?> 🤞🤞

More range sliders with fancy shapes? Let's go! This time with a tooltip showing the value. curve, wave, zig-zag, arc ... Which one do you prefer? css-tip.com/shaped-range... 0% JavaScript and 100% CSS magic (border-shape, shape(), scroll-driven animations, and more!)

Submitted a @webdevs.firefox.com bug after 7 years since my last one, hoping this one doesn't remain Open forever 😅 bugzilla.mozilla.org/show_bug.cgi...

Yesterday, the CSSWG accepted my proposal for mesh gradients and diffusion curve gradients! Want to make gradients like this natively in CSS? Well, we've started the work on it. It's coming! Here's the Explainer: github.com/w3c/csswg-dr...

Good news (I hope): CSS-Tricks will indeed be back later this month!

✍️ New Article: Fit height to background pattern size with calc size() I wrote about a use-case for calc-size() and round() that helped me avoid cut-off background patterns. ishadeed.com/article/fit-...

💡CSS Tip! Creating CSS Shapes is one of my favorite tasks, and now I can do something even better: Random CSS Shapes! Let's start with Blobs. css-tip.com/random-blob/ You never see the same shape twice. A unique shape for a unique experience! 👀

In case you missed it, I published a tool called Gradient Layers, which is simply a way to visualize multiple background images in CSS. Works well for mask-image, too. Take a look: lab.ishadeed.com/tools/gradie...

I am ranking only 5 this year.

What do you want us to work on in 2027? Here's a web app where you can rank the Interop proposals you care about, giving us data we can use to prioritise feature development. interop-rank.fxdx.dev

💡 CSS Tip! Another cool shape that works well with random(): wavy dividers! css-tip.com/random-wavy-... Each visitor gets their own wavy shape for a unique experience.

Explore the universe in 3D CSS. JavaScript is optional. Launching css.earth 🌍 🚀 #WorldSpaceWeek

💡 CSS Tip! Another cool shape that works well with random(): wavy dividers! css-tip.com/random-wavy-... Each visitor gets their own wavy shape for a unique experience.

Transferring sibling-count() to a parent element. @css-only.dev turns sibling-count() of an extra child into a variable on the parent using scroll-driven animations, a CSS-only stand-in for the proposed children-count(). #css #scroll blog.master.dev/tran...

📝 New CSS Article! With Scroll-Driven Animations, you can transfer a value from one element to another anywhere on the page. I am using it to implement children-count(). Strange? Confusing? What the heck am I talking about?! Read my latest article 👇 blog.master.dev/transferring...

📝 New CSS Article! With Scroll-Driven Animations, you can transfer a value from one element to another anywhere on the page. I am using it to implement children-count(). Strange? Confusing? What the heck am I talking about?! Read my latest article 👇 blog.master.dev/transferring...

Based on some @css-only.dev feedback 💙

✂️ 🌆 Image cropping everywhere! You can now crop an image in the Asset Manager (which opens in both 2.0 and the Classic Editor) and directly in the 2.0 editor.

💡 CSS Tip! Want to know how many children your container has? We don't have children-count() yet, but we can implement it using modern CSS! css-tip.com/children-cou... A hacky experiment powered by Scroll-Driven Animations. How would you use it? Share your use cases 👇

💡 CSS Tip! Want to know how many children your container has? We don't have children-count() yet, but we can implement it using modern CSS! css-tip.com/children-cou... A hacky experiment powered by Scroll-Driven Animations. How would you use it? Share your use cases 👇

a11y question: Let's suppose I have an empty html element somewhere on the page with 0 content, invisible, having position:absolute (or fixed). It has no purpose in the HTML (only used for some CSS stuff). Is it a good idea to add the "inert" attribute? Or should I do nothing?

The time to ramp up your scroll-driven animations skills is **NOW** Go check scroll-driven-animations.style for and free 10-part video course created by yours truly, as well as a bunch of tools and demos.

The call for Interop 2027 proposals is closing today. More than 100 proposals got created! Here are my favs 🤩 patrickbrosset.com/lab/interop-... Check them out!

Bounce! 🏐 (CSS only) Live demo @codepen.io: codepen.io/editor/amit_...

I thought it was finally time to play with random until I found out that random-item() is not included and there is no support for the "by X" argument. I need the full package for my crazy ideas 😖

This is as close to a cry for help that you'd see from me. I need work. I need money for shelter and food in the meantime. I've run out.

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/

border-shape is leading the votes with 181 thumbs up right now! 👀 Can we do the same for if()? Go vote for it as well: github.com/web-platform... Let's make it part of Interop 2027!

📝 New CSS Article! Learn how I used Scroll-Driven Animations and other modern features to extract various information from a CSS grid. blog.master.dev/extracting-g... Another article to show that CSS is more than a simple set of properties/values.

💡 CSS Tip! border-shape + border-area = The perfect combo 🪄 3 lines of code to create border-only shapes with gradient coloration. Absolutely any shapes, even the most complex ones! 👀 css-tip.com/gradient-sha... Save the code for the future (a near future!)

📝 New CSS Article! Learn how I used Scroll-Driven Animations and other modern features to extract various information from a CSS grid. blog.master.dev/extracting-g... Another article to show that CSS is more than a simple set of properties/values.

We should have been writing articles and having fun with CSS, but instead... We can't do much against big corporations (except wait), so let's give Geoff some support. Share (or try) his HTML/CSS course: thebasics.dev 100% human-made by the one who edited 86945 CSS articles!

We should have been writing articles and having fun with CSS, but instead... We can't do much against big corporations (except wait), so let's give Geoff some support. Share (or try) his HTML/CSS course: thebasics.dev 100% human-made by the one who edited 86945 CSS articles!

Boooo. I did try and get it back once. I wonder if we could still make that work. chriscoyier.net/2024/02/28/w... I’m down to find a win-win situation, DO. Call me. 🤙

📝 Why CSS-Tricks Has Been Quiet Lately (cc: @digitalocean.com @css-tricks.bsky.social ) geoffgraham.me/why-css-tric...

#CSS `progress()` is now baseline! 🥳 I was trying to see if this could be used as a workaround for the lack of typed arithmetic (unit division) in Firefox, and it does work, sort of. codepen.io/editor/maike... (And yes I know there's already the `tan2(atan())` trick, but that has its own bugs.)

Oops. I invented a new CSS shrink-wrap technique and blogged about it. blog.codepen.io/2026/09/11/s...

It's not a competition, but border-shape is actually the second most upvoted feature, close to 100 thumbs up! Can we make it the first?! 👀 Cast your vote 👇

Interop 2027 prep is now. Want to help? 1. Go to developer-signals.rviscomi.workers.dev 2. Sign-in using GitHub 3. Find features you need 4. Click the comment icon, add your use case 5. Submit There aren't many ways to tell browsers what you need and why you need them. That's a very effective one.

It's the 2026 LED ART CSS Challenge! 🥳 I've created an LED experiment... Do something cool! The most creative and maddest will feature in my next YouTube. Your time starts now... youtube.com/watch?v=wHcJ... codepen.io/editor/ivorj...