Skip to main content

3 posts tagged with "css"

View All Tags

border-radius ellipses

· 4 min read
Filip Tammergård
Software Engineer at Einride

When I started learning about CSS many years back, I learned that border-radius: 50% turns a shape into an ellipse.

div {
width: 100px;
height: 100px;
background-color: hotpink;
border-radius: 50%;

I never questioned why. But as you might guess, 50% is not some kind of "ellipse hack". It all makes sense.

font-feature-settings vs font-variant

· 3 min read
Filip Tammergård
Software Engineer at Einride

We recently did some font feature tweaks at work. For one thing, we changed the appearance of 0 (number zero) to include a slash (like 0), to make it easier to differentiate from capital letter O. I learned a few things in the process that I'd like to share!

Slashed zeros

There are two main ways to configure slashed zeros.

  1. font-feature-settings: "zero" 1;
  2. font-variant: slashed-zero;

Physical properties to logical properties

· 9 min read
Filip Tammergård
Software Engineer at Einride

In the last months, I have been diving into the beautiful world of logical properties. The CSS spec has one sentence that I think describes what logical properties are in a nice way:

[Logical] properties are writing-mode relative equivalents of their corresponding physical properties.

Physical properties are simple to reason about, since they represent physical directions. Top, right, bottom and left are absolute directions. Left is always left—simple as that. Logical properties, on the other hand, are relative—the physical direction they correspond to varies.

As mentioned, the absolute nature of physical properties makes them simple to reason about. However, the absolute nature is also a limitation.