David Kim CSS calc() solves layout math you usually offload to JavaScript or preprocessors. By the end of this article you will build a responsive card grid that uses calc() for column sizing, padding that scales with the viewport, a progress meter that reads a numeric custom property, and a tooltip with a triangle pointer positioned using … Read more
A default range input works, but the UI feels inconsistent across browsers and it rarely matches a product’s visual language. In this guide you will build a polished slider control: a clean track with a colored fill, a crisp circular thumb, a readable value bubble with a small caret, smooth focus and hover states, and … Read more
A close button is a small control that carries a lot of responsibility. It must be obvious, fast to click or tap, crisp at any size, easy to theme, and accessible to keyboard and screen reader users. In this guide you will build a production-ready Close button using pure CSS: a scalable “X” icon, optional … Read more
A flipping card is a compact way to reveal secondary content without sending users to a new page or stuffing text into cramped spaces. By the end of this article you will build a polished, accessible flipping card that works with hover, focus, and an optional class toggle. You will learn the 3D transform setup, … Read more
You will build a recognizable Minion using only HTML and CSS. By the end, you will have a clean, scalable character that renders without images or SVG. The process teaches layering, border tricks, and pseudo-elements to create complex shapes. You will also add tiny touches like a blinking animation, shiny pupils, and a denim pocket … Read more
Build a polished, blinking eye entirely in CSS. You will create an elliptical eye with an iris, pupil, highlight, and animated eyelids, no images or SVG required. By the end, you will understand how to layer shapes, control perspective with border-radius, and animate eyelids with pseudo-elements using only CSS. Why a CSS “Blinking Eye” Matters … Read more
Developers argue about units for a reason: the wrong choice forces rewrites, breaks zoom, and makes components feel brittle. By the end of this article you will know when to use rem, when em makes more sense, and when px remains fine. We will build a small, visual demo that compares the three units on … Read more
Positioning is not guesswork. If you have ever nudged an element with negative margins until it “looked right,” you felt the pain of layouts that break at the next breakpoint. By the end of this article, you will place overlays, badges, ribbons, and arrows exactly where they belong using position: absolute, and you will know … Read more
radial-gradient() is more than a background trick. With a few layers, you can paint soft lights, vignettes, glare, and texture without images. By the end of this article you will build a themeable card that uses layered radial gradients for a polished lighting system, then add a glossy badge and a subtle halftone texture, all … Read more
CSS filter is a powerful, underused tool that lets you style pixels at render time. You can grayscale a photo for a subtle UI, blur thumbnails to hide spoilers, and hue-rotate a card to match a theme, no extra assets, no image editor. In this guide you will build practical utilities and components that showcase … Read more