Sarah Jenkins You need a clipping shape that goes beyond polygon points and rounded corners. You want a reusable, responsive, designer-friendly shape that you can draw once and apply across components, images, and sections. By the end of this article you will clip content with an SVG-defined shape using clip-path: url(…), wire up an external SVG that … Read more
You want a small, themeable icon set that ships zero images, no external fonts, and no SVG sprites. By the end of this guide, you will build a compact, extensible set of icons using only CSS. You will learn a repeatable pattern for drawing icons with borders, backgrounds, gradients, and pseudo-elements. The sample set includes … Read more
Your UI copy carries the design. When a headline lands with style, you earn attention without shipping extra images or JavaScript. In this project you will build seven polished CSS text effects: gradient ink, crisp stroke, long shadow, neon, 3D extrusion, shimmer highlight, and a ribbon label with triangle tails. Each effect is production ready, … Read more
Visitors land on your 404 page when something goes wrong: a mistyped URL, an outdated link, or a moved document. A forgettable “Not Found” costs trust and creates drop-offs. In this tutorial, you will design a polished, helpful 404 page with clean HTML, modern CSS, accessible semantics, and small flourishes that make recovery effortless. By … Read more
You are going to draw a Pokeball with nothing but CSS. By the end, you will have a responsive, crisp, themeable Pokeball built from gradients, borders, and pseudo-elements. You will understand how to slice a circle into halves, add a center band, build the button with concentric rings, and apply a subtle shake animation for … Read more
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