Recently, Stephanie Eckles sent out a call to revive the use of CSS border-image. Not to use it with images — which requires a pretty nasty syntax — but to create Gradient Borders in CSS. 🎉 Time to revive an old CSS property! When `border-image` was announced, I was off-put b/c the syntax was so wild. But with modern browsers, …

About The Author Steven Frieson is a front end developer who loves to solve problems for people, whether they’re website users or fellow developers. He is interested in many … More about Steven ↬ Wrangling z-index values is a difficult task for many developers. Here is an easy-to-implement mini-framework based on existing conventions that brings clarity and confidence to working …

The following article is co-authored by Uri Shaked and Michal Porag. Let’s explore the complexities of how CSS computes the width and height dimensions of elements. This is based on countless late-night hours debugging and fiddling with lots of combinations of CSS properties, reading though the specs, and trying to figure out why some things seem to behave one way …

Algolia is for search. Literally any website can take advantage of Algolia-powered search. You put JSON data (“records”) in, and then you can search them at lightning speed. The magic of Algolia is that they help you with both of those things: getting data in and getting search results out. As far as getting data in, there are all sorts …

The way routing works in JavaScript is usually that you specify which relative URL pattern you want for which component to render. So for /about you want the <About /> component to render. Let’s take a look at how to do this in Vue/Vue Router with lazy loading, and do it as cleanly as possible. I use this little tip …

What You’ll Be Creating When you mention M&Ms or Pringles, everyone remembers the colorful button-shaped chocolate characters and the mustachioed man, which naturally drive us to remember the brands they’re associated with. Professionally designed mascots are a great way of keeping businesses in the minds of customers.  Mascots are fun, useful brand/service and event ambassadors. Therefore they should be appealing in …

Here’s a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls into place. And we can do it using plain ol’ HTML and CSS! Going From Solid to Knockout Text on Scroll This effect is created by rendering two containers with fixed <h1> …

One was the footer of an (older) U.S. Government website: I Saw Two Mega Menus Today… The other was the navigation for AWS services from the AWS Console: It’s weird how much they use the word “Amazon” and “AWS” when you’re literally logged into AWS. Both of them have that vibe of: holy crap we have a lot of stuff, …

What You’ll Be Creating In the following steps, you will learn how to design a vintage postcard in Adobe Illustrator. Harken back to an era when postcards were all the rage with this friendly type style. The tutorial will delve into clipping masks, using bitmap images, working with layers, effects, and blends.  What You’ll Learn in This Illustrator Tutorial How …

My mind goes immediately to repeating-linear-gradient and hard-stop gradients when thinking of creating stripes in CSS. You make one stripe by using the same color between two color stops, and another stripe (or more) but using a different color between two colors stops (sharing the one in the middle). So like: background: repeating-linear-gradient( 45deg, black, black 10px, #444 10px, #444 …