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 clipping and masking to create fancy layouts for image galleries. CSS Grid and Custom Shapes series Part 1Part 2Part 3 (you are here!) Should I read the previous articles before? It’s not mandatory but highly recommended to cover as many tricks as possible. You can also read them in any order, but following a..

• 0 Comment

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 — container queries! relative color syntax! cascade layers! logical properties! ranges in media queries! individual transforms! :has() selector! — and all of what’s on the possible horizon — CSS Toggles! nesting! color mixing! scroll-linked animations! scoped styles! — there’s definitely a different learning curve..

• 0 Comment

The way we write CSS for WordPress themes is in the midst of sweeping changes. I recently shared a technique for adding fluid type support in WordPress by way of theme.json, a new file that WordPress has been pushing hard to become a central source of truth for defining styles in WordPress themes that support full-site editing (FSE) features. Wait, no style.css file? We still have that. In fact, style.css is still a required file in block themes, though its role is greatly..

• 0 Comment

“A change to overflow on replaced elements in CSS”: From Chrome 108, the following replaced elements respect the overflow property: img, video and canvas. In earlier versions of Chrome, this property was ignored on these elements.This means that an image which was earlier clipped to its content box can now draw outside those bounds if specified to do so in a style sheet. So, image, video, and canvas elements that were once clipped might display the overflow when..

• 0 Comment

Web Sockets, Web Workers, Service Workers… these are terms you may have read or overheard. Maybe not all of them, but likely at least one of them. And even if you have a good handle on front-end development, there’s a good chance you need to look up what they mean. Or maybe you’re like me and mix them up from time to time. The terms all look and sound awful similar and it’s really easy to get them confused. So, let’s break them down together and distinguish Web S..

• 0 Comment

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 conversation. The conversation sitting in there now is all about CSS Gradients and I thought I’d link some of the more interesting pieces. Day 22: conic gradients — Manuel Matuzovic looked at conic gradients on Day 21 of his 100-day series about modern CSS, providing a nice high-level look at colors, angles, p..

• 0 Comment

This is a continuation of my last article about “Rendering External API Data in WordPress Blocks on the Front End”. In that last one, we learned how to take an external API and integrate it with a block that renders the fetched data on the front end of a WordPress site. The thing is, we accomplished this in a way that prevents us from seeing the data in the WordPress Block Editor. In other words, we can insert the block on a page but we get no preview of it. We only ge..

• 0 Comment

We rely on CSS Media Queries for selecting and styling elements based on a targeted condition. That condition can be all kinds of things but typically fall into two camps: (1) the type of media that’s being used, and (2) a specific feature of the browser, device, or even the user’s environment. So, say we want to apply certain CSS styling to a printed document: @media print { .element { /* Style away! */ } } The fact that we can apply styles at a certain ..

• 0 Comment

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> element. In this third and final piece, we are going to explore more techniques using the CSS outline property. That might sound odd because we generally use outline to draw a simple line around an element — sorta like border but it can only draw all four sides at once and is not part of the Box Model. We can do more..

• 0 Comment

Simon Goellner (@simeydotme)’s collection of Holographic Trading Cards have captured our attention. Under the hood there is a suite of filter(), background-blend-mode(), mix-blend-mode(), and clip-path() combinations that have been painstakingly tweaked to reach the desired effect. I ended up using a little img { visibility: hidden; } in DevTools to get a better sense of each type of holographic effect. Josh Dance (@JoshDance) replied with a breakdown of the effects t..

• 0 Comment