Digging Deeper Into Container Style Queries
I wrote up some early thoughts on container style queries a little while back. It's still early days. They're already defined in the CSS Containment Module
Using The New Constrained Layout In WordPress Block Themes
One of the main goals of the WordPress Site Editor (and, yes, that is now the “official” name) is to move basic block styling from CSS to structured JSON.
Taming the Cascade With BEM and Modern CSS Selectors
BEM. Like seemingly all techniques in the world of front-end development, writing CSS in a BEM format can be polarizing. But it is – at least in my Twitter
Creating a Settings UI for a Custom WordPress Block
So far, we’ve covered how to work with data from an external API in a custom WordPress block. We walked through the process of fetching that data for use on
Classy and Cool Custom CSS Scrollbars: A Showcase
In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand
CSS Grid and Custom Shapes, Part 3
After Part 1 and Part 2, I am back with a third article to explore more fancy shapes. Like the previous articles, we are going to combine CSS Grid with
What CSS Do You Absolutely Have to Know in 2022?
Sacha Greif openly wondered whether CSS has gotten to be, you know, too big. With all the goodies that've shipped in browsers the past couple of years —
Some Links About CSS Gradients
Every once in a while, the blogging zeitgiest seems to coalesce around a certain topic and it's like the saved articles in my bookmarks folder are having a
Fancy Image Decorations: Outlines and Complex Animations
We’ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the <img>
Holographic Trading Card Effect
Simon Goellner (@simeydotme)'s collection of Holographic Trading Cards have captured our attention.
Creating Animated, Clickable Cards With the :has() Relational Pseudo Class
The CSS :has() pseudo-class can help us solve solve situations that used to take an extra wrapper to achieve, including the clickable card pattern many of us love to use from time to time.
Is There Too Much CSS Now?
As front-end developers, we've wished for a lot of things over the years — ways to center things in CSS, encapsulate styles, set an element’s aspect ratio,
Fancy Image Decorations: Masks and Advanced Hover Effects
Welcome to Part 2 of this three-part series! We are still decorating images without any extra elements and pseudo-elements. I hope you already took the time
Responsive Animations for Every Screen Size and Device
Before I career jumped into development, I did a bunch of motion graphics work in After Effects. But even with that background, I still found animating on the
Instant Articles, Proprietary Syndication, and a Web Built on User Fidelity Preferences
I love it when there's a sense of synergy in the blogosphere. First, I caught Nick Heer's coverage of Meta ending support for Instant Articles, its
How to Make a Folder “Slit” Effect With CSS
When you put something — say a regular sheet of paper — in a manilla folder, a part of that thing might peek out of the folder a little bit. The same sort of
Pure CSS Bezier Curve Motion Paths
Besides being elegant, Bezier curves have nice mathematical properties due to their definition and construction. No wonder they are widely used in so many areas! Now, how about using Bezier curves as motion paths with CSS?
Fancy Image Decorations: Single Element Magic
As the title says, we are going to decorate images! There’s a bunch of other articles out there that talk about this, but what we’re covering here is quite a
Some Things I Took Away From An Event Apart 2022 in Denver
An Event Apart 2022 Denver wrapped up yesterday. And while I was unable to make it to all three days this time, I did catch yesterday's action — and it was
Adding Fluid Typography Support to WordPress Block Themes
Fluid typography is a fancy way of “describing font properties, such as size or line height, that scale fluidly according to the size of the viewport”. It’s
How to Safely Share Your Email Address on a Website
Spammers are a huge deal nowadays. If you want to share your contact information without getting overwhelmed by spam email you need a solution. I run into
State of CSS 2022 Survey Now Open
The State of CSS survey recently opened up. Last year, the survey confirmed everyone's assumptions that TailwindCSS is super popular and CSS variables are
Introducing Shoelace, a Framework-Independent Component-Based UX Library
This is a post about Shoelace, a component library by Cory LaViska, but with a twist. It defines all your standard UX components: tabs, modals, accordions,
GIFs Without the .gif: The Most Performant Image and Video Options Right Now
So you want an auto-playing looping video without sound? In popular vernacular this is the very meaning of the word GIF. The word has stuck around but the
How to Create Wavy Shapes & Patterns in CSS
The wave is probably one of the most difficult shapes to make in CSS. We always try to approximate it with properties like border-radius and lots of magic
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
If we browse the WordPress theme directory, a majority of themes showcase cover images. It is a feature in popular demand. The cover page trend is true even
How I Made an Icon System Out of CSS Custom Properties
SVG is the best format for icons on a website, there is no doubt about that. It allows you to have sharp icons no matter the screen pixel density, you can
More Details on `details`
A lot of chatter around the ol' <details> and <summary> elements lately! I saw Lea Verou recently tweet an observation about the element's display
WebKit Features in Safari 16.0
Whew boy, Safari 16 is officially out in the wild and it packs in a bunch of features, some new and exciting (Subgrid! Container Queries! Font Palettes!) and
Building Interactive Figma Widgets
Figma has always encouraged collaboration between developers and designers. It strives on an endless treasury of community-made plugins.
Overlapping Bar Charts
As the name suggests, overlapping charts visualize two different sets of data in a single diagram. The idea is that the overlapping bars allow us to compare
Hacking CSS Animation State and Playback Time
In a nutshell, my project is nothing but a carefully scripted long CSS animation. Plus a few instances of the checkbox hack.
Flutter For Front-End Web Developers
I started as a front-end web developer and then became a Flutter developer. I think there were some concepts that helped me adopt Flutter easier. There were
iShadeed's Container Queries Lab
Ahmad Shadeed got an early jump on container queries and has a growing collection of examples based on everyday patterns.
Interpolating Numeric CSS Variables
We can make variables in CSS pretty easily:
Removing jQuery from GOV.UK
The GOV.UK team recently published "How and why we removed jQuery from GOV.UK". This was an insightful look at how an organization can assess its tooling and
When Do You Use CSS Columns?
That ain't rhetorical: I'm really interested in finding great use cases for CSS multi-column layouts.
Zooming Images in a Grid Layout
Creating a grid of images is easy, thanks to CSS Grid. But making the grid do fancy things after the images have been placed can be tricky to pull off.
How I Added Scroll Snapping To My Twitter Timeline
CSS Scroll Snap allows websites to snap the web page or any other scroll container to a specific scroll position when the user performs a scrolling operation.
Actually, the San Francisco Typeface Does Ship as a Variable Font
Apple unveiled an expanded version of its San Francisco system font at WWDC 2022. Then, last month, Jim Nielsen zeroed in on the font's variations, explaining
Implicit Grids, Repeatable Layout Patterns, and Danglers
Dave Rupert with some modern CSS magic that tackles one of those classic conundrums: what happens when the CSS for component is unable to handle the content
Scroll Shadows? Pure CSS Parallax? Game Back On.
Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with
Recreating MDN's Truncated Text Effect
It's no secret that MDN rolled out a new design back in March. It's gorgeous! And there are some sweet CSS-y gems in it that are fun to look at. One of those
Roundup of Recent Document Outline Chatter
It’s not everyday that HTML headings are the topic de jour, but my folder of saved links is accumulating articles about the recently merged removal of the
Logical Properties for Useful Shorthands
Michelle Barker with my favorite sorta blog post: short, practical, and leaves you with a valuable nugget for your time. Here, she gets into logical property
How stroke-dasharray Patterns Work
Say you have a line in SVG:
In Praise of Shadows
Our dear friend Robin has a new essay called In Praise of Shadows. Now, before you hop over there looking for nuggets on CSS box shadows, text shadows, and
Technical Writing for Developers
HTML, CSS, JavaScript, Python, PHP, C++, Dart — there are so many programming languages out there and you may even be totally fluent in several of them! But
Collective Nouns for the Web
Melanie Sumner has this super-specific collection of web-related nouns for describing a group or set of something. You know how there's a school or fish or a
Help Shape the Future of CSS-Tricks!
Head's up! The survey closed on July 12, 2022. We got tons of responses — thanks to everyone for helping us out!
Conditionally Styling Selected Elements in a Grid Container
Calendars, shopping carts, galleries, file explorers, and online libraries are some situations where selectable items are shown in grids (i.e. square
De-Mystifying IndieWeb on a WordPress Site
Well, sheesh. I opened a little can of worms when sharing Miriam's "Am I on the IndieWeb yet?" with a short post bemoaning my own trouble getting on the
Useful Tools for Visualizing Databases on a Budget
A diagram is a graphical representation of information that depicts the structure, relationship, or operation of anything. Diagrams enable your audience to
Am I on the IndieWeb yet?
Can't smash the Like button hard enough for what Miriam Suzanne has to say on the challenging technical hurdles of implementing Webmentions:
How to Create Block Theme Patterns in WordPress 6.0
Block patterns, also frequently referred to as sections, were introduced in WordPress 5.5 to allow users to build and share predefined block layouts in the
SPAs, Shared Element Transitions, and Re-Evaluating Technology
Nolan Lawson sparked some discussion when he described a noticeable shift away from single-page applications (SPAs):
Just How Long Should Alt Text Be?
I teach a class over at the local college here in Long Beach and a majority of the content is hosted on the Canvas LMS so students can access it online. And,
Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D
We’ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background
Mastering SVG's stroke-miterlimit Attribute
So, SVG has this stroke-miterlimit presentation attribute. You’ve probably seen it when exporting an SVG from a graphic editor program, or perhaps you find
First Look At The CSS object-view-box Property
Ahmad Shadeed — doing what he always does so well — provides an early look at the object-view-box property, something he describes as a native way to crop an