Posts in category: "css"

How I Animated the bitsofcode Logo with CSS

I’m pretty new to CSS animations. For the most part, I had only used them in limited cases and mostly using libraries created by others, such as the excellent Animate.css created by Daniel Eden. As I mentioned in Redesigning bitsofcode, the graphic designer I worked with for the...

Linting HTML using CSS

When HTML is written incorrectly, nothing much happens. Because of this, it's easy to have invalid, unsemantic, or unaccessible bits in markup without it being obvious. There are many ways we can lint our HTML to discover and fix these issues, for example using the W3C Markup Validation Service. Another...

CSS Grid Layout Terminology, Explained

In the CSS Grid Layout Specification, a grid is defined as the following - The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container’s space into grid areas, into which grid items (representing the grid container’s content) can be placed Err…...

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