Latest News

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.