We’ve got ourselves a real holiday treat! Join host Alex Trost from the Frontend Horse community for the Holiday Snowtacular 2022 this Friday, December 16. There’s a lineup of 12 awesome speakers — including Chris Coyier, Cassidy Williams, Kevin Powell, and Angie Jones — each discussing various front-end and web dev topics. It’s like the 12 days of Christmas, but wrapped up in a four-hour session for web nerds like us. It’s a real good cause, too. The event ..

• 0 Comment

CSS Container Queries are still gaining traction and many of us are getting our hands wet with them, even if it’s for little experiments or whatnot. They’ve got great, but not quite full, browser support — enough to justify using them in some projects, but maybe not to the extent where we might be tempted to start replacing media queries from past projects with shiny new container size queries. They sure are handy though! In fact, I’ve already run into a few situat..

• 0 Comment

Sara Soueidan with everything you need, from what screen reading options are out there all the way to setting up virtual machines for them, installing them, and confguring keyboard options. It’s truly a one-stop reference that pulls together disparate tips for getting the most out of your screen reading accessibility testing. Thanks, Sara, for putting together this guide, and especially doing so while making no judgments or assumptions about what someone may or may not k..

• 0 Comment

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