Codú

CSS-Tricks's Coding Profile

Avatar for CSS-Tricks

CSS-Tricks

@css-tricks

css-tricks.com

Articles (38)

CSS-Tricks9 min

Potentially Coming to a Browser :near() You

Danny has several ideas for how we could use :near(), a proposed pseudo-class that detects when the pointer is near an element. Potentially Coming to a Browser :near() You originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

0
0
CSS-Tricks3 min

Distinguishing “Components” and “Utilities” in Tailwind

The distinction between "components" and "utilities" seems clear at first glance, but gets a little blurred when working with them in Tailwind. Distinguishing “Components” and “Utilities” in Tailwind originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the new...

0
0
CSS-Tricks5 min

Spiral Scrollytelling in CSS With sibling-index()

Lee accepts a challenge: arranging text in a spiral that animates as a vortex on scroll... all in CSS. Spiral Scrollytelling in CSS With sibling-index() originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

0
0
CSS-Tricks10 min

Interop 2026

Interop 2026 is officially a thing and there's plenty of new (and even old) CSS features that we can look forward to being cross-browser compatible and consistent! Interop 2026 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

0
0
CSS-Tricks13 min

Making a Responsive Pyramidal Grid With Modern CSS

This is the second part of a small two-part series. In this article, we will explore another type of grid: a pyramidal one. We are still working with hexagon shapes, but a different organization of the elements., while exploring other different shapes. Making a Responsive Pyramidal Grid With Modern...

0
0
CSS-Tricks7 min

Approximating contrast-color() With Other CSS Features

The new contrast-color() function is not fully supported yet. But can we still implement it in a cross-browser friendly way using other new CSS features? Approximating contrast-color() With Other CSS Features originally published on CSS-Tricks, which is part of the DigitalOcean family. You should ge...

0
0
CSS-Tricks13 min

Trying to Make the Perfect Pie Chart in CSS

Can we make pie chart that's semantic, with flexible markup, and avoids using a JavaScript library? Here's how I tackled it. Trying to Make the Perfect Pie Chart in CSS originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

0
0
CSS-Tricks4 min

CSS Bar Charts Using Modern Functions

CSS-only bar charts are one of those things we've tackled a bunch of times in different ways. But how can modern CSS features finally make it not only trivial, but fun? CSS Bar Charts Using Modern Functions originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get...

0
0
CSS-Tricks6 min

No Hassle Visual Code Theming: Publishing an Extension

You’d think that publishing a VS Code extension is an easy process, but it’s not. You have to publish your theme in at least two places. No Hassle Visual Code Theming: Publishing an Extension originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

0
0
CSS-Tricks10 min

No-Hassle Visual Studio Code Theming: Building an Extension

I've always thought that creating a VS Code theme was a lot of work. But lo and behold, it took less than six hours to get it working, then a day or two to polish up my final tweaks. No-Hassle Visual Studio Code Theming: Building an Extension originally published on CSS-Tricks, which is part of the...

0
0
CSS-Tricks2 min

ReliCSS

Stu Robson's ReliCSS (clever name!) tool can excavate outdated CSS in your codebase that have modern CSS solutions. ReliCSS originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

0
0
CSS-Tricks4 min

There is No Need to Trap Focus on a Dialog Element

Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the (even in modal mode). There is No Need to Trap Focus on a Dialog Element originally published on CSS-Tricks, which is part of the...

0
0
CSS-Tricks10 min

Responsive Hexagon Grid Using Modern CSS

A while back, Temani tacked a repeating grid of hexagon shapes. Well, he's updated it with modern CSS features that result in fewer magic numbers. And it's impressive! Responsive Hexagon Grid Using Modern CSS originally published on CSS-Tricks, which is part of the DigitalOcean family. You should ge...

0
0
CSS-Tricks2 min

Open Props @custom-media Recipes

The @custom-media at-rule has landed in Firefox Nightly! I couldn’t find it in the release notes but Adam Argyle’s on the beat noting that it’s behind a flag for now. Look for layout.css.custom-media.enabled I often forget the exact name of … Open Props @custom-media Recipes originally published on...

0
0
CSS-Tricks7 min

I Learned The First Rule of ARIA the Hard Way

Semantic HTML does a lot more accessibility work than we usually give it credit for already — and ARIA is simple to abuse when we use it both as a shortcut and as a supplement. I Learned The First Rule of ARIA the Hard Way originally published on CSS-Tricks, which is part of the DigitalOcean family....

0
0
CSS-Tricks3 min

HTTP Archive 2025 Web Almanac

I love me some good web research reports. I’m a sucker for them. HTTP Archive’s Web Almanac is one report I look forward to every year, and I know I’m not alone there. It’s one of those highly-anticipated publications on … HTTP Archive 2025 Web Almanac originally published on CSS-Tricks, which is pa...

0
0
CSS-Tricks2 min

“I Heart CSS” DailyDev Squad

If you’re reading this, chances are you already have some sort of way that you’re following when we publish new content, whether that’s RSS, Bluesky, Mastodon, or what have you. But I know a lot of folks … “I Heart CSS” DailyDev Squad originally published on CSS-Tricks, which is part of the DigitalO...

0
0
CSS-Tricks3 min

Playing With CodePen slideVars

Super cool new CodePen feature alert! You've probably seen a bunch of "interactive" demos that let you changed values on the fly from a UI panel embedded directly in the demo. Playing With CodePen slideVars originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get...

0
0
CSS-Tricks16 min

Postcard From Web Directions Dev Summit, 2025

Lee Meyer recently spoke at Web Directions Summit 2025. This is his experience, not only speaking at the event, but experiencing the event through the lens of anxiety and imposter syndrome. Postcard From Web Directions Dev Summit, 2025 originally published on CSS-Tricks, which is part of the Digital...

0
0
CSS-Tricks4 min

Future CSS: :drag (and Maybe ::dragged-image?)

Have you ever struggled to style an element while it's being dragged? Sunkanmi explains some ways it could become easier in the future. Future CSS: :drag (and Maybe ::dragged-image?) originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

0
0
CSS-Tricks11 min

Thank You (2025 Edition)

This is the best job I've had in my life and it's only possible because you keep showing up each day to read, learn, share, and discuss all-things-front-end (and a little CSS, of course) with us. Thank You (2025 Edition) originally published on CSS-Tricks, which is part of the DigitalOcean family. Y...

0
0
CSS-Tricks5 min

text-decoration-inset is Like Padding for Text Decorations

The text-decoration-inset property solves a problem that we’ve had since the beginning of the web, which is that text decorations such as underlines extend beyond the first and last characters, resulting in vertical misalignment. text-decoration-inset is Like Padding for Text Decorations originally...

0
0
CSS-Tricks9 min

Masonry Layout is Now grid-lanes

It's settled! A new CSS display property keyword called grid-lanes will trigger a masonry layout mode. Masonry Layout is Now grid-lanes originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

0
0
CSS-Tricks2 min

Search CSS-Tricks Raycast Extension

Jelte Lagendijk built a Raycast extension for searching CSS-Tricks articles where you simply type and a get a solid set of real-time results. Search CSS-Tricks Raycast Extension originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

0
0
CSS-Tricks11 min

Responsive List of Avatars Using Modern CSS (Part 2)

In this article, we follow up the work we did to create responsive rows of circular images in a previous article by arranging the images around a circle with a clean hover effect. Responsive List of Avatars Using Modern CSS (Part 2) originally published on CSS-Tricks, which is part of the DigitalOce...

0
0
CSS-Tricks2 min

Toon Title Text Generator

Andy Clarke with a brand-new resource. It generates the sort of fun typography that Andy commonly uses in his own work that's geared towards cartoon headings. Toon Title Text Generator originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

0
0
CSS-Tricks11 min

Responsive List of Avatars Using Modern CSS (Part 1)

A list of rounded images that slightly overlap each other is a classic web design pattern. The main idea is not complex, but the new thing is the responsive part. that dynamically adjusts the overlap between the images so they fit inside the container. Responsive List of Avatars Using Modern CSS (Pa...

0
0
CSS-Tricks7 min

What Else Could Container Queries… Query?

How far can we really go with container queries? There are dozens of media queries now, so what if there were dozens of container queries as well? What could we use them for? What Else Could Container Queries… Query? originally published on CSS-Tricks, which is part of the DigitalOcean family. You s...

0
0
CSS-Tricks7 min

Creating Scroll-Based Animations in Full view()

It’s not that hard to do! Preethi shows you how it's really the same old animation you’re used to writing in CSS, only applied on a view timeline instead of a normal timeline. Creating Scroll-Based Animations in Full view() originally published on CSS-Tricks, which is part of the DigitalOcean family...

0
0
CSS-Tricks2 min

CSS Wrapped 2025

The Chrome Dev Team recaps the new CSS features that shipped in Google Chrome this past year in one amazingly designed webpage. They cover new functionality for creating more customizable components, next-gen interactions, and optimizing ergonomics. We’ve … CSS Wrapped 2025 originally published on C...

0
0
CSS-Tricks3 min

Fit width text in 1 line of CSS

The Chrome team recently prototyped a working solution for fitting text to the width of a container in CSS using a text-grow property. Fit width text in 1 line of CSS originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

0
0
CSS-Tricks11 min

That Time I Tried Explaining HTML and CSS to My 5-Year Old Niece

I would like to tell you what I learned from a five-year old child about HTML and CSS. It’s funny how explaining something you do almost naturally teaches you about yourself and what you take for granted. That Time I Tried Explaining HTML and CSS to My 5-Year Old Niece originally published on CSS-Tr...

0
0