Sarah Jenkins Shadow choice affects how real your UI feels. Pick the wrong one and icons look like rectangles with fuzzy edges. Pick the right one and stickers, badges, and odd shapes read as physical objects. By the end of this article you will know when to reach for filter: drop-shadow() and when box-shadow wins. You will … Read more
A “Back to Top” button is small, but it changes how people experience long pages. In this build, you will design a back-to-top control that looks polished, feels fast, and respects accessibility. You will create a clean circular button, draw the up icon with pure CSS (no images), reveal it only after scrolling, and add … Read more
You will build a looping Pac-Man scene powered only by CSS. The character will chomp, glide across a track, and make pellets disappear in sync. By the end, you will have a compact component that proves how far modern CSS can go without JavaScript. Why Pure CSS Pac-Man Animation Matters Micro-animations make interfaces feel alive, … Read more
You can decorate a page for the season without images or SVGs. In this project you will build a CSS-only holiday scene: a stylized tree made from triangles, a glowing star topper, round ornaments, blinking string lights, gentle snowfall, and a couple of gift boxes. Everything renders from basic HTML elements, pseudo-elements, gradients, and transforms. … Read more
Card UI does not have to be a rectangle with a shadow. You can turn a stock card into a branded component with a few shape accents: a corner ribbon for status, a circular avatar that breaks the frame, a coupon notch that signals deals, a price-tag tab that cues commerce, and a starburst sticker … Read more
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