Code Snippets
67 articles
Most loading spinners on the web are just a keyframe animation sitting in the stylesheet. Nobody needs a GIF or an animation library to…
Stars on a page are easy to get wrong because two very different widgets look almost the same. Some only report a score. Others…
Footer bugs mostly turn up on pages with very little content. The footer floats halfway up the screen with blank space under it, or…
Rotate a card with rotateY and it just looks like a flat shape getting narrower. Perspective sets the viewing distance between the viewer and…
Changelogs, resumes, project histories and product roadmaps keep asking for the same thing, which is dated events in order along a line. HTML and…
Most of a chat box is a flex column with rounded corners. Bubbles, a header, a scrolling message list and an input bar at…
A lot of sliders load a script just to change which image is showing. CSS can handle that part on its own. Hero banners,…
Plenty of internal admin panels and monitoring screens carry a full component framework just to get a sidebar and a few cards onto the…
Most border animation on a page is a color change on hover. One transition line does it, and it’s what buttons and pricing cards…
You can make a button feel finished with CSS alone. No images, no JavaScript, just hover, focus and press states that do something visible.…
Most flip card tutorials stop once the card turns on hover. That part is easy, and it’s also where the trouble starts, because a…
A class toggle is enough to show and hide a panel. The W3C’s ARIA Authoring Practices Guide (2025) still points most websites somewhere else,…
Most list styling problems come down to the marker, the bullet or number sitting in front of each item. CSS handles it through list-style-type,…
Baymard Institute’s 2023 benchmark found that 50% of ecommerce sites fail to show adequate list item attributes. Test participants dismissed relevant products or left…
Licensing is the part of CSS animation libraries that gets the least attention. Hover.css requires a paid license for commercial work, while the Animate.css…
Out of the box, a blockquote is an indented block of text and not much else. The browser applies a 40px indent and stops…
Borders, gradients, pseudo-elements and clipped shapes can all split a page into sections without a single image file. Plenty of pages add one out…
Most card bugs I’ve run into had nothing to do with shadows or border radius. The markup looked fine with one card on the…
Add a box-shadow to a bubble that uses clip-path and watch it vanish. MDN documents that clip-path hides every part of an element outside…
Pinterest-style card walls used to mean JavaScript. CSS can now do it natively with display: grid-lanes, which drops each item into the lane with…
CSS card hover effects need no JavaScript. Put a transition on the card’s resting rule, change transform or box-shadow inside :hover, and the card…
When text animation goes wrong, the splitting step is usually to blame, not the motion. Adrian Roselli’s February 2026 tests of GSAP’s own SplitText…
Most progress bars look identical on screen whether they’re built well or badly. A styled div and a native progress element both fill from…
A button that only changes color on :hover or :active confirms the press happened and nothing more. The ripple adds the where: a fading…
For years, getting a background to trail behind the text meant a JavaScript scroll listener and a transform rewritten on every frame. CSS can…
Almost nobody was using backdrop-filter in 2018. Chromium engineer Mason Freed put unprefixed usage at about 0.0003% in November of that year (W3C CSS…
The open list on a select element stayed out of CSS reach for a long time. Chrome 135 changed that when it went stable…
Most 3D buttons on the web are a single element with a solid shadow underneath it. A zero-blur box-shadow acts as the bottom edge,…
Most people restyle the border first when they style a CSS input text field, which is also the point where accessibility rules start to…
Plenty of image galleries need nothing more than a list of images and a stylesheet. Grid, Flexbox or multi-column layout arranges the photos in…