CSSTricks
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…
So, You Want to Give Up CSS Pre- and Post-Processors… | CSS-Tricks
There was once upon a time when native CSS lacked many essential features, leaving developers to come up with all sorts of ways to make CSS easier to write over the years. These ways can mostly be categorized into two groups: Pre-processors Post-processors Pre-processors include tools like Sass, Less, and Stylus. Like what the category’s…
CSS Carousels | CSS-Tricks
The CSS Overflow Module Level 5 specification defines a couple of new features that are designed for creating carousel UI patterns: Scroll Buttons: Buttons that the browser provides, as in literal elements, that scroll the carousel content 85% of the area when clicked. Scroll Markers: The little dots that act as anchored links, as in…