Posts in category: "css"

Challenge - Recreating the iTunes Library

It's time for another UI challenge! In the first challenge, we recreated some interactions from the MacOS application, Clear. In this one, we are recreating the look of the old iTunes library gallery. The Challenge This is what the final product looks like - Start the Challenge | Live Demo with...

The New System Font Stack?

A few months ago, I wrote about how you can use system fonts in the browser using the built-in keywords that work with the font shorthand property (see Using System Fonts in the Browser). These keywords can be useful, but they also have some drawbacks, the main one being that...

nth-child vs nth-of-type

The nth-child() and nth-of-type() selectors are “structural” pseudo-classes, which are classes that allow us to select elements based on information within the document tree that cannot typically be represented by other simple selectors. In the case of nth-child() and nth-of-type(), the extra information is the element’s position in the...

Toast.js, a Library for Toast messages

Last week I created a small library for creating Toast messages. Here, I thought I would share my process in creating it and the code behind it. The HTML The Toast is made up of two elements. The Toast message itself, .toastjs, and a container element, .toastjs-container. <div class=...

The Background Properties

As I have mentioned before, every element in the document tree is just a rectangular box. Each of these boxes has a background layer that can either be fully transparent, a colour, or an image. This background layer is controlled by 8 CSS properties (plus 1 shorthand property). background-color The...