CSS doesn’t have any built-in way to make triangles, but an easy way to solve the problem is to just use borders. Let’s say we have an element with borders on all sides: As you can see, the borders doesn’t have sharp corners, and we can use …
If you are a developer writing any kind of CSS, you should know about the box model, and how it relates to the sizing of elements. Let’s dig in to that right now. The CSS Box Model Every HTML element is a box. That box has 4 different layers: …
A switch button—as made popular by the iOS operating system— makes it easy to toggle between two different options, such as on or off. We can recreate this type of button with pure CSS. We don’t need any JavaScript, we can use the :checked state of a checkbox …
When talking about layouts in CSS, we often divide the different types of layouts into 4 categories: 1. Static (also called a fixed layout) 2. Liquid (also called a fluid layout) 3. Adaptive 4. Responsive What are the differences between these? Let’s go through each one and see what …
When the margins of two adjacent elements are collapsed—or combined—into just a single margin, we call this behavior margin collapsing. The final margin size will be equal to the largest of the two margins. For example, if an element with a 20px margin collapses with an element with …