Sarah Jenkins Every developer hits the moment when z-index stops making sense. You set z-index: 9999 on your tooltip, but it still hides behind a sibling. The missing piece is the stacking context. By the end of this article, you will understand what creates stacking contexts, how they reorder painting, and how to build dependable layers for … Read more
Text that wraps tightly around shapes sells the layout before the copy even starts. With the shape-outside property you can bend paragraph flow around circles, triangles, and even image silhouettes. By the end of this article you will build a clean article layout where text wraps a circular badge, a triangular callout, and a photo … Read more
You want a bold, compact “New” label that sits on a product card without extra images, JavaScript, or bloated dependencies. In this project you will code a reusable ribbon banner for product cards using pure CSS. It will look crisp on any DPI, theme with a couple of variables, and drop into any grid of … Read more
You need a dependable, accessible star rating that looks sharp, supports hover, click, keyboard, and fractional display, without shipping any JavaScript or external icons. By the end of this guide you will build a fully interactive 5‑star rating with pure CSS, plus a compact read‑only variant for average scores that supports halves and tenths. Why … Read more
Designers reach for icon fonts or SVGs when they need social icons. That works, but it adds files, network requests, and an asset pipeline. In this build, you will craft a compact set of social media icons using only CSS. No images. No icon fonts. You will learn how to use pseudo-elements, gradients, and a … Read more