David Kim Glitch text is a fast way to give headings a digital, broken-screen vibe without images or JavaScript. By the end of this tutorial you will build a reusable, themable glitch effect powered by pure CSS. You will control colors with custom properties, duplicate the text using pseudo-elements, slice it with clip-path, and animate the layers … Read more
Arrows guide attention. They hint at direction, connect labels to targets, and show what happens next. In this project you will build five practical CSS arrow patterns you can drop into real UI: a tooltip caret, a speech bubble tail, a dropdown indicator, breadcrumb chevrons, and carousel navigation arrows. You will use a single HTML … Read more
You can paint rich, scalable backgrounds without any images by combining CSS shapes and layered gradients. By the end of this walkthrough you will build two production-ready pattern backgrounds, polka dots and a triangle tessellation, driven by CSS variables. You will learn how to tune spacing, color, and density in a single place and apply … Read more
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