Posts in category: "css"

How calc() Works

The CSS3 calc() function allows us to perform mathematical operations on property values. Instead of declaring, for example, static pixel values for an element's width, we can use calc() to specify that the width be the result of the addition of two or more numeric values. .foo { width: calc(100px...

3 New CSS Features to Learn in 2017

Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year. 1. Feature Queries A while ago, I wrote about Feature Queries being the one...

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...