CSSTricks
Breaking Boundaries: Building a Tangram Puzzle With (S)CSS | CSS-Tricks
, simple and effective. For rotation, we added eight radio buttons, each representing a 45-degree increment: 45°, 90°, 135°, all the way to 360°. These simulate rotation controls entirely in CSS. Every potential shadow position got its own radio button too. (Yes, it’s a lot, I know.) And to wrap it all up, I included…
Better CSS Shapes Using shape() — Part 3: Curves | CSS-Tricks
If you’re following along, this is the third post in a series about the new CSS shape() function. We’ve learned how to draw lines and arcs and, in this third part, I will introduce the curve command — the missing command you need to know to have full control over the shape() function. In reality,…
Getting Creative With HTML Dialog | CSS-Tricks
Like ’em or loath ’em, whether you’re showing an alert, a message, or a newsletter signup, dialogue boxes draw attention to a particular piece of content without sending someone to a different page. In the past, dialogues relied on a mix of divisions, ARIA, and JavaScript. But the HTML dialog element has made them more…
What We Know (So Far) About CSS Reading Order | CSS-Tricks
The reading-flow and reading-order proposed CSS properties are designed to specify the source order of HTML elements in the DOM tree, or in simpler terms, how accessibility tools deduce the order of elements. You’d use them to make the focus order of focusable elements match the visual order, as outlined in the Web Content Accessibility…
Better CSS Shapes Using shape() — Part 1: Lines and Arcs | CSS-Tricks
Creating CSS Shapes is a classic and one of my favorite exercise. Indeed, I have one of the biggest collections of CSS Shapes from where you can easily copy the code of any shape. I also wrote an extensive guide on how to create them: The Modern Guide For Making CSS Shapes. Even if I…
This Isn’t Supposed to Happen: Troubleshooting the Impossible | CSS-Tricks
I recently rebuilt my portfolio (johnrhea.com). After days and days of troubleshooting and fixing little problems on my local laptop, I uploaded my shiny new portfolio to the server — and triumphantly watched it not work at all… The browser parses and runs JavaScript, right? Maybe Chrome will handle something a little different from Firefox,…
Using Pages CMS for Static Site Content Management | CSS-Tricks
Friends, I’ve been on the hunt for a decent content management system for static sites for… well, about as long as we’ve all been calling them “static sites,” honestly. I know, I know: there are a ton of content management system options available, and while I’ve tested several, none have really been the one, y’know?…
Using CSS backdrop-filter for UI Effects | CSS-Tricks
This article covers tips and tricks on effectively utilizing the CSS backdrop-filter property to style contemporary user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs. Below is a hodgepodge sample of what you can build based on everything we’ll cover…
Revisiting Image Maps | CSS-Tricks
I mentioned last time that I’ve been working on a new website for Emmy-award-winning game composer Mike Worth. He hired me to create a highly graphical design that showcases his work. Mike loves ’90s animation, particularly Disney’s Duck Tales and other animated series. He challenged me to find a way to incorporate their retro ’90s…
The Lost CSS Tricks of Cohost.org | CSS-Tricks
You would be forgiven if you’ve never heard of Cohost.org. The bespoke, Tumblr-like social media website came and went in a flash. Going public in June 2022 with invite-only registrations, Cohost’s peach and maroon landing page promised that it would be “posting, but better.” Just over two years later, in September 2024, the site announced its…