Yearly Archives: 2018

Maxim Leyzerovich created the marching ants effect with some delectably simple SVG.

See the Pen SVG Marching Ants by Maxim Leyzerovich (@round) on CodePen.

Let’s break it apart bit by bit and see all the little parts come together.

Step 1: Draw a dang rectangle

We can set up our SVG like a square, but have the aspect ratio ignored and have it flex into whatever rectangle we’d like.

<svg viewbox='0 0 40 40' preserveAspectRatio='none'>
<rect width='40' …

The post SVG Marching Ants appeared first on CSS-Tricks.

Nils Binder has the scoop on how to manipulate elements by using border-radius by passing eight values into the property like so:

.element {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

This is such a cool technique that he also developed a tiny web app called Fancy-Border-Radius to see how those values work in practice. It lets you manipulate the shape in any which way you want and then copy and paste that code straight into …

The post CSS border-radius can do that? appeared first on CSS-Tricks.

(This is a sponsored post.)

Hotjar is everything your team needs to:

If you are a web or UX designer or into web marketing, Hotjar will allow you to improve how your site performs. Try it for free.

Direct Link to Article — Permalink…

The post The fast and visual way to understand your users appeared first on CSS-Tricks.

No, not really.

I tried to articulate a need for it in 2011 in A Call for ::nth-everything.

Jeremy takes a fresh look at this here in 2018, noting that the first published desire for this was 15 years ago. All the same use cases still exist now, but perhaps slightly more, since web typography has come along way since then. Our desire to do more (and hacks to make it happen) are all the greater.

I seem to …

The post Did we get anywhere on that :nth-letter() thing? appeared first on CSS-Tricks.

It’s a common situation: you create a site and it’s ready to go. It’s all on GitHub. But you’re not really done. You need to set up deployment. You need to set up a process that runs your tests for you and you’re not manually running commands all the time. Ideally, every time you push to master, everything runs for you: the tests, the deployment… all in one place.

Previously, there only few options here that could help with …

The post Introducing GitHub Actions appeared first on CSS-Tricks.

If you’re working on a large-scale Vue application, chances are at some point you’re going to want to organize the structure of your application so that you have some globally defined variables for CSS that you can make use of in any part of your application.

This can be accomplished by writing this piece of code into every component in your application:

<style lang="scss">
@import "./styles/_variables.scss";
</style>

But who has time for that?! We’re programmers, let’s do this programmatically.

Why?…

The post How to Import a Sass File into Every Vue Component in an App appeared first on CSS-Tricks.

Writing asynchronous JavaScript without using the Promise object is a lot like baking a cake with your eyes closed. It can be done, but it’s gonna be messy and you’ll probably end up burning yourself.

I won’t say it’s necessary, but you get the idea. It’s real nice. Sometimes, though, it needs a little help to solve some unique challenges, like when you’re trying to sequentially resolve a bunch of promises in order, one after the other. A trick …

The post Why Using reduce() to Sequentially Resolve Promises Works appeared first on CSS-Tricks.