Creating Playful Effects With CSS Text Shadows

April 20th, 2020

Let’s have a look at how we can use the CSS text-shadow property to create truly 3D-looking text. You might think of text-shadow as being able to apply blurred, the gradient-looking color behind the text, and you would be right! But just like box-shadow, you can control how blurred the shadow is, including taking it…

Front-End Challenges

April 17th, 2020

My favorite way to level up as a front-end developer is to do the work. Literally just build websites. If you can do it for money, great, you should. If the websites you make can help yourself or anyone else you care about, then that’s also great. In lieu of that, you can also make…

Pseudo-Randomly Adding Illustrations with CSS

April 17th, 2020

Between each post of Eric Meyer’s blog there’s this rather lovely illustration that can randomly be one of these five options: Eric made each illustration into a separate background image then switches out that image with the nth-of-type CSS property, like this: .entry:nth-of-type(2n+1)::before { background-image: url(image-1.png); } .entry:nth-of-type(3n+1)::before { background-image: url(image-2.png); } .entry:nth-of-type(4n+1)::before { background-image:…

Better Form Inputs for Better Mobile User Experiences

April 17th, 2020

Here’s one simple, practical way to make apps perform better on mobile devices: always configure HTML input fields with the correct type, inputmode, and autocomplete attributes. While these three attributes are often discussed in isolation, they make the most sense in the context of mobile user experience when you think of them as a team….

Thank You, Christopher Schmitt

April 16th, 2020

It’s incredibly sad that Christopher Schmitt passed away last week¹. I keep thinking about how Christopher was one of the best dudes I knew. Just incredibly kind and thoughtful all the way through. I know everyone says that about people after they pass, but I really mean it here. I’m sure we all know people…

Creating Color Themes With Custom Properties, HSL, and a Little calc()

April 16th, 2020

Before the advent of CSS custom properties (we might call them “variables” in this article as that’s the spirit of them), implementing multiple color schemes on the same website usually meant writing separate stylesheets. Definitely not the most maintainable thing in the world. Nowadays, though, we can define variables in a single stylesheet and let…

CSS Scrollbar With Progress Meter

April 15th, 2020

Scrollbars are natural progress meters. How far the scrollbar is down or across is how much progress has been made scrolling through that element (often the entire page). But, they are more like progress indicators than meters, if you think of a meter as something that “fills up” as you go. We can use some…

Create a Responsive CSS Motion Path? Sure We Can!

April 15th, 2020

There was a discussion recently on the Animation at Work Slack: how could you make a CSS motion path responsive? What techniques would be work? This got me thinking. A CSS motion path allows us to animate elements along custom user-defined paths. Those paths follow the same structure as SVG paths. We define a path…

Using CSS to Set Text Inside a Circle

April 14th, 2020

You want to set some text inside the shape of a circle with HTML and CSS? That’s crazy talk, right? Not really! Thanks to shape-outside and some pure CSS trickery it is possible to do exactly that. However, this can be a fiddly layout option. We have to take lots of different things into consideration,…

Styling in the Shadow DOM With CSS Shadow Parts 

April 13th, 2020

Safari 13.1 just shipped support for CSS Shadow Parts. That means the ::part() selector is now supported in Chrome, Edge, Opera, Safari, and Firefox. We’ll see why it’s useful, but first a recap on shadow DOM encapsulation… The benefits of shadow DOM encapsulation I work at giffgaff where we have a wide variety of CSS…