7 posts tagged with "css"

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.

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;

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.

<h1 class="h2"></h1>

That's a line of code (or at least an HTML start tag with a class) that apparently makes many people mad or confused.

I recently faced a task to create a contact form, with input rows in one column and a textarea and submit button in the other column. The fun little challenge was to make the textarea fill the available space above the submit button in a responsive way, so that the textarea will continue to fill the available space regardless of the number of input rows in the column to the left.

Here is the design, where you can choose the number of input rows:

I often face the task of centering something. Either horizontally or vertically, and often in both directions at the same time. When flex and grid didn't exist in CSS, it could be quite cumbersome to get vertical and horizontal centering working. Now there are easy solutions!

We start from a span element in a div:

Colors on the web can be defined in many different ways. There are 140 color names, such as green, goldenrod and navy. On top of that, there are four standards for color values: HEX, RGB, RGBA and HSL. I'll go through them one by one in this post and also show how to generate random color values for each standard with React.