We’ve accomplished a bunch of stuff in this series! We created a custom WordPress block that fetches data from an external API and renders it on the front end. Then we took that work and extended it so the data also renders directly in the WordPress block editor. After that, we created a settings UI for the block using components from the WordPress InspectorControls package. There’s one last bit for us to cover and that’s saving the settings options. If we recall fro..

• 0 Comment

In the last article, we made a pretty cool little slider (or “carousel” if that’s what you prefer) that rotates in a circular direction. This time we are going to make one that flips through a stack of Polaroid images. CodePen Embed Fallback Cool right? Don’t look at the code quite yet because there’s a lot to unravel. Join me, will ya? CSS Sliders series Circular Rotating Image Slider Flipping Through Polaroid Images (you are here!) Infinite 3..

• 0 Comment

How often to do you reach for the CSS background-size property? If you’re like me — and probably lots of other front-end folks — then it’s usually when you background-size: cover an image to fill the space of an entire element. Well, I was presented with an interesting challenge that required more advanced background sizing: background stripes that transition on hover. Check this out and hover it with your cursor: CodePen Embed Fallback There’s a lot mo..

• 0 Comment

I stumbled across this tweet from Ana Segota looking for a way to add a CSS box-shadow to a button’s hover state in WordPress in the theme.json file. Is it possible to add a box-shadow for the button on hover state in theme.json? #WordPress— Ana Segota (@Ana_Segota) November 1, 2022 She’s asking because theme.json is where WordPress wants us to start moving basic styles for block themes. Traditionally, we’d do any and all styling in style.css when working in a..

• 0 Comment

Nothing but ear-to-ear smiles as I was watching this video from @quayjn on YouTube. (No actual name in the byline, though I think it’s Brian Katz if my paper trail is correct). The best is this Pen you can use to sing along… CodePen Embed Fallback The little song Una did for memorizing for JavaScript’s map(), filter(), and reduce()methods at the end of this article comes to mind for sure. To Shared Link — Permalink on CSS-Tricks CSS is OK, I guess. orig..

• 0 Comment

For years, a small pedantry war has been raging in our address bars. In one corner are brands like Google, Instagram, and Facebook. This group has chosen to redirect example.com to www.example.com. In the opposite corner: GitHub, DuckDuckGo, and Discord. This group has chosen to do the reverse and redirect www.example.com to example.com. Does “WWW” belong in a URL? Some developers hold strong opinions on the subject. We’ll explore arguments for and against it a..

• 0 Comment

Image sliders (also called carousels) are everywhere. There are a lot of CSS tricks to create the common slider where the images slide from left to right (or the opposite). It’s the same deal with the many JavaScript libraries out there that create fancy sliders with complex animations. We are not going to do any of that in this post. Through a little series of articles, we are going to explore some fancy and uncommon CSS-only sliders. If you are of tired seeing the same..

• 0 Comment

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 Level 1 specification (currently in Editor’s Draft status) but there’s still a couple of outstanding discussions taking place. The basic idea is that we can define a container and then apply styles conditionally to its descendants based on its computed styling. @container <name>? <conditions> { ..

• 0 Comment

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. JSON files are machine-readable, which makes it consumable by the JavaScript-based Site Editor for configuring a theme’s global styles directly in WordPress. It’s not all the way there yet! If we look at the Twenty Twenty-Two (TT2) default theme, there were two main unresolved issues: styling interactions (like :..

• 0 Comment

I’m a sucker for anything about front-end job titles. Anselm Hannemann: CSS evolved and we’re beyond the point where everyone can just do it as a side interest. We all can learn it and build amazing stuff with it, but using it wisely and correctly in a large-scale context isn’t an easy job anymore. It deserves people whose work is to focus on that part of the code. Anselm is partly in responding to Sacha Greif’s “Is There Too Much CSS Now?” and the ov..

• 0 Comment